From c27f45161eabcac3162fd909bd6a6f99bbed107c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 19 Jul 2026 19:58:32 +0530
Subject: [PATCH 001/158] add neurone - wip

---
 .eslintrc.cjs                                 |    9 +-
 .zed/settings.json                            |    7 +
 package-lock.json                             |   47 +-
 package.json                                  |    4 +-
 src/app/components/AuthFlowsLoader.tsx        |   39 +-
 src/app/components/CapabilitiesLoader.tsx     |   16 +-
 src/app/components/LogoutDialog.tsx           |   26 +-
 src/app/components/MediaConfigLoader.tsx      |   16 +-
 src/app/components/RenderMessageContent.tsx   |  235 +--
 src/app/components/RoomSummaryLoader.tsx      |   71 +-
 src/app/components/RoomUnreadProvider.tsx     |   24 -
 src/app/components/ServerConfigsLoader.tsx    |   42 +-
 src/app/components/SpecVersionsLoader.tsx     |   44 +-
 .../components/SupportedUIAFlowsLoader.tsx    |    2 +-
 .../create-room/AdditionalCreatorInput.tsx    |   12 +-
 .../create-room/CreateRoomAliasInput.tsx      |   31 +-
 src/app/components/create-room/utils.ts       |  107 +-
 src/app/components/editor/Elements.tsx        |    8 +-
 .../autocomplete/EmoticonAutocomplete.tsx     |   20 +-
 .../autocomplete/RoomMentionAutocomplete.tsx  |  103 +-
 .../autocomplete/UserMentionAutocomplete.tsx  |   96 +-
 src/app/components/editor/output.ts           |   10 +-
 src/app/components/emoji-board/EmojiBoard.tsx |  170 +-
 .../emoji-board/components/Item.tsx           |   16 +-
 .../emoji-board/components/Preview.tsx        |    8 +-
 .../encrypted-event/EncryptedEvent.tsx        |  109 +
 src/app/components/encrypted-event/index.ts   |    1 +
 .../components/event-readers/EventReaders.tsx |   67 +-
 .../image-pack-view/ImagePackContent.tsx      |    4 +-
 .../components/image-pack-view/ImageTile.tsx  |    4 +-
 .../invite-user-prompt/InviteUserPrompt.tsx   |   34 +-
 .../leave-room-prompt/LeaveRoomPrompt.tsx     |   35 +-
 src/app/components/message/FileHeader.tsx     |   22 +-
 .../components/message/MsgTypeRenderers.tsx   |  456 ++--
 src/app/components/message/Reaction.tsx       |   35 +-
 src/app/components/message/RenderBody.tsx     |   51 +-
 src/app/components/message/Reply.css.ts       |   50 +-
 src/app/components/message/Reply.tsx          |  265 ++-
 .../message/content/AudioContent.tsx          |  220 +-
 .../message/content/EventContent.tsx          |    2 +-
 .../message/content/FileContent.tsx           |  122 +-
 .../message/content/ImageContent.tsx          |   66 +-
 .../message/content/ThumbnailContent.tsx      |   39 +-
 .../message/content/VideoContent.tsx          |   78 +-
 src/app/components/message/layout/Base.tsx    |   10 +-
 .../components/message/layout/layout.css.ts   |   25 +-
 .../components/room-avatar/RoomAvatar.css.ts  |    4 +
 src/app/components/room-avatar/RoomAvatar.tsx |   12 +-
 src/app/components/room-card/RoomCard.tsx     |   73 +-
 src/app/components/room-intro/RoomIntro.tsx   |  112 +-
 .../splash-screen/SplashScreen.css.ts         |    7 +-
 .../components/splash-screen/SplashScreen.tsx |   19 +-
 src/app/components/uia-stages/DummyStage.tsx  |    2 +-
 src/app/components/uia-stages/EmailStage.tsx  |   36 +-
 .../components/uia-stages/PasswordStage.tsx   |    2 +-
 .../components/uia-stages/ReCaptchaStage.tsx  |    2 +-
 .../uia-stages/RegistrationTokenStage.tsx     |    2 +-
 src/app/components/uia-stages/TermsStage.tsx  |    2 +-
 src/app/components/uia-stages/types.ts        |    3 +-
 .../components/upload-board/UploadBoard.tsx   |   14 +-
 .../upload-card/CompactUploadCardRenderer.tsx |   19 +-
 .../upload-card/UploadCardRenderer.tsx        |   33 +-
 .../components/url-preview/UrlPreviewCard.tsx |   54 +-
 .../components/user-avatar/UserAvatar.css.ts  |    4 +
 src/app/components/user-avatar/UserAvatar.tsx |    2 +-
 src/app/features/create-chat/CreateChat.tsx   |   74 +-
 src/app/features/create-room/CreateRoom.tsx   |   45 +-
 src/app/features/create-space/CreateSpace.tsx |   47 +-
 .../JoinBeforeNavigate.tsx                    |    6 +-
 src/app/features/lobby/DnD.css.ts             |    2 +-
 src/app/features/lobby/HierarchyItemMenu.tsx  |    4 +-
 src/app/features/lobby/Lobby.tsx              |    4 -
 src/app/features/room-nav/RoomNavItem.tsx     |  117 +-
 src/app/features/room/CommandAutocomplete.tsx |   10 +-
 src/app/features/room/FileDropDialog.tsx      |   36 +
 src/app/features/room/MembersDrawer.tsx       |  115 +-
 src/app/features/room/OutboxView.tsx          |  339 +++
 src/app/features/room/Room.tsx                |   84 +-
 src/app/features/room/RoomInput.tsx           |  417 +---
 src/app/features/room/RoomTimeline.tsx        | 1863 ++++-------------
 src/app/features/room/RoomTombstone.tsx       |   58 +-
 src/app/features/room/RoomView.tsx            |   60 +-
 src/app/features/room/RoomViewFollowing.tsx   |  247 +--
 src/app/features/room/RoomViewHeader.tsx      |  112 +-
 src/app/features/room/RoomViewTyping.css.ts   |    5 +-
 src/app/features/room/RoomViewTyping.tsx      |  210 +-
 .../room/components/JumpToLatestButton.tsx    |   39 +
 .../room/components/TimelineDivider.tsx       |   45 +
 .../room/components/TimelineFloat.tsx         |   17 +
 src/app/features/room/components/index.ts     |    3 +
 .../styles.css.ts}                            |    0
 .../hooks/useEnsureRoomEncryptionSession.ts   |   75 +
 src/app/features/room/hooks/useSendMessage.ts |  276 +++
 src/app/features/room/hooks/useTimeline.ts    |  284 +++
 .../room/hooks/useUploadItemPicker.ts         |   62 +
 src/app/features/room/hooks/useUploadItems.ts |   69 +
 src/app/features/room/hooks/useUploadsAtom.ts |   16 +
 src/app/features/room/message/Message.tsx     |  701 ++++---
 .../features/room/message/MessageEditor.tsx   |   39 +-
 src/app/features/room/message/Reactions.tsx   |   59 +-
 .../thread-selector/ThreadSelector.tsx        |   75 +
 .../room/message/thread-selector/index.ts     |    1 +
 .../message/thread-selector/styles.css.ts     |   38 +
 src/app/features/room/msgContent.ts           |   42 +-
 .../room/reaction-viewer/ReactionViewer.tsx   |  183 +-
 .../room/room-pin-menu/RoomPinMenu.tsx        |  520 +++--
 .../features/room/thread-view/ThreadView.tsx  |  626 ++++++
 src/app/features/room/thread-view/index.ts    |    1 +
 .../features/room/thread-view/styles.css.ts   |   22 +
 src/app/features/settings/Settings.tsx        |   19 +-
 .../features/settings/account/ContactInfo.tsx |   13 +-
 .../settings/account/IgnoredUserList.tsx      |   32 +-
 .../features/settings/account/MatrixId.tsx    |    6 +-
 src/app/features/settings/account/Profile.tsx |   40 +-
 .../settings/notifications/AllMessages.tsx    |   77 +-
 .../notifications/KeywordMessages.tsx         |   72 +-
 .../NotificationModeSwitcher.tsx              |    4 +-
 .../notifications/SpecialMessages.tsx         |  122 +-
 .../notifications/SystemNotification.tsx      |   51 +-
 src/app/hooks/router/useSelectedRoom.ts       |   16 +-
 src/app/hooks/router/useSelectedSpace.ts      |   22 +-
 src/app/hooks/storage/useAccountData.ts       |   25 +
 src/app/hooks/storage/useGetRoomAvatar.ts     |   36 +
 src/app/hooks/storage/useGetRoomName.ts       |   45 +
 src/app/hooks/storage/useRoomHeros.ts         |   57 +
 src/app/hooks/storage/useRoomStateEvent.ts    |   45 +
 src/app/hooks/storage/useRoomTopic.ts         |   11 +
 src/app/hooks/types.ts                        |   11 +-
 src/app/hooks/useAuthFlows.ts                 |   17 +-
 src/app/hooks/useAuthMetadata.ts              |    6 +-
 src/app/hooks/useCapabilities.ts              |   27 +-
 src/app/hooks/useClient.ts                    |   16 +
 src/app/hooks/useCommands.ts                  |  353 +++-
 src/app/hooks/useDirectUsers.ts               |   27 +-
 src/app/hooks/useEmailNotifications.ts        |   25 +-
 src/app/hooks/useIgnoredUsers.ts              |   37 +-
 src/app/hooks/useImagePackRooms.ts            |   22 +-
 src/app/hooks/useImagePacks.ts                |  267 +--
 src/app/hooks/useJoinedRoomId.ts              |   21 +-
 src/app/hooks/useLocalRoomSummary.ts          |   58 +-
 src/app/hooks/useMediaAuthentication.ts       |    8 +-
 src/app/hooks/useMemberFilter.ts              |   47 +-
 src/app/hooks/useMemberPowerTag.ts            |   27 +-
 src/app/hooks/useMemberSort.ts                |   52 +-
 src/app/hooks/useMentionClickHandler.ts       |   14 +-
 src/app/hooks/useMutualRooms.ts               |   10 +-
 src/app/hooks/useNetwork.ts                   |   23 +
 src/app/hooks/useNotificationMode.ts          |   15 +-
 src/app/hooks/useObservableValue.ts           |   85 +
 src/app/hooks/useParsedLoginFlows.ts          |   21 +-
 src/app/hooks/usePasswordEmail.ts             |   52 +-
 src/app/hooks/usePendingMembers.ts            |   74 +
 src/app/hooks/usePowerLevelTags.ts            |   45 +-
 src/app/hooks/usePowerLevels.ts               |   35 +-
 src/app/hooks/usePushRule.ts                  |   30 +-
 src/app/hooks/useRecentEmoji.ts               |   41 +-
 src/app/hooks/useRecoveryAttempt.ts           |   26 +
 src/app/hooks/useRegisterEmail.ts             |   52 +-
 src/app/hooks/useReportRoomSupported.ts       |    7 +-
 src/app/hooks/useRequest.ts                   |   22 +
 src/app/hooks/useRoom.ts                      |    5 +-
 src/app/hooks/useRoomCreators.ts              |   20 +-
 src/app/hooks/useRoomEvent.ts                 |   44 +-
 src/app/hooks/useRoomMembers.ts               |  141 +-
 src/app/hooks/useRoomNavigate.ts              |   36 +-
 src/app/hooks/useRoomPermissions.ts           |   12 +-
 src/app/hooks/useRoomPinnedEvents.ts          |   18 +-
 src/app/hooks/useRoomTypingMembers.ts         |   13 +-
 .../hooks/useRoomsNotificationPreferences.ts  |   91 +-
 src/app/hooks/useSecondsCountdown.ts          |   21 +
 src/app/hooks/useSidebarItems.ts              |   77 +-
 src/app/hooks/useSpace.ts                     |    9 +-
 src/app/hooks/useSpaceHierarchy.ts            |  266 +--
 src/app/hooks/useSpecVersions.ts              |   19 +-
 src/app/hooks/useTypingStatusUpdater.ts       |   37 +-
 src/app/hooks/useUIAFlows.ts                  |   21 +-
 src/app/hooks/useUserProfile.ts               |   64 +-
 src/app/hooks/useVirtualPaginator.ts          |   11 +-
 src/app/pages/App.tsx                         |    6 +-
 .../{ConfigConfig.tsx => ClientConfig.tsx}    |   17 +-
 src/app/pages/Router.tsx                      |   52 +-
 src/app/pages/auth/SSOLogin.tsx               |   47 +-
 src/app/pages/auth/login/Login.tsx            |    5 +-
 .../pages/auth/login/PasswordLoginForm.tsx    |   57 +-
 src/app/pages/auth/login/TokenLogin.tsx       |   43 +-
 src/app/pages/auth/login/loginUtil.ts         |   70 +-
 .../auth/register/PasswordRegisterForm.tsx    |   80 +-
 src/app/pages/auth/register/Register.tsx      |    5 +-
 src/app/pages/auth/register/registerUtil.ts   |  141 +-
 .../auth/reset-password/PasswordResetForm.tsx |   63 +-
 .../auth/reset-password/resetPasswordUtil.ts  |   38 +-
 src/app/pages/client/ClientBindAtoms.ts       |   15 +-
 .../pages/client/ClientInitStorageAtom.tsx    |    6 +-
 src/app/pages/client/ClientNonUIFeatures.tsx  |  239 +--
 src/app/pages/client/ClientRoot.tsx           |  240 +--
 .../pages/client/InitialSyncSplashScreen.tsx  |  129 ++
 src/app/pages/client/SidebarNav.tsx           |    2 +-
 src/app/pages/client/SpecVersions.tsx         |   11 +-
 src/app/pages/client/SyncStatus.tsx           |  165 +-
 src/app/pages/client/direct/Direct.tsx        |   72 +-
 src/app/pages/client/direct/DirectCreate.tsx  |   16 +-
 src/app/pages/client/direct/RoomProvider.tsx  |    7 +-
 src/app/pages/client/direct/useDirectRooms.ts |    6 +-
 src/app/pages/client/explore/Explore.tsx      |   29 +-
 src/app/pages/client/home/Home.tsx            |   78 +-
 src/app/pages/client/home/RoomProvider.tsx    |    7 +-
 src/app/pages/client/home/useHomeRooms.ts     |    6 +-
 src/app/pages/client/sidebar/DirectTab.tsx    |   97 +-
 src/app/pages/client/sidebar/ExploreTab.tsx   |    6 +-
 src/app/pages/client/sidebar/HomeTab.tsx      |   99 +-
 src/app/pages/client/sidebar/SettingsTab.tsx  |   19 +-
 src/app/pages/client/sidebar/SpaceTabs.tsx    |  441 ++--
 src/app/pages/client/space/RoomProvider.tsx   |   41 +-
 src/app/pages/client/space/Space.tsx          |  226 +-
 src/app/pages/client/space/SpaceProvider.tsx  |   14 +-
 src/app/plugins/custom-emoji/ImagePack.ts     |   17 +-
 src/app/plugins/custom-emoji/utils.ts         |   75 +-
 src/app/plugins/react-custom-html-parser.tsx  |   64 +-
 src/app/plugins/recent-emoji.ts               |   47 +-
 src/app/plugins/via-servers.ts                |  105 +-
 src/app/state/hooks/roomList.ts               |  167 +-
 src/app/state/hooks/roomNotifications.ts      |  134 ++
 src/app/state/hooks/unread.ts                 |   42 +-
 src/app/state/hooks/useBindAtoms.ts           |   23 +-
 src/app/state/list.ts                         |   15 +-
 src/app/state/mDirectList.ts                  |   45 +-
 src/app/state/room-list/inviteList.ts         |   43 +-
 src/app/state/room-list/roomList.ts           |   41 +-
 src/app/state/room-list/utils.ts              |   62 -
 src/app/state/room/roomInputDrafts.ts         |   46 +-
 src/app/state/room/roomToNotifications.ts     |   84 +
 src/app/state/room/roomToParents.ts           |  119 +-
 src/app/state/room/roomToUnread.ts            |  300 +--
 src/app/state/spaceRooms.ts                   |    2 +-
 src/app/state/typingMembers.ts                |  163 +-
 src/app/state/upload.ts                       |   98 +-
 src/app/utils/disposable.ts                   |   16 -
 src/app/utils/dom.ts                          |   10 +-
 src/app/utils/featureCheck.ts                 |   23 +-
 src/app/utils/matrix-uia.ts                   |   33 +-
 src/app/utils/matrix.ts                       |  174 +-
 src/app/utils/randomString.ts                 |   84 +
 src/app/utils/room.ts                         |  202 +-
 src/app/utils/sort.ts                         |    6 +-
 src/app/utils/user-agent.ts                   |   17 +
 src/client/LogoutManager.ts                   |   50 +
 src/client/MachineManager.ts                  |   45 +
 src/client/SyncResponseManager.ts             |  135 ++
 src/client/context.ts                         |  773 +++++++
 src/client/decryption/DecryptionManager.ts    |   85 +
 src/client/decryption/EncryptedEvent.ts       |   93 +
 src/client/decryption/EncryptedEventIndex.ts  |   52 +
 src/client/decryption/index.ts                |    3 +
 src/client/filter.ts                          |   70 +
 src/client/initialize.ts                      |  177 ++
 src/client/mxcToHttp.ts                       |   39 +
 src/client/reader/Error.ts                    |   15 +
 src/client/reader/Event.ts                    |   39 +
 src/client/reader/index.ts                    |    3 +
 src/client/reader/message/Content.ts          |   75 +
 src/client/reader/message/EncryptedFile.ts    |    7 +
 src/client/reader/message/InReplyTo.ts        |    7 +
 src/client/reader/message/Info.ts             |   40 +
 src/client/reader/message/Mentions.ts         |   13 +
 src/client/reader/message/RelatesTo.ts        |   23 +
 src/client/reader/message/Relations.ts        |   15 +
 src/client/reader/message/Thread.ts           |   15 +
 src/client/reader/message/ThumbnailInfo.ts    |   24 +
 src/client/reader/message/Unsigned.ts         |   27 +
 src/client/reader/message/index.ts            |   10 +
 src/client/request.ts                         |  123 ++
 src/client/responseProgress.ts                |   41 +
 src/client/room/ThreadMeta.ts                 |   19 +
 src/client/room/ThreadTimeline.ts             |  303 +++
 src/client/room/Timeline.ts                   |  349 +++
 src/client/room/TimelineBatchManager.ts       |  127 ++
 src/client/room/TimelineUtils.ts              |   57 +
 src/client/room/TimelineView.ts               |   23 +
 src/client/room/index.ts                      |   96 +
 src/client/room/local-event/LocalEvent.ts     |   29 +
 .../room/local-event/LocalEventOutbox.ts      |   53 +
 .../room/local-event/LocalEventSender.ts      |  111 +
 src/client/room/local-event/index.ts          |    2 +
 src/client/room/messages/BatchChange.ts       |   14 +
 src/client/room/messages/BatchInfo.ts         |   10 +
 src/client/room/messages/MessageBatch.ts      |   43 +
 src/client/room/messages/MessageRange.ts      |   90 +
 src/client/room/messages/Messages.ts          |   82 +
 src/client/room/messages/index.ts             |    5 +
 src/client/room/relations/Relations.ts        |   57 +
 .../room/relations/RelationsProcessor.ts      |   98 +
 src/client/room/relations/index.ts            |    3 +
 src/client/room/relations/utils.ts            |   36 +
 src/client/storage/collections/AccountData.ts |   28 +
 src/client/storage/collections/InviteRoom.ts  |   37 +
 src/client/storage/collections/JoinRoom.ts    |  176 ++
 src/client/storage/collections/KnockRoom.ts   |   37 +
 src/client/storage/collections/LeaveRoom.ts   |   80 +
 src/client/storage/collections/Presence.ts    |   31 +
 src/client/storage/collections/ReadReceipt.ts |   44 +
 .../storage/collections/SessionValue.ts       |   65 +
 .../collections/UnreadNotifications.ts        |   71 +
 src/client/storage/collections/index.ts       |    9 +
 src/client/storage/index.ts                   |  153 ++
 src/client/storage/utils.ts                   |    2 +
 src/client/sync.ts                            |  177 ++
 src/client/syncLatestEvent.ts                 |   27 +
 src/client/syncWriter/index.ts                |  113 +
 src/client/syncWriter/utils.ts                |  660 ++++++
 src/client/txn.ts                             |   12 +
 src/types/matrix/accountData.ts               |   55 +
 src/types/matrix/common.ts                    |   80 +-
 src/types/matrix/room.ts                      |   75 +-
 313 files changed, 15726 insertions(+), 8143 deletions(-)
 create mode 100644 .zed/settings.json
 delete mode 100644 src/app/components/RoomUnreadProvider.tsx
 create mode 100644 src/app/components/encrypted-event/EncryptedEvent.tsx
 create mode 100644 src/app/components/encrypted-event/index.ts
 create mode 100644 src/app/features/room/FileDropDialog.tsx
 create mode 100644 src/app/features/room/OutboxView.tsx
 create mode 100644 src/app/features/room/components/JumpToLatestButton.tsx
 create mode 100644 src/app/features/room/components/TimelineDivider.tsx
 create mode 100644 src/app/features/room/components/TimelineFloat.tsx
 create mode 100644 src/app/features/room/components/index.ts
 rename src/app/features/room/{RoomTimeline.css.ts => components/styles.css.ts} (100%)
 create mode 100644 src/app/features/room/hooks/useEnsureRoomEncryptionSession.ts
 create mode 100644 src/app/features/room/hooks/useSendMessage.ts
 create mode 100644 src/app/features/room/hooks/useTimeline.ts
 create mode 100644 src/app/features/room/hooks/useUploadItemPicker.ts
 create mode 100644 src/app/features/room/hooks/useUploadItems.ts
 create mode 100644 src/app/features/room/hooks/useUploadsAtom.ts
 create mode 100644 src/app/features/room/message/thread-selector/ThreadSelector.tsx
 create mode 100644 src/app/features/room/message/thread-selector/index.ts
 create mode 100644 src/app/features/room/message/thread-selector/styles.css.ts
 create mode 100644 src/app/features/room/thread-view/ThreadView.tsx
 create mode 100644 src/app/features/room/thread-view/index.ts
 create mode 100644 src/app/features/room/thread-view/styles.css.ts
 create mode 100644 src/app/hooks/storage/useAccountData.ts
 create mode 100644 src/app/hooks/storage/useGetRoomAvatar.ts
 create mode 100644 src/app/hooks/storage/useGetRoomName.ts
 create mode 100644 src/app/hooks/storage/useRoomHeros.ts
 create mode 100644 src/app/hooks/storage/useRoomStateEvent.ts
 create mode 100644 src/app/hooks/storage/useRoomTopic.ts
 create mode 100644 src/app/hooks/useClient.ts
 create mode 100644 src/app/hooks/useNetwork.ts
 create mode 100644 src/app/hooks/useObservableValue.ts
 create mode 100644 src/app/hooks/usePendingMembers.ts
 create mode 100644 src/app/hooks/useRecoveryAttempt.ts
 create mode 100644 src/app/hooks/useRequest.ts
 create mode 100644 src/app/hooks/useSecondsCountdown.ts
 rename src/app/pages/{ConfigConfig.tsx => ClientConfig.tsx} (72%)
 create mode 100644 src/app/pages/client/InitialSyncSplashScreen.tsx
 create mode 100644 src/app/state/hooks/roomNotifications.ts
 create mode 100644 src/app/state/room/roomToNotifications.ts
 delete mode 100644 src/app/utils/disposable.ts
 create mode 100644 src/app/utils/randomString.ts
 create mode 100644 src/client/LogoutManager.ts
 create mode 100644 src/client/MachineManager.ts
 create mode 100644 src/client/SyncResponseManager.ts
 create mode 100644 src/client/context.ts
 create mode 100644 src/client/decryption/DecryptionManager.ts
 create mode 100644 src/client/decryption/EncryptedEvent.ts
 create mode 100644 src/client/decryption/EncryptedEventIndex.ts
 create mode 100644 src/client/decryption/index.ts
 create mode 100644 src/client/filter.ts
 create mode 100644 src/client/initialize.ts
 create mode 100644 src/client/mxcToHttp.ts
 create mode 100644 src/client/reader/Error.ts
 create mode 100644 src/client/reader/Event.ts
 create mode 100644 src/client/reader/index.ts
 create mode 100644 src/client/reader/message/Content.ts
 create mode 100644 src/client/reader/message/EncryptedFile.ts
 create mode 100644 src/client/reader/message/InReplyTo.ts
 create mode 100644 src/client/reader/message/Info.ts
 create mode 100644 src/client/reader/message/Mentions.ts
 create mode 100644 src/client/reader/message/RelatesTo.ts
 create mode 100644 src/client/reader/message/Relations.ts
 create mode 100644 src/client/reader/message/Thread.ts
 create mode 100644 src/client/reader/message/ThumbnailInfo.ts
 create mode 100644 src/client/reader/message/Unsigned.ts
 create mode 100644 src/client/reader/message/index.ts
 create mode 100644 src/client/request.ts
 create mode 100644 src/client/responseProgress.ts
 create mode 100644 src/client/room/ThreadMeta.ts
 create mode 100644 src/client/room/ThreadTimeline.ts
 create mode 100644 src/client/room/Timeline.ts
 create mode 100644 src/client/room/TimelineBatchManager.ts
 create mode 100644 src/client/room/TimelineUtils.ts
 create mode 100644 src/client/room/TimelineView.ts
 create mode 100644 src/client/room/index.ts
 create mode 100644 src/client/room/local-event/LocalEvent.ts
 create mode 100644 src/client/room/local-event/LocalEventOutbox.ts
 create mode 100644 src/client/room/local-event/LocalEventSender.ts
 create mode 100644 src/client/room/local-event/index.ts
 create mode 100644 src/client/room/messages/BatchChange.ts
 create mode 100644 src/client/room/messages/BatchInfo.ts
 create mode 100644 src/client/room/messages/MessageBatch.ts
 create mode 100644 src/client/room/messages/MessageRange.ts
 create mode 100644 src/client/room/messages/Messages.ts
 create mode 100644 src/client/room/messages/index.ts
 create mode 100644 src/client/room/relations/Relations.ts
 create mode 100644 src/client/room/relations/RelationsProcessor.ts
 create mode 100644 src/client/room/relations/index.ts
 create mode 100644 src/client/room/relations/utils.ts
 create mode 100644 src/client/storage/collections/AccountData.ts
 create mode 100644 src/client/storage/collections/InviteRoom.ts
 create mode 100644 src/client/storage/collections/JoinRoom.ts
 create mode 100644 src/client/storage/collections/KnockRoom.ts
 create mode 100644 src/client/storage/collections/LeaveRoom.ts
 create mode 100644 src/client/storage/collections/Presence.ts
 create mode 100644 src/client/storage/collections/ReadReceipt.ts
 create mode 100644 src/client/storage/collections/SessionValue.ts
 create mode 100644 src/client/storage/collections/UnreadNotifications.ts
 create mode 100644 src/client/storage/collections/index.ts
 create mode 100644 src/client/storage/index.ts
 create mode 100644 src/client/storage/utils.ts
 create mode 100644 src/client/sync.ts
 create mode 100644 src/client/syncLatestEvent.ts
 create mode 100644 src/client/syncWriter/index.ts
 create mode 100644 src/client/syncWriter/utils.ts
 create mode 100644 src/client/txn.ts

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 9d5a27d9..dca01a3d 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -31,12 +31,15 @@ module.exports = {
     'linebreak-style': 0,
     'no-underscore-dangle': 0,
     "no-shadow": "off",
+    "max-classes-per-file": "off",
+    "no-useless-constructor": "off",
+    "no-empty-function": "off",
 
     "import/prefer-default-export": "off",
     "import/extensions": "off",
     "import/no-unresolved": "off",
     "import/no-extraneous-dependencies": [
-      "error",
+      "off",
       {
         devDependencies: true,
       },
@@ -58,8 +61,10 @@ module.exports = {
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "error",
 
+    "@typescript-eslint/no-useless-constructor": "error",
+    "@typescript-eslint/no-empty-function": "error",
     "@typescript-eslint/no-unused-vars": "error",
-    "@typescript-eslint/no-shadow": "error"
+    "@typescript-eslint/no-shadow": "error",
   },
   overrides: [
     {
diff --git a/.zed/settings.json b/.zed/settings.json
new file mode 100644
index 00000000..83b47ade
--- /dev/null
+++ b/.zed/settings.json
@@ -0,0 +1,7 @@
+{
+  "format_on_save": "on",
+  "prettier": {
+    "parser": "",
+    "allowed": true
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index 158a6112..5c36b489 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,6 +13,7 @@
         "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
         "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
         "@fontsource/inter": "4.5.14",
+        "@matrix-org/matrix-sdk-crypto-wasm": "18.3.1",
         "@tanstack/react-query": "5.24.1",
         "@tanstack/react-query-devtools": "5.24.1",
         "@tanstack/react-virtual": "3.2.0",
@@ -32,12 +33,13 @@
         "emojibase-data": "15.3.2",
         "file-saver": "2.0.5",
         "focus-trap-react": "10.0.2",
-        "folds": "2.4.0",
+        "folds": "2.7.0",
         "html-dom-parser": "4.0.0",
         "html-react-parser": "4.2.0",
         "i18next": "23.12.2",
         "i18next-browser-languagedetector": "8.0.0",
         "i18next-http-backend": "2.5.2",
+        "idb": "8.0.3",
         "immer": "9.0.16",
         "is-hotkey": "0.2.0",
         "jotai": "2.6.0",
@@ -2256,9 +2258,9 @@
       }
     },
     "node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-15.3.0.tgz",
-      "integrity": "sha512-QyxHvncvkl7nf+tnn92PjQ54gMNV8hMSpiukiDgNrqF6IYwgySTlcSdkPYdw8QjZJ0NR6fnVrNzMec0OohM3wA==",
+      "version": "18.3.1",
+      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-18.3.1.tgz",
+      "integrity": "sha512-VRjWhE1UgHnPpJ3b9B5+8z71ZC/HICFngPPFIN6ktzmUBKI5RusPujzbAQUoB3CgZ0yU58L99AfSQS4YTztSWw==",
       "license": "Apache-2.0",
       "engines": {
         "node": ">= 18"
@@ -7157,9 +7159,9 @@
       }
     },
     "node_modules/folds": {
-      "version": "2.4.0",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.4.0.tgz",
-      "integrity": "sha512-Q5xCmvU3SIM8etQ9qLF6Y5Jtv01c9JpG3QcnF+Z3nlbMvtktfE13Pj7p0XgSPBcA3OuoU0zXiRwiTlMcbU7KhA==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.7.0.tgz",
+      "integrity": "sha512-YOWx0raqLignz7Jgw7G5f90fczKSVEUiNuLwgZo9MvZcHOlRvf6+77Oa/1B6Baq1Qj5mO/cNTLBNiA5yF9pMdQ==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "@vanilla-extract/css": "1.9.2",
@@ -7713,10 +7715,10 @@
       }
     },
     "node_modules/idb": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
-      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
-      "dev": true
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.3.tgz",
+      "integrity": "sha512-LtwtVyVYO5BqRvcsKuB2iUMnHwPVByPCXFXOpuU96IZPPoPN6xjOGxZQ74pgSVVLQWtUOYgyeL4GE98BY5D3wg==",
+      "license": "ISC"
     },
     "node_modules/ieee754": {
       "version": "1.2.1",
@@ -8649,6 +8651,15 @@
         "node": ">=22.0.0"
       }
     },
+    "node_modules/matrix-js-sdk/node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
+      "version": "15.3.0",
+      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-15.3.0.tgz",
+      "integrity": "sha512-QyxHvncvkl7nf+tnn92PjQ54gMNV8hMSpiukiDgNrqF6IYwgySTlcSdkPYdw8QjZJ0NR6fnVrNzMec0OohM3wA==",
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">= 18"
+      }
+    },
     "node_modules/matrix-js-sdk/node_modules/uuid": {
       "version": "11.1.0",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
@@ -11789,6 +11800,13 @@
         "workbox-core": "7.3.0"
       }
     },
+    "node_modules/workbox-background-sync/node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/workbox-broadcast-update": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/workbox-broadcast-update/-/workbox-broadcast-update-7.3.0.tgz",
@@ -11935,6 +11953,13 @@
         "workbox-core": "7.3.0"
       }
     },
+    "node_modules/workbox-expiration/node_modules/idb": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-7.1.1.tgz",
+      "integrity": "sha512-gchesWBzyvGHRO9W8tzUWFDycow5gwjvFKfyV9FF32Y7F50yZMp7mP+T2mJIWFx49zicqyC4uefHM17o6xKIVQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/workbox-google-analytics": {
       "version": "7.3.0",
       "resolved": "https://registry.npmjs.org/workbox-google-analytics/-/workbox-google-analytics-7.3.0.tgz",
diff --git a/package.json b/package.json
index 7316dcce..619ad78e 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@atlaskit/pragmatic-drag-and-drop-auto-scroll": "1.3.0",
     "@atlaskit/pragmatic-drag-and-drop-hitbox": "1.0.3",
     "@fontsource/inter": "4.5.14",
+    "@matrix-org/matrix-sdk-crypto-wasm": "18.3.1",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",
@@ -43,12 +44,13 @@
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
     "focus-trap-react": "10.0.2",
-    "folds": "2.4.0",
+    "folds": "2.7.0",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",
     "i18next-browser-languagedetector": "8.0.0",
     "i18next-http-backend": "2.5.2",
+    "idb": "8.0.3",
     "immer": "9.0.16",
     "is-hotkey": "0.2.0",
     "jotai": "2.6.0",
diff --git a/src/app/components/AuthFlowsLoader.tsx b/src/app/components/AuthFlowsLoader.tsx
index f21bad04..14ba56b2 100644
--- a/src/app/components/AuthFlowsLoader.tsx
+++ b/src/app/components/AuthFlowsLoader.tsx
@@ -1,14 +1,18 @@
 import { ReactNode, useCallback, useEffect, useMemo } from 'react';
-import { MatrixError, createClient } from 'matrix-js-sdk';
+import { getLogin, GetLoginOK } from 'neurone/lib/api/matrix/client/v3/login';
+import { postRegister } from 'neurone/lib/api/matrix/client/v3/register';
+import { MatrixErrorData, parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { useAutoDiscoveryInfo } from '../hooks/useAutoDiscoveryInfo';
-import { promiseFulfilledResult, promiseRejectedResult } from '../utils/common';
+import { promiseFulfilledResult } from '../utils/common';
 import {
   AuthFlows,
   RegisterFlowStatus,
   RegisterFlowsResponse,
   parseRegisterErrResp,
 } from '../hooks/useAuthFlows';
+import { getJSONRequest } from '../../client/request';
+import { AuthResponse } from '../utils/matrix-uia';
 
 type AuthFlowsLoaderProps = {
   fallback?: () => ReactNode;
@@ -19,24 +23,33 @@ export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderPr
   const autoDiscoveryInfo = useAutoDiscoveryInfo();
   const baseUrl = autoDiscoveryInfo['m.homeserver'].base_url;
 
-  const mx = useMemo(() => createClient({ baseUrl }), [baseUrl]);
+  const requestJSON = useMemo(() => getJSONRequest(baseUrl), [baseUrl]);
 
   const [state, load] = useAsyncCallback(
     useCallback(async () => {
-      const result = await Promise.allSettled([mx.loginFlows(), mx.registerRequest({})]);
-      const loginFlows = promiseFulfilledResult(result[0]);
-      const registerResp = promiseRejectedResult(result[1]) as MatrixError | undefined;
-      let registerFlows: RegisterFlowsResponse = { status: RegisterFlowStatus.InvalidRequest };
+      const loginEndpoint = getLogin({});
+      const registerEndpoint = postRegister({});
 
-      if (typeof registerResp === 'object' && registerResp.httpStatus) {
-        registerFlows = parseRegisterErrResp(registerResp);
+      const [loginResponse, registerResponse] = (
+        await Promise.allSettled([requestJSON(loginEndpoint), requestJSON(registerEndpoint)])
+      ).map(promiseFulfilledResult);
+
+      let registerFlows: RegisterFlowsResponse = { status: RegisterFlowStatus.InvalidRequest };
+      const [registerError] =
+        typeof registerResponse === 'object'
+          ? await parseMatrixResp<undefined, AuthResponse | MatrixErrorData>(registerResponse)
+          : [];
+
+      if (registerError) {
+        registerFlows = parseRegisterErrResp(registerError);
       }
 
-      if (!loginFlows) {
+      if (!loginResponse) {
         throw new Error('Missing auth flow!');
       }
-      if ('errcode' in loginFlows) {
-        throw new Error('Failed to load auth flow!');
+      const [loginError, loginFlows] = await parseMatrixResp<GetLoginOK>(loginResponse);
+      if (loginError) {
+        throw new Error(`Failed to load auth flow! ${printMatrixError(loginError)}`);
       }
 
       const authFlows: AuthFlows = {
@@ -45,7 +58,7 @@ export function AuthFlowsLoader({ fallback, error, children }: AuthFlowsLoaderPr
       };
 
       return authFlows;
-    }, [mx])
+    }, [requestJSON])
   );
 
   useEffect(() => {
diff --git a/src/app/components/CapabilitiesLoader.tsx b/src/app/components/CapabilitiesLoader.tsx
index 667191e9..bfdae4e5 100644
--- a/src/app/components/CapabilitiesLoader.tsx
+++ b/src/app/components/CapabilitiesLoader.tsx
@@ -1,15 +1,23 @@
 import { ReactNode, useCallback, useEffect } from 'react';
-import { Capabilities } from 'matrix-js-sdk';
+import { getCapabilities, GetCapabilitiesOK } from 'neurone/lib/api/matrix/client/v3/capabilities';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useClient } from '../hooks/useClient';
+import { Capabilities } from '../hooks/useCapabilities';
 
 type CapabilitiesLoaderProps = {
   children: (capabilities: Capabilities | undefined) => ReactNode;
 };
 export function CapabilitiesLoader({ children }: CapabilitiesLoaderProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
-  const [state, load] = useAsyncCallback(useCallback(() => mx.getCapabilities(), [mx]));
+  const [state, load] = useAsyncCallback(
+    useCallback(async () => {
+      const resp = await ct.requestAuthJSON(getCapabilities({}));
+      const [, result] = await parseMatrixResp<GetCapabilitiesOK>(resp);
+      return result?.capabilities;
+    }, [ct])
+  );
 
   useEffect(() => {
     load();
diff --git a/src/app/components/LogoutDialog.tsx b/src/app/components/LogoutDialog.tsx
index cc9bf067..9fd9cdef 100644
--- a/src/app/components/LogoutDialog.tsx
+++ b/src/app/components/LogoutDialog.tsx
@@ -1,33 +1,19 @@
 import React, { forwardRef, useCallback } from 'react';
 import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { logoutClient } from '../../client/initMatrix';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { useCrossSigningActive } from '../hooks/useCrossSigning';
-import { InfoCard } from './info-card';
-import {
-  useDeviceVerificationStatus,
-  VerificationStatus,
-} from '../hooks/useDeviceVerificationStatus';
+import { useClient } from '../hooks/useClient';
 
 type LogoutDialogProps = {
   handleClose: () => void;
 };
 export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
   ({ handleClose }, ref) => {
-    const mx = useMatrixClient();
-    const hasEncryptedRoom = !!mx.getRooms().find((room) => room.hasEncryptionStateEvent());
-    const crossSigningActive = useCrossSigningActive();
-    const verificationStatus = useDeviceVerificationStatus(
-      mx.getCrypto(),
-      mx.getSafeUserId(),
-      mx.getDeviceId() ?? undefined
-    );
+    const ct = useClient();
 
     const [logoutState, logout] = useAsyncCallback<void, Error, []>(
       useCallback(async () => {
-        await logoutClient(mx);
-      }, [mx])
+        await ct.logout();
+      }, [ct])
     );
 
     const ongoingLogout = logoutState.status === AsyncStatus.Loading;
@@ -47,7 +33,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
           </Box>
         </Header>
         <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-          {hasEncryptedRoom &&
+          {/* {hasEncryptedRoom &&
             (crossSigningActive ? (
               verificationStatus === VerificationStatus.Unverified && (
                 <InfoCard
@@ -62,7 +48,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
                 title="Alert"
                 description="Enable device verification or export your encrypted data from settings to avoid losing access to your messages."
               />
-            ))}
+            ))} */}
           <Text priority="400">You’re about to log out. Are you sure?</Text>
           {logoutState.status === AsyncStatus.Error && (
             <Text style={{ color: color.Critical.Main }} size="T300">
diff --git a/src/app/components/MediaConfigLoader.tsx b/src/app/components/MediaConfigLoader.tsx
index 9fd99330..634973dd 100644
--- a/src/app/components/MediaConfigLoader.tsx
+++ b/src/app/components/MediaConfigLoader.tsx
@@ -1,15 +1,25 @@
 import { ReactNode, useCallback, useEffect } from 'react';
+import { getConfig, GetConfigOK } from 'neurone/lib/api/matrix/client/v1/media';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
 import { MediaConfig } from '../hooks/useMediaConfig';
+import { useClient } from '../hooks/useClient';
 
 type MediaConfigLoaderProps = {
   children: (mediaConfig: MediaConfig | undefined) => ReactNode;
 };
 export function MediaConfigLoader({ children }: MediaConfigLoaderProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
-  const [state, load] = useAsyncCallback(useCallback(() => mx.getMediaConfig(), [mx]));
+  const [state, load] = useAsyncCallback(
+    useCallback(async () => {
+      const resp = await ct.requestAuthJSON(getConfig({}));
+
+      const [, config] = await parseMatrixResp<GetConfigOK>(resp);
+
+      return config;
+    }, [ct])
+  );
 
   useEffect(() => {
     load();
diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
index 4cfcb7dc..423fb1ff 100644
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -1,147 +1,101 @@
 import React from 'react';
-import { MsgType } from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
 import { config } from 'folds';
 import {
-  AudioContent,
-  DownloadFile,
-  FileContent,
-  ImageContent,
   MAudio,
-  MBadEncrypted,
   MEmote,
   MFile,
   MImage,
   MLocation,
   MNotice,
+  MSticker,
   MText,
   MVideo,
-  ReadPdfFile,
-  ReadTextFile,
-  RenderBody,
-  ThumbnailContent,
+  RedactedContent,
   UnsupportedContent,
-  VideoContent,
 } from './message';
-import { UrlPreviewCard, UrlPreviewHolder } from './url-preview';
-import { Image, MediaControl, Video } from './media';
-import { ImageViewer } from './image-viewer';
-import { PdfViewer } from './Pdf-viewer';
-import { TextViewer } from './text-viewer';
-import { testMatrixTo } from '../plugins/matrix-to';
-import { IImageContent } from '../../types/matrix/common';
+import { MsgType } from '../../types/matrix/common';
+import { rContent } from '../../client/reader';
+import { MessageEvent } from '../../types/matrix/room';
 
 type RenderMessageContentProps = {
   displayName: string;
-  msgType: string;
+  eventType: string;
   ts: number;
   edited?: boolean;
-  getContent: <T>() => T;
+  content: object;
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
   highlightRegex?: RegExp;
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: Opts;
   outlineAttachment?: boolean;
+  redacted?: boolean;
 };
 export function RenderMessageContent({
   displayName,
-  msgType,
+  eventType,
   ts,
   edited,
-  getContent,
+  content,
   mediaAutoLoad,
   urlPreview,
   highlightRegex,
   htmlReactParserOptions,
   linkifyOpts,
   outlineAttachment,
+  redacted,
 }: RenderMessageContentProps) {
-  const renderUrlsPreview = (urls: string[]) => {
-    const filteredUrls = urls.filter((url) => !testMatrixTo(url));
-    if (filteredUrls.length === 0) return undefined;
+  if (redacted) return <RedactedContent />;
+
+  if (eventType === MessageEvent.Sticker) {
     return (
-      <UrlPreviewHolder>
-        {filteredUrls.map((url) => (
-          <UrlPreviewCard key={url} url={url} ts={ts} />
-        ))}
-      </UrlPreviewHolder>
+      <MSticker
+        content={content}
+        mediaAutoLoad={mediaAutoLoad}
+        outlineAttachment={outlineAttachment}
+      />
     );
-  };
+  }
+
+  if (eventType !== MessageEvent.RoomMessage) {
+    return <UnsupportedContent />;
+  }
+
   const renderCaption = () => {
-    const content: IImageContent = getContent();
-    if (content.filename && content.filename !== content.body) {
+    const filename = rContent.filename(content);
+    const body = rContent.body(content);
+
+    if (filename && filename !== body && body) {
       return (
         <MText
-          style={{ marginTop: config.space.S200 }}
+          style={{ marginTop: config.space.S100 }}
           edited={edited}
           content={content}
-          renderBody={(props) => (
-            <RenderBody
-              {...props}
-              highlightRegex={highlightRegex}
-              htmlReactParserOptions={htmlReactParserOptions}
-              linkifyOpts={linkifyOpts}
-            />
-          )}
-          renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+          urlPreview={urlPreview}
+          ts={ts}
+          highlightRegex={highlightRegex}
+          htmlReactParserOptions={htmlReactParserOptions}
+          linkifyOpts={linkifyOpts}
         />
       );
     }
     return null;
   };
 
-  const renderFile = () => (
-    <>
-      <MFile
-        content={getContent()}
-        renderFileContent={({ body, mimeType, info, encInfo, url }) => (
-          <FileContent
-            body={body}
-            mimeType={mimeType}
-            renderAsPdfFile={() => (
-              <ReadPdfFile
-                body={body}
-                mimeType={mimeType}
-                url={url}
-                encInfo={encInfo}
-                renderViewer={(p) => <PdfViewer {...p} />}
-              />
-            )}
-            renderAsTextFile={() => (
-              <ReadTextFile
-                body={body}
-                mimeType={mimeType}
-                url={url}
-                encInfo={encInfo}
-                renderViewer={(p) => <TextViewer {...p} />}
-              />
-            )}
-          >
-            <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
-          </FileContent>
-        )}
-        outlined={outlineAttachment}
-      />
-      {renderCaption()}
-    </>
-  );
+  const msgType = rContent.msgtype(content);
 
   if (msgType === MsgType.Text) {
     return (
       <MText
         edited={edited}
-        content={getContent()}
-        renderBody={(props) => (
-          <RenderBody
-            {...props}
-            highlightRegex={highlightRegex}
-            htmlReactParserOptions={htmlReactParserOptions}
-            linkifyOpts={linkifyOpts}
-          />
-        )}
-        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+        content={content}
+        urlPreview={urlPreview}
+        ts={ts}
+        highlightRegex={highlightRegex}
+        htmlReactParserOptions={htmlReactParserOptions}
+        linkifyOpts={linkifyOpts}
       />
     );
   }
@@ -151,16 +105,12 @@ export function RenderMessageContent({
       <MEmote
         displayName={displayName}
         edited={edited}
-        content={getContent()}
-        renderBody={(props) => (
-          <RenderBody
-            {...props}
-            highlightRegex={highlightRegex}
-            htmlReactParserOptions={htmlReactParserOptions}
-            linkifyOpts={linkifyOpts}
-          />
-        )}
-        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+        content={content}
+        urlPreview={urlPreview}
+        ts={ts}
+        highlightRegex={highlightRegex}
+        htmlReactParserOptions={htmlReactParserOptions}
+        linkifyOpts={linkifyOpts}
       />
     );
   }
@@ -169,16 +119,12 @@ export function RenderMessageContent({
     return (
       <MNotice
         edited={edited}
-        content={getContent()}
-        renderBody={(props) => (
-          <RenderBody
-            {...props}
-            highlightRegex={highlightRegex}
-            htmlReactParserOptions={htmlReactParserOptions}
-            linkifyOpts={linkifyOpts}
-          />
-        )}
-        renderUrlsPreview={urlPreview ? renderUrlsPreview : undefined}
+        content={content}
+        urlPreview={urlPreview}
+        ts={ts}
+        highlightRegex={highlightRegex}
+        htmlReactParserOptions={htmlReactParserOptions}
+        linkifyOpts={linkifyOpts}
       />
     );
   }
@@ -186,18 +132,7 @@ export function RenderMessageContent({
   if (msgType === MsgType.Image) {
     return (
       <>
-        <MImage
-          content={getContent()}
-          renderImageContent={(props) => (
-            <ImageContent
-              {...props}
-              autoPlay={mediaAutoLoad}
-              renderImage={(p) => <Image {...p} loading="lazy" />}
-              renderViewer={(p) => <ImageViewer {...p} />}
-            />
-          )}
-          outlined={outlineAttachment}
-        />
+        <MImage content={content} mediaAutoLoad={mediaAutoLoad} outlined={outlineAttachment} />
         {renderCaption()}
       </>
     );
@@ -206,31 +141,7 @@ export function RenderMessageContent({
   if (msgType === MsgType.Video) {
     return (
       <>
-        <MVideo
-          content={getContent()}
-          renderAsFile={renderFile}
-          renderVideoContent={({ body, info, ...props }) => (
-            <VideoContent
-              body={body}
-              info={info}
-              {...props}
-              renderThumbnail={
-                mediaAutoLoad
-                  ? () => (
-                      <ThumbnailContent
-                        info={info}
-                        renderImage={(src) => (
-                          <Image alt={body} title={body} src={src} loading="lazy" />
-                        )}
-                      />
-                    )
-                  : undefined
-              }
-              renderVideo={(p) => <Video {...p} />}
-            />
-          )}
-          outlined={outlineAttachment}
-        />
+        <MVideo content={content} mediaAutoLoad={mediaAutoLoad} outlined={outlineAttachment} />
         {renderCaption()}
       </>
     );
@@ -239,30 +150,34 @@ export function RenderMessageContent({
   if (msgType === MsgType.Audio) {
     return (
       <>
-        <MAudio
-          content={getContent()}
-          renderAsFile={renderFile}
-          renderAudioContent={(props) => (
-            <AudioContent {...props} renderMediaControl={(p) => <MediaControl {...p} />} />
-          )}
-          outlined={outlineAttachment}
-        />
+        <MAudio content={content} outlined={outlineAttachment} />
         {renderCaption()}
       </>
     );
   }
 
   if (msgType === MsgType.File) {
-    return renderFile();
+    return (
+      <>
+        <MFile content={content} outlined={outlineAttachment} />
+        {renderCaption()}
+      </>
+    );
   }
 
   if (msgType === MsgType.Location) {
-    return <MLocation content={getContent()} />;
+    return <MLocation content={content} />;
   }
 
-  if (msgType === 'm.bad.encrypted') {
-    return <MBadEncrypted />;
-  }
-
-  return <UnsupportedContent />;
+  return (
+    <MText
+      edited={edited}
+      content={content}
+      urlPreview={urlPreview}
+      ts={ts}
+      highlightRegex={highlightRegex}
+      htmlReactParserOptions={htmlReactParserOptions}
+      linkifyOpts={linkifyOpts}
+    />
+  );
 }
diff --git a/src/app/components/RoomSummaryLoader.tsx b/src/app/components/RoomSummaryLoader.tsx
index efdce930..88b10446 100644
--- a/src/app/components/RoomSummaryLoader.tsx
+++ b/src/app/components/RoomSummaryLoader.tsx
@@ -1,22 +1,36 @@
 import { ReactNode, useCallback, useState } from 'react';
-import { MatrixClient, Room } from 'matrix-js-sdk';
 import { useQuery } from '@tanstack/react-query';
-import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { LocalRoomSummary, useLocalRoomSummary } from '../hooks/useLocalRoomSummary';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { getRoomSummary, GetRoomSummaryOK } from 'neurone/lib/api/matrix/client/v1/roomSummary';
+import { getHierarchy, GetHierarchyOK } from 'neurone/lib/api/matrix/client/v1/rooms';
+import { SpaceHierarchyRoomChunk } from 'neurone/lib/api/types';
 import { AsyncState, AsyncStatus } from '../hooks/useAsyncCallback';
-
-export type IRoomSummary = Awaited<ReturnType<MatrixClient['getRoomSummary']>>;
+import { useClient } from '../hooks/useClient';
+import { useSpecVersionSupport } from '../hooks/useSpecVersions';
 
 type RoomSummaryLoaderProps = {
   roomIdOrAlias: string;
-  children: (roomSummary?: IRoomSummary) => ReactNode;
+  children: (roomSummary?: GetRoomSummaryOK) => ReactNode;
 };
 
 export function RoomSummaryLoader({ roomIdOrAlias, children }: RoomSummaryLoaderProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const roomSummarySupported = useSpecVersionSupport('v1.15');
 
-  const fetchSummary = useCallback(() => mx.getRoomSummary(roomIdOrAlias), [mx, roomIdOrAlias]);
+  const fetchSummary = useCallback(async (): Promise<GetRoomSummaryOK> => {
+    const endpoint = getRoomSummary({ pathParams: { roomIdOrAlias } });
+    if (!roomSummarySupported) {
+      endpoint.path = `/_matrix/client/unstable/im.nheko.summary/summary/${encodeURIComponent(
+        roomIdOrAlias
+      )}`;
+    }
+    const response = await ct.requestAuthJSON(endpoint);
+    const [err, result] = await parseMatrixResp<GetRoomSummaryOK>(response);
+    if (err) {
+      throw new Error(printMatrixError(err));
+    }
+    return result;
+  }, [ct, roomIdOrAlias, roomSummarySupported]);
 
   const { data } = useQuery({
     queryKey: [roomIdOrAlias, `summary`],
@@ -26,28 +40,35 @@ export function RoomSummaryLoader({ roomIdOrAlias, children }: RoomSummaryLoader
   return children(data);
 }
 
-export function LocalRoomSummaryLoader({
-  room,
-  children,
-}: {
-  room: Room;
-  children: (roomSummary: LocalRoomSummary) => ReactNode;
-}) {
-  const summary = useLocalRoomSummary(room);
-
-  return children(summary);
+export function LocalRoomSummaryLoader({ children }: { children: () => ReactNode }) {
+  return children();
 }
-
 export function HierarchyRoomSummaryLoader({
   roomId,
   children,
 }: {
   roomId: string;
-  children: (state: AsyncState<IHierarchyRoom, Error>) => ReactNode;
+  children: (state: AsyncState<SpaceHierarchyRoomChunk, Error>) => ReactNode;
 }) {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
-  const fetchSummary = useCallback(() => mx.getRoomHierarchy(roomId, 1, 1), [mx, roomId]);
+  const fetchSummary = useCallback(async (): Promise<GetHierarchyOK> => {
+    const response = await ct.requestAuthJSON(
+      getHierarchy({
+        pathParams: { roomId },
+        searchParams: {
+          limit: 1,
+          max_depth: 1,
+        },
+      })
+    );
+
+    const [err, result] = await parseMatrixResp<GetHierarchyOK>(response);
+    if (err) {
+      throw new Error(printMatrixError(err));
+    }
+    return result;
+  }, [ct, roomId]);
   const [errorMemo, setError] = useState<Error>();
 
   const { data, error } = useQuery({
@@ -62,7 +83,7 @@ export function HierarchyRoomSummaryLoader({
     },
   });
 
-  let state: AsyncState<IHierarchyRoom, Error> = {
+  let state: AsyncState<SpaceHierarchyRoomChunk, Error> = {
     status: AsyncStatus.Loading,
   };
   if (error) {
@@ -78,7 +99,7 @@ export function HierarchyRoomSummaryLoader({
     };
   }
 
-  const summary = data?.rooms[0] ?? undefined;
+  const summary = data?.rooms[0];
   if (summary) {
     state = {
       status: AsyncStatus.Success,
diff --git a/src/app/components/RoomUnreadProvider.tsx b/src/app/components/RoomUnreadProvider.tsx
deleted file mode 100644
index 43dfd48b..00000000
--- a/src/app/components/RoomUnreadProvider.tsx
+++ /dev/null
@@ -1,24 +0,0 @@
-import { ReactElement } from 'react';
-import { Unread } from '../../types/matrix/room';
-import { useRoomUnread, useRoomsUnread } from '../state/hooks/unread';
-import { roomToUnreadAtom } from '../state/room/roomToUnread';
-
-type RoomUnreadProviderProps = {
-  roomId: string;
-  children: (unread?: Unread) => ReactElement;
-};
-export function RoomUnreadProvider({ roomId, children }: RoomUnreadProviderProps) {
-  const unread = useRoomUnread(roomId, roomToUnreadAtom);
-
-  return children(unread);
-}
-
-type RoomsUnreadProviderProps = {
-  rooms: string[];
-  children: (unread?: Unread) => ReactElement;
-};
-export function RoomsUnreadProvider({ rooms, children }: RoomsUnreadProviderProps) {
-  const unread = useRoomsUnread(rooms, roomToUnreadAtom);
-
-  return children(unread);
-}
diff --git a/src/app/components/ServerConfigsLoader.tsx b/src/app/components/ServerConfigsLoader.tsx
index 3c8ce8eb..7fc0971b 100644
--- a/src/app/components/ServerConfigsLoader.tsx
+++ b/src/app/components/ServerConfigsLoader.tsx
@@ -1,48 +1,48 @@
 import { ReactNode, useCallback, useMemo } from 'react';
-import { Capabilities, validateAuthMetadata, ValidatedAuthMetadata } from 'matrix-js-sdk';
+import { getCapabilities, GetCapabilitiesOK } from 'neurone/lib/api/matrix/client/v3/capabilities';
+import { getConfig, GetConfigOK } from 'neurone/lib/api/matrix/client/v1/media';
+import { getAuthMetadata, GetAuthMetadataOK } from 'neurone/lib/api/matrix/client/v1/authMetadata';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { AsyncStatus, useAsyncCallbackValue } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { MediaConfig } from '../hooks/useMediaConfig';
 import { promiseFulfilledResult } from '../utils/common';
+import { useClient } from '../hooks/useClient';
+import { MediaConfig } from '../hooks/useMediaConfig';
+import { Capabilities } from '../hooks/useCapabilities';
+import { getJSONRequest } from '../../client/request';
 
 export type ServerConfigs = {
   capabilities?: Capabilities;
   mediaConfig?: MediaConfig;
-  authMetadata?: ValidatedAuthMetadata;
+  authMetadata?: GetAuthMetadataOK;
 };
 
 type ServerConfigsLoaderProps = {
   children: (configs: ServerConfigs) => ReactNode;
 };
 export function ServerConfigsLoader({ children }: ServerConfigsLoaderProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const fallbackConfigs = useMemo(() => ({}), []);
 
   const [configsState] = useAsyncCallbackValue<ServerConfigs, unknown>(
     useCallback(async () => {
       const result = await Promise.allSettled([
-        mx.getCapabilities(),
-        mx.getMediaConfig(),
-        mx.getAuthMetadata(),
+        ct.requestAuthJSON(getCapabilities({})).then(parseMatrixResp<GetCapabilitiesOK>),
+        ct.requestAuthJSON(getConfig({})).then(parseMatrixResp<GetConfigOK>),
+        getJSONRequest(ct.session.baseUrl)(getAuthMetadata({})).then(
+          parseMatrixResp<GetAuthMetadataOK>
+        ),
       ]);
 
-      const capabilities = promiseFulfilledResult(result[0]);
-      const mediaConfig = promiseFulfilledResult(result[1]);
-      const authMetadata = promiseFulfilledResult(result[2]);
-      let validatedAuthMetadata: ValidatedAuthMetadata | undefined;
-
-      try {
-        validatedAuthMetadata = validateAuthMetadata(authMetadata);
-      } catch (e) {
-        console.error(e);
-      }
+      const [, capResult] = promiseFulfilledResult(result[0]) ?? [];
+      const [, mediaConfig] = promiseFulfilledResult(result[1]) ?? [];
+      const [, authMetadata] = promiseFulfilledResult(result[2]) ?? [];
 
       return {
-        capabilities,
+        capabilities: capResult?.capabilities,
         mediaConfig,
-        authMetadata: validatedAuthMetadata,
+        authMetadata,
       };
-    }, [mx])
+    }, [ct])
   );
 
   const configs: ServerConfigs =
diff --git a/src/app/components/SpecVersionsLoader.tsx b/src/app/components/SpecVersionsLoader.tsx
index 5ee47bdf..5b459c1d 100644
--- a/src/app/components/SpecVersionsLoader.tsx
+++ b/src/app/components/SpecVersionsLoader.tsx
@@ -2,6 +2,29 @@ import { ReactNode, useCallback, useEffect, useState } from 'react';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { SpecVersions, specVersions } from '../cs-api';
 
+const getSpecVersionKey = (baseUrl: string) => `specVersions:${baseUrl}`;
+const setSpecVersions = (baseUrl: string, data: SpecVersions) => {
+  localStorage.setItem(getSpecVersionKey(baseUrl), JSON.stringify(data));
+};
+
+const getSpecVersions = (baseUrl: string): SpecVersions | undefined => {
+  try {
+    const dataStr = localStorage.getItem(getSpecVersionKey(baseUrl));
+    if (dataStr === null) return undefined;
+    const data = JSON.parse(dataStr);
+    if (typeof data === 'object' && 'versions' in data && Array.isArray(data.versions)) {
+      return data;
+    }
+    return undefined;
+  } catch {
+    return undefined;
+  }
+};
+
+const FALLBACK_DATA: SpecVersions = {
+  versions: [],
+};
+
 type SpecVersionsLoaderProps = {
   baseUrl: string;
   fallback?: () => ReactNode;
@@ -15,8 +38,15 @@ export function SpecVersionsLoader({
   children,
 }: SpecVersionsLoaderProps) {
   const [state, load] = useAsyncCallback(
-    useCallback(() => specVersions(fetch, baseUrl), [baseUrl])
+    useCallback(async () => {
+      const data = await specVersions(fetch, baseUrl);
+      setSpecVersions(baseUrl, data);
+      return data;
+    }, [baseUrl])
   );
+
+  const data = state.status === AsyncStatus.Success ? state.data : getSpecVersions(baseUrl);
+
   const [ignoreError, setIgnoreError] = useState(false);
 
   const ignoreCallback = useCallback(() => setIgnoreError(true), []);
@@ -25,19 +55,13 @@ export function SpecVersionsLoader({
     load();
   }, [load]);
 
-  if (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading) {
+  if (!data && (state.status === AsyncStatus.Idle || state.status === AsyncStatus.Loading)) {
     return fallback?.();
   }
 
-  if (!ignoreError && state.status === AsyncStatus.Error) {
+  if (!data && !ignoreError && state.status === AsyncStatus.Error) {
     return error?.(state.error, load, ignoreCallback);
   }
 
-  return children(
-    state.status === AsyncStatus.Success
-      ? state.data
-      : {
-          versions: [],
-        }
-  );
+  return children(state.status === AsyncStatus.Success ? state.data : data ?? FALLBACK_DATA);
 }
diff --git a/src/app/components/SupportedUIAFlowsLoader.tsx b/src/app/components/SupportedUIAFlowsLoader.tsx
index 442eb572..e3b2096a 100644
--- a/src/app/components/SupportedUIAFlowsLoader.tsx
+++ b/src/app/components/SupportedUIAFlowsLoader.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { UIAFlow } from 'matrix-js-sdk';
 import { useSupportedUIAFlows } from '../hooks/useUIAFlows';
+import { UIAFlow } from '../utils/matrix-uia';
 
 export function SupportedUIAFlowsLoader({
   flows,
diff --git a/src/app/components/create-room/AdditionalCreatorInput.tsx b/src/app/components/create-room/AdditionalCreatorInput.tsx
index 84b92231..80b655d4 100644
--- a/src/app/components/create-room/AdditionalCreatorInput.tsx
+++ b/src/app/components/create-room/AdditionalCreatorInput.tsx
@@ -27,19 +27,19 @@ import React, {
 import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
 import { useDirectUsers } from '../../hooks/useDirectUsers';
 import { SettingTile } from '../setting-tile';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { stopPropagation } from '../../utils/keyboard';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
 import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
+import { useClient } from '../../hooks/useClient';
 
 export const useAdditionalCreators = (defaultCreators?: string[]) => {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [additionalCreators, setAdditionalCreators] = useState<string[]>(
-    () => defaultCreators?.filter((id) => id !== mx.getSafeUserId()) ?? []
+    () => defaultCreators?.filter((id) => id !== ct.session.userId) ?? []
   );
 
   const addAdditionalCreator = (userId: string) => {
-    if (userId === mx.getSafeUserId()) return;
+    if (userId === ct.session.userId) return;
 
     setAdditionalCreators((creators) => {
       const creatorsSet = new Set(creators);
@@ -83,7 +83,7 @@ export function AdditionalCreatorInput({
   onRemove,
   disabled,
 }: AdditionalCreatorInputProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [menuCords, setMenuCords] = useState<RectCords>();
   const directUsers = useDirectUsers();
 
@@ -156,7 +156,7 @@ export function AdditionalCreatorInput({
       <Box shrink="No" direction="Column" gap="100">
         <Box gap="200" wrap="Wrap">
           <Chip type="button" variant="Primary" radii="Pill" outlined>
-            <Text size="B300">{mx.getSafeUserId()}</Text>
+            <Text size="B300">{ct.session.userId}</Text>
           </Chip>
           {additionalCreators.map((creator) => (
             <Chip
diff --git a/src/app/components/create-room/CreateRoomAliasInput.tsx b/src/app/components/create-room/CreateRoomAliasInput.tsx
index e84658c0..bc53cf62 100644
--- a/src/app/components/create-room/CreateRoomAliasInput.tsx
+++ b/src/app/components/create-room/CreateRoomAliasInput.tsx
@@ -6,17 +6,18 @@ import React, {
   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 { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { getRoom, GetRoomOK } from 'neurone/lib/api/matrix/client/v3/directory';
 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';
+import { useClient } from '../../hooks/useClient';
 
 export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const aliasInputRef = useRef<HTMLInputElement>(null);
   const [aliasAvail, setAliasAvail] = useState<AsyncState<boolean, Error>>({
     status: AsyncStatus.Idle,
@@ -31,18 +32,20 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
   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;
+        const roomAlias = `#${aliasLocalPart}:${getMxIdServer(ct.session.userId)}`;
+        const response = await ct.requestAuthJSON(
+          getRoom({
+            pathParams: { roomAlias },
+          })
+        );
+        const [err, result] = await parseMatrixResp<GetRoomOK>(response);
+        if (err) {
+          if (err.status === 404) return true;
+          throw new Error(printMatrixError(err));
         }
+        return typeof result.room_id !== 'string';
       },
-      [mx]
+      [ct]
     ),
     setAliasAvail
   );
@@ -94,7 +97,7 @@ export function CreateRoomAliasInput({ disabled }: { disabled?: boolean }) {
         }
         after={
           <Text style={{ maxWidth: toRem(150) }} truncate>
-            :{getMxIdServer(mx.getSafeUserId())}
+            :{getMxIdServer(ct.session.userId)}
           </Text>
         }
         onKeyDown={handleAliasKeyDown}
diff --git a/src/app/components/create-room/utils.ts b/src/app/components/create-room/utils.ts
index a0ca7488..b0de4d21 100644
--- a/src/app/components/create-room/utils.ts
+++ b/src/app/components/create-room/utils.ts
@@ -1,18 +1,19 @@
 import {
-  ICreateRoomOpts,
-  ICreateRoomStateEvent,
-  JoinRule,
-  MatrixClient,
-  RestrictedAllowType,
-  Room,
-} from 'matrix-js-sdk';
-import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
+  CreateRoomStateEvent,
+  postCreateRoom,
+  PostCreateRoomBody,
+  PostCreateRoomOK,
+} from 'neurone/lib/api/matrix/client/v3/createRoom';
+import { MatrixResponseResult, parseMatrixResp } from 'neurone/lib/matrix-request';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { CreateRoomKind } from './CreateRoomKindSelector';
-import { RoomType, StateEvent } from '../../../types/matrix/room';
-import { getViaServers } from '../../plugins/via-servers';
+import { JoinRulesContent, RoomType, StateEvent, StateEventType } from '../../../types/matrix/room';
 import { getMxIdServer } from '../../utils/matrix';
+import { ClientContext } from '../../../client/context';
+import { getViaServers } from '../../plugins/via-servers';
+import { getJoinRoomStateId } from '../../../client/storage/collections';
 
-export const createRoomCreationContent = (
+const createRoomCreationContent = (
   type: RoomType | undefined,
   allowFederation: boolean,
   additionalCreators: string[] | undefined
@@ -31,28 +32,28 @@ export const createRoomCreationContent = (
   return content;
 };
 
-export const createRoomJoinRulesState = (
+const createRoomJoinRulesState = (
   kind: CreateRoomKind,
-  parent: Room | undefined,
+  parentId: string | undefined,
   knock: boolean
 ) => {
-  let content: RoomJoinRulesEventContent = {
-    join_rule: knock ? JoinRule.Knock : JoinRule.Invite,
+  let content: JoinRulesContent = {
+    join_rule: knock ? 'knock' : 'invite',
   };
 
   if (kind === CreateRoomKind.Public) {
     content = {
-      join_rule: JoinRule.Public,
+      join_rule: 'public',
     };
   }
 
-  if (kind === CreateRoomKind.Restricted && parent) {
+  if (kind === CreateRoomKind.Restricted && parentId) {
     content = {
-      join_rule: knock ? ('knock_restricted' as JoinRule) : JoinRule.Restricted,
+      join_rule: knock ? 'knock_restricted' : 'restricted',
       allow: [
         {
-          type: RestrictedAllowType.RoomMembership,
-          room_id: parent.roomId,
+          type: [StateEventType.RoomMember],
+          room_id: parentId,
         },
       ],
     };
@@ -65,12 +66,12 @@ export const createRoomJoinRulesState = (
   };
 };
 
-export const createRoomParentState = (parent: Room) => ({
+const createRoomParentState = (parentId: string, via: string[]) => ({
   type: StateEvent.SpaceParent,
-  state_key: parent.roomId,
+  state_key: parentId,
   content: {
     canonical: true,
-    via: getViaServers(parent),
+    via,
   },
 });
 
@@ -85,7 +86,7 @@ export const createRoomEncryptionState = () => ({
 export type CreateRoomData = {
   version: string;
   type?: RoomType;
-  parent?: Room;
+  parentId?: string;
   kind: CreateRoomKind;
   name: string;
   topic?: string;
@@ -95,20 +96,29 @@ export type CreateRoomData = {
   allowFederation: boolean;
   additionalCreators?: string[];
 };
-export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promise<string> => {
-  const initialState: ICreateRoomStateEvent[] = [];
+export const createRoom = async (
+  ct: ClientContext,
+  data: CreateRoomData
+): Promise<MatrixResponseResult<string>> => {
+  const initialState: CreateRoomStateEvent[] = [];
 
   if (data.encryption) {
     initialState.push(createRoomEncryptionState());
   }
 
-  if (data.parent) {
-    initialState.push(createRoomParentState(data.parent));
+  if (data.parentId) {
+    const creators = ct.roomToCreators.read.get(data.parentId);
+    const powerLevelsObj = await ct.storage.joinRoomState.read.get(
+      getJoinRoomStateId(data.parentId, StateEventType.RoomPowerLevels, '')
+    );
+    const powerLevelsContent = powerLevelsObj?.event.content;
+    const via = getViaServers(creators, powerLevelsContent);
+    initialState.push(createRoomParentState(data.parentId, via));
   }
 
-  initialState.push(createRoomJoinRulesState(data.kind, data.parent, data.knock));
+  initialState.push(createRoomJoinRulesState(data.kind, data.parentId, data.knock));
 
-  const options: ICreateRoomOpts = {
+  const body: PostCreateRoomBody = {
     room_version: data.version,
     name: data.name,
     topic: data.topic,
@@ -121,20 +131,31 @@ export const createRoom = async (mx: MatrixClient, data: CreateRoomData): Promis
     initial_state: initialState,
   };
 
-  const result = await mx.createRoom(options);
+  const response = await ct.requestAuthJSON(postCreateRoom({ body }));
 
-  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
-    );
+  const [err, result] = await parseMatrixResp<PostCreateRoomOK>(response);
+
+  if (err) {
+    return [err, undefined];
   }
 
-  return result.room_id;
+  if (data.parentId) {
+    const resp = await ct.requestAuthJSON(
+      putStateEvent({
+        pathParams: {
+          roomId: data.parentId,
+          eventType: StateEventType.SpaceChild,
+          stateKey: result.room_id,
+        },
+        body: {
+          auto_join: false,
+          suggested: false,
+          via: [getMxIdServer(ct.session.userId) ?? ''],
+        },
+      })
+    );
+    await parseMatrixResp(resp);
+  }
+
+  return [undefined, result.room_id];
 };
diff --git a/src/app/components/editor/Elements.tsx b/src/app/components/editor/Elements.tsx
index 675c4542..52371d5b 100644
--- a/src/app/components/editor/Elements.tsx
+++ b/src/app/components/editor/Elements.tsx
@@ -10,11 +10,11 @@ import {
 
 import * as css from '../../styles/CustomHtml.css';
 import { CommandElement, EmoticonElement, LinkElement, MentionElement } from './slate';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { getBeginCommand } from './utils';
 import { BlockType } from './types';
-import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useClient } from '../../hooks/useClient';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 // Put this at the start and end of an inline component to work around this Chromium bug:
 // https://bugs.chromium.org/p/chromium/issues/detail?id=1249405
@@ -77,7 +77,7 @@ function RenderEmoticonElement({
   element,
   children,
 }: { element: EmoticonElement } & RenderElementProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const selected = useSelected();
   const focused = useFocused();
@@ -93,7 +93,7 @@ function RenderEmoticonElement({
         {element.key.startsWith('mxc://') ? (
           <img
             className={css.EmoticonImg}
-            src={mxcUrlToHttp(mx, element.key, useAuthentication) ?? element.key}
+            src={mxcToHttp(ct.session.baseUrl, element.key, useAuthentication).url() ?? element.key}
             alt={element.shortcode}
           />
         ) : (
diff --git a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
index cc0dff19..9f687ef8 100644
--- a/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/EmoticonAutocomplete.tsx
@@ -1,11 +1,8 @@
 import React, { KeyboardEvent as ReactKeyboardEvent, useEffect, useMemo } from 'react';
 import { Editor } from 'slate';
 import { Box, MenuItem, Text, toRem } from 'folds';
-import { Room } from 'matrix-js-sdk';
-
 import { AutocompleteQuery } from './autocompleteQuery';
 import { AutocompleteMenu } from './AutocompleteMenu';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
 import { onTabPress } from '../../../utils/keyboard';
 import { createEmoticonElement, moveCursor, replaceWithElement } from '../utils';
@@ -13,17 +10,18 @@ import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
 import { useRelevantImagePacks } from '../../../hooks/useImagePacks';
 import { IEmoji, emojis } from '../../../plugins/emoji';
 import { useKeyDown } from '../../../hooks/useKeyDown';
-import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ImageUsage, PackImageReader } from '../../../plugins/custom-emoji';
 import { getEmoticonSearchStr } from '../../../plugins/utils';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { useClient } from '../../../hooks/useClient';
 
 type EmoticonCompleteHandler = (key: string, shortcode: string) => void;
 
 type EmoticonSearchItem = PackImageReader | IEmoji;
 
 type EmoticonAutocompleteProps = {
-  imagePackRooms: Room[];
+  imagePackRooms: string[];
   editor: Editor;
   query: AutocompleteQuery<string>;
   requestClose: () => void;
@@ -41,11 +39,11 @@ export function EmoticonAutocomplete({
   query,
   requestClose,
 }: EmoticonAutocompleteProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
-  const imagePacks = useRelevantImagePacks(ImageUsage.Emoticon, imagePackRooms);
-  const recentEmoji = useRecentEmoji(mx, 20);
+  const [imagePacks] = useRelevantImagePacks(ImageUsage.Emoticon, imagePackRooms);
+  const recentEmojiResult = useRecentEmoji(20);
 
   const searchList = useMemo(() => {
     const list: Array<EmoticonSearchItem> = [];
@@ -60,7 +58,9 @@ export function EmoticonAutocomplete({
     getEmoticonSearchStr,
     SEARCH_OPTIONS
   );
-  const autoCompleteEmoticon = result ? result.items.slice(0, 20) : recentEmoji;
+  const autoCompleteEmoticon: EmoticonSearchItem[] = result
+    ? result.items.slice(0, 20)
+    : recentEmojiResult.value ?? [];
 
   useEffect(() => {
     if (query.text) search(query.text);
@@ -102,7 +102,7 @@ export function EmoticonAutocomplete({
                 <Box
                   shrink="No"
                   as="img"
-                  src={mxcUrlToHttp(mx, key, useAuthentication) || key}
+                  src={mxcToHttp(ct.session.baseUrl, key, useAuthentication).url() || key}
                   alt={emoticon.shortcode}
                   style={{ width: toRem(24), height: toRem(24), objectFit: 'contain' }}
                 />
diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
index b0c64f60..70abcaa9 100644
--- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
@@ -1,30 +1,34 @@
-import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect } from 'react';
+import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo } from 'react';
 import { Editor } from 'slate';
 import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
-import { JoinRule, MatrixClient } from 'matrix-js-sdk';
 import { useAtomValue } from 'jotai';
 
 import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
-import { getDirectRoomAvatarUrl } from '../../../utils/room';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AutocompleteQuery } from './autocompleteQuery';
 import { AutocompleteMenu } from './AutocompleteMenu';
-import { getMxIdServer, isRoomAlias } from '../../../utils/matrix';
+import { getMxIdServer, isRoomAlias, isRoomId } from '../../../utils/matrix';
 import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
 import { onTabPress } from '../../../utils/keyboard';
 import { useKeyDown } from '../../../hooks/useKeyDown';
 import { mDirectAtom } from '../../../state/mDirectList';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
-import { factoryRoomIdByActivity } from '../../../utils/sort';
+import { factoryRoomIdByAtoZ } from '../../../utils/sort';
 import { RoomAvatar, RoomIcon } from '../../room-avatar';
 import { getViaServers } from '../../../plugins/via-servers';
+import { useClient } from '../../../hooks/useClient';
+import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
+import { useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { nameInitials } from '../../../utils/common';
 
 type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
 
-const roomAliasFromQueryText = (mx: MatrixClient, text: string) =>
+const roomAliasFromQueryText = (myUserId: string, text: string) =>
   isRoomAlias(`#${text}`)
     ? `#${text}`
-    : `#${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
+    : `#${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(myUserId)}`;
 
 function UnknownRoomMentionItem({
   query,
@@ -33,8 +37,8 @@ function UnknownRoomMentionItem({
   query: AutocompleteQuery<string>;
   handleAutocomplete: MentionAutoCompleteHandler;
 }) {
-  const mx = useMatrixClient();
-  const roomAlias: string = roomAliasFromQueryText(mx, query.text);
+  const ct = useClient();
+  const roomAlias: string = roomAliasFromQueryText(ct.session.userId, query.text);
 
   const handleSelect = () => handleAutocomplete(roomAlias, roomAlias);
 
@@ -76,22 +80,30 @@ export function RoomMentionAutocomplete({
   query,
   requestClose,
 }: RoomMentionAutocompleteProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const useAuthentication = useMediaAuthentication();
   const mDirects = useAtomValue(mDirectAtom);
+  const rooms = useAtomValue(allRoomsAtom);
 
-  const allRooms = useAtomValue(allRoomsAtom).sort(factoryRoomIdByActivity(mx));
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(rooms);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
 
+  const allRooms = useMemo(
+    () => Array.from(rooms).sort(factoryRoomIdByAtoZ(getRoomName)),
+    [rooms, getRoomName]
+  );
   const [result, search, resetSearch] = useAsyncSearch(
     allRooms,
     useCallback(
       (rId) => {
-        const r = mx.getRoom(rId);
-        if (!r) return 'Unknown Room';
-        const alias = r.getCanonicalAlias();
-        if (alias) return [r.name, alias];
-        return r.name;
+        const name = getRoomName(rId);
+        if (!name) return 'Unknown Room';
+        const alias = ct.roomToAlias.read.get(rId);
+        if (alias) return [name, alias];
+        return name;
       },
-      [mx]
+      [ct, getRoomName]
     ),
     SEARCH_OPTIONS
   );
@@ -104,12 +116,14 @@ export function RoomMentionAutocomplete({
   }, [query.text, search, resetSearch]);
 
   const handleAutocomplete: MentionAutoCompleteHandler = (roomAliasOrId, name) => {
-    const mentionRoom = mx.getRoom(roomAliasOrId);
-    const viaServers = mentionRoom ? getViaServers(mentionRoom) : undefined;
+    const creators = isRoomId(roomAliasOrId)
+      ? ct.roomToCreators.read.get(roomAliasOrId)
+      : undefined;
+    const viaServers = creators ? getViaServers(creators) : undefined;
     const mentionEl = createMentionElement(
       roomAliasOrId,
       name.startsWith('#') ? name : `#${name}`,
-      roomId === roomAliasOrId || mx.getRoom(roomId)?.getCanonicalAlias() === roomAliasOrId,
+      roomId === roomAliasOrId || ct.roomToAlias.read.get(roomId) === roomAliasOrId,
       undefined,
       viaServers
     );
@@ -121,14 +135,13 @@ export function RoomMentionAutocomplete({
   useKeyDown(window, (evt: KeyboardEvent) => {
     onTabPress(evt, () => {
       if (autoCompleteRoomIds.length === 0) {
-        const alias = roomAliasFromQueryText(mx, query.text);
+        const alias = roomAliasFromQueryText(ct.session.userId, query.text);
         handleAutocomplete(alias, alias);
         return;
       }
       const rId = autoCompleteRoomIds[0];
-      const r = mx.getRoom(rId);
-      const name = r?.name ?? rId;
-      handleAutocomplete(r?.getCanonicalAlias() ?? rId, name);
+      const name = getRoomName(rId) ?? 'Unknown';
+      handleAutocomplete(ct.roomToAlias.read.get(rId) ?? rId, name);
     });
   });
 
@@ -138,11 +151,19 @@ export function RoomMentionAutocomplete({
         <UnknownRoomMentionItem query={query} handleAutocomplete={handleAutocomplete} />
       ) : (
         autoCompleteRoomIds.map((rId) => {
-          const room = mx.getRoom(rId);
-          if (!room) return null;
-          const dm = mDirects.has(room.roomId);
+          const dm = mDirects.has(rId);
+          const name = getRoomName(rId) ?? 'Unknown';
+          const alias = ct.roomToAlias.read.get(rId);
+          const avatarMxc = getRoomAvatar(rId);
+          const avatar = avatarMxc
+            ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+                width: 32,
+                height: 32,
+                method: 'crop',
+              })
+            : undefined;
 
-          const handleSelect = () => handleAutocomplete(room.getCanonicalAlias() ?? rId, room.name);
+          const handleSelect = () => handleAutocomplete(alias ?? rId, name);
 
           return (
             <MenuItem
@@ -155,32 +176,34 @@ export function RoomMentionAutocomplete({
               onClick={handleSelect}
               after={
                 <Text size="T200" priority="300" truncate>
-                  {room.getCanonicalAlias() ?? ''}
+                  {alias}
                 </Text>
               }
               before={
                 <Avatar size="200">
                   {dm ? (
                     <RoomAvatar
-                      roomId={room.roomId}
-                      src={getDirectRoomAvatarUrl(mx, room)}
-                      alt={room.name}
+                      roomId={rId}
+                      src={avatar}
+                      alt={name}
                       renderFallback={() => (
-                        <RoomIcon
-                          size="50"
-                          joinRule={room.getJoinRule() ?? JoinRule.Restricted}
-                          filled
-                        />
+                        <Text as="span" size="H6">
+                          {nameInitials(name)}
+                        </Text>
                       )}
                     />
                   ) : (
-                    <RoomIcon size="100" joinRule={room.getJoinRule()} space={room.isSpaceRoom()} />
+                    <RoomIcon
+                      size="100"
+                      joinRule={ct.roomToJoinRule.read.get(rId)}
+                      space={ct.spaceRooms.read.has(rId)}
+                    />
                   )}
                 </Avatar>
               }
             >
               <Text style={{ flexGrow: 1 }} size="B400" truncate>
-                {room.name}
+                {name}
               </Text>
             </MenuItem>
           );
diff --git a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
index 7a8012eb..1d56325d 100644
--- a/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/UserMentionAutocomplete.tsx
@@ -1,32 +1,29 @@
-import React, { useEffect, KeyboardEvent as ReactKeyboardEvent } from 'react';
+import React, { useEffect, KeyboardEvent as ReactKeyboardEvent, useCallback } from 'react';
 import { Editor } from 'slate';
 import { Avatar, Icon, Icons, MenuItem, Text } from 'folds';
-import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 
 import { AutocompleteQuery } from './autocompleteQuery';
 import { AutocompleteMenu } from './AutocompleteMenu';
-import { useRoomMembers } from '../../../hooks/useRoomMembers';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import {
-  SearchItemStrGetter,
-  UseAsyncSearchOptions,
-  useAsyncSearch,
-} from '../../../hooks/useAsyncSearch';
+import { GetRoomMemberMembershipCallback, useRoomMembersAPI } from '../../../hooks/useRoomMembers';
+import { UseAsyncSearchOptions, useAsyncSearch } from '../../../hooks/useAsyncSearch';
 import { onTabPress } from '../../../utils/keyboard';
 import { createMentionElement, moveCursor, replaceWithElement } from '../utils';
 import { useKeyDown } from '../../../hooks/useKeyDown';
-import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../../utils/matrix';
-import { getMemberDisplayName, getMemberSearchStr } from '../../../utils/room';
+import { getMxIdServer, isUserId } from '../../../utils/matrix';
+import { getMemberSearchStr } from '../../../utils/room';
 import { UserAvatar } from '../../user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { Membership } from '../../../../types/matrix/room';
+import { useClient } from '../../../hooks/useClient';
+import { JoinRoomMemberObject } from '../../../../client/storage/collections';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { nameInitials } from '../../../utils/common';
 
 type MentionAutoCompleteHandler = (userId: string, name: string) => void;
 
-const userIdFromQueryText = (mx: MatrixClient, text: string) =>
+const userIdFromQueryText = (myUserId: string, text: string) =>
   isUserId(`@${text}`)
     ? `@${text}`
-    : `@${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(mx.getUserId() ?? '')}`;
+    : `@${text}${text.endsWith(':') ? '' : ':'}${getMxIdServer(myUserId)}`;
 
 function UnknownMentionItem({
   userId,
@@ -62,16 +59,18 @@ function UnknownMentionItem({
 }
 
 type UserMentionAutocompleteProps = {
-  room: Room;
+  roomId: string;
   editor: Editor;
   query: AutocompleteQuery<string>;
   requestClose: () => void;
 };
 
-const withAllowedMembership = (member: RoomMember): boolean =>
-  member.membership === Membership.Join ||
-  member.membership === Membership.Invite ||
-  member.membership === Membership.Knock;
+const withAllowedMembership =
+  (getMembership: GetRoomMemberMembershipCallback) =>
+  (member: JoinRoomMemberObject): boolean =>
+    getMembership(member.userId) === 'join' ||
+    getMembership(member.userId) === 'invite' ||
+    getMembership(member.userId) === 'knock';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -80,25 +79,28 @@ const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   },
 };
 
-const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
-const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
-  getMemberSearchStr(m, query, mxIdToName);
+const EMPTY_MEMBER_LIST: JoinRoomMemberObject[] = [];
 
 export function UserMentionAutocomplete({
-  room,
+  roomId,
   editor,
   query,
   requestClose,
 }: UserMentionAutocompleteProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const roomId: string = room.roomId!;
-  const roomAliasOrId = room.getCanonicalAlias() || roomId;
-  const members = useRoomMembers(mx, roomId);
+  const roomAliasOrId = ct.roomToAlias.read.get(roomId) || roomId;
+  const membersAPI = useRoomMembersAPI();
+  const members = membersAPI.memberEventsResult.value ?? EMPTY_MEMBER_LIST;
+
+  const [result, search, resetSearch] = useAsyncSearch(
+    members,
+    useCallback((m, q) => getMemberSearchStr(m, q, membersAPI.getName), [membersAPI.getName]),
+    SEARCH_OPTIONS
+  );
 
-  const [result, search, resetSearch] = useAsyncSearch(members, getRoomMemberStr, SEARCH_OPTIONS);
   const autoCompleteMembers = (result ? result.items.slice(0, 20) : members.slice(0, 20)).filter(
-    withAllowedMembership
+    withAllowedMembership(membersAPI.getMembership)
   );
 
   useEffect(() => {
@@ -110,7 +112,7 @@ export function UserMentionAutocomplete({
     const mentionEl = createMentionElement(
       uId,
       name.startsWith('@') ? name : `@${name}`,
-      mx.getUserId() === uId || roomAliasOrId === uId
+      uId === ct.session.userId || roomAliasOrId === uId
     );
     replaceWithElement(editor, query.range, mentionEl);
     moveCursor(editor, true);
@@ -124,18 +126,15 @@ export function UserMentionAutocomplete({
         return;
       }
       if (autoCompleteMembers.length === 0) {
-        const userId = userIdFromQueryText(mx, query.text);
+        const userId = userIdFromQueryText(ct.session.userId, query.text);
         handleAutocomplete(userId, userId);
         return;
       }
       const roomMember = autoCompleteMembers[0];
-      handleAutocomplete(roomMember.userId, roomMember.name);
+      handleAutocomplete(roomMember.userId, membersAPI.getName(roomMember.userId));
     });
   });
 
-  const getName = (member: RoomMember) =>
-    getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
-
   return (
     <AutocompleteMenu headerContent={<Text size="L400">Mentions</Text>} requestClose={requestClose}>
       {query.text === 'room' && (
@@ -147,15 +146,20 @@ export function UserMentionAutocomplete({
       )}
       {autoCompleteMembers.length === 0 ? (
         <UnknownMentionItem
-          userId={userIdFromQueryText(mx, query.text)}
-          name={userIdFromQueryText(mx, query.text)}
+          userId={userIdFromQueryText(ct.session.userId, query.text)}
+          name={userIdFromQueryText(ct.session.userId, query.text)}
           handleAutocomplete={handleAutocomplete}
         />
       ) : (
         autoCompleteMembers.map((roomMember) => {
-          const avatarMxcUrl = roomMember.getMxcAvatarUrl();
+          const name = membersAPI.getName(roomMember.userId);
+          const avatarMxcUrl = membersAPI.getAvatar(roomMember.userId);
           const avatarUrl = avatarMxcUrl
-            ? mx.mxcUrlToHttp(avatarMxcUrl, 32, 32, 'crop', undefined, false, useAuthentication)
+            ? mxcToHttp(ct.session.baseUrl, avatarMxcUrl, useAuthentication).thumbnail({
+                width: 32,
+                height: 32,
+                method: 'crop',
+              })
             : undefined;
           return (
             <MenuItem
@@ -163,9 +167,9 @@ export function UserMentionAutocomplete({
               as="button"
               radii="300"
               onKeyDown={(evt: ReactKeyboardEvent<HTMLButtonElement>) =>
-                onTabPress(evt, () => handleAutocomplete(roomMember.userId, getName(roomMember)))
+                onTabPress(evt, () => handleAutocomplete(roomMember.userId, name))
               }
-              onClick={() => handleAutocomplete(roomMember.userId, getName(roomMember))}
+              onClick={() => handleAutocomplete(roomMember.userId, name)}
               after={
                 <Text size="T200" priority="300" truncate>
                   {roomMember.userId}
@@ -176,14 +180,18 @@ export function UserMentionAutocomplete({
                   <UserAvatar
                     userId={roomMember.userId}
                     src={avatarUrl ?? undefined}
-                    alt={getName(roomMember)}
-                    renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                    alt={name}
+                    renderFallback={() => (
+                      <Text as="span" size="H6">
+                        {nameInitials(name)}
+                      </Text>
+                    )}
                   />
                 </Avatar>
               }
             >
               <Text style={{ flexGrow: 1 }} size="B400" truncate>
-                {getName(roomMember)}
+                {name}
               </Text>
             </MenuItem>
           );
diff --git a/src/app/components/editor/output.ts b/src/app/components/editor/output.ts
index dbdd51f3..76454885 100644
--- a/src/app/components/editor/output.ts
+++ b/src/app/components/editor/output.ts
@@ -1,5 +1,4 @@
 import { Descendant, Editor, Text } from 'slate';
-import { MatrixClient } from 'matrix-js-sdk';
 import { sanitizeText } from '../../utils/sanitize';
 import { BlockType } from './types';
 import { CustomElement } from './slate';
@@ -11,7 +10,8 @@ import {
 } from '../../plugins/markdown';
 import { findAndReplace } from '../../utils/findAndReplace';
 import { sanitizeForRegex } from '../../utils/regex';
-import { getCanonicalAliasOrRoomId, isUserId } from '../../utils/matrix';
+import { isUserId } from '../../utils/matrix';
+import { ClientContext } from '../../../client/context';
 
 export type OutputOptions = {
   allowTextFormatting?: boolean;
@@ -201,7 +201,7 @@ export type MentionsData = {
   room: boolean;
   users: Set<string>;
 };
-export const getMentions = (mx: MatrixClient, roomId: string, editor: Editor): MentionsData => {
+export const getMentions = (ct: ClientContext, editor: Editor): MentionsData => {
   const mentionData: MentionsData = {
     room: false,
     users: new Set(),
@@ -212,10 +212,10 @@ export const getMentions = (mx: MatrixClient, roomId: string, editor: Editor): M
     if (node.type === BlockType.CodeBlock) return;
 
     if (node.type === BlockType.Mention) {
-      if (node.id === getCanonicalAliasOrRoomId(mx, roomId)) {
+      if (node.name === '@room') {
         mentionData.room = true;
       }
-      if (isUserId(node.id) && node.id !== mx.getUserId()) {
+      if (isUserId(node.id) && node.id !== ct.session.userId) {
         mentionData.users.add(node.id);
       }
 
diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx
index 3db27e2a..eab41f9f 100644
--- a/src/app/components/emoji-board/EmojiBoard.tsx
+++ b/src/app/components/emoji-board/EmojiBoard.tsx
@@ -12,7 +12,6 @@ import React, {
 import { Box, config, Icons, Scroll } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
-import { Room } from 'matrix-js-sdk';
 import { atom, PrimitiveAtom, useAtom, useSetAtom } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { IEmoji, emojiGroups, emojis } from '../../plugins/emoji';
@@ -20,9 +19,8 @@ import { useEmojiGroupLabels } from './useEmojiGroupLabels';
 import { useEmojiGroupIcons } from './useEmojiGroupIcons';
 import { preventScrollWithArrowKey, stopPropagation } from '../../utils/keyboard';
 import { useRelevantImagePacks } from '../../hooks/useImagePacks';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../hooks/useRecentEmoji';
-import { isUserId, mxcUrlToHttp } from '../../utils/matrix';
+import { isUserId } from '../../utils/matrix';
 import { editableActiveElement, targetFromEvent } from '../../utils/dom';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
 import { useDebounce } from '../../hooks/useDebounce';
@@ -52,6 +50,10 @@ import {
 } from './components';
 import { EmojiBoardTab, EmojiType } from './types';
 import { VirtualTile } from '../virtualizer';
+import { useClient } from '../../hooks/useClient';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { GetRoomNameCallback, useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 const RECENT_GROUP_ID = 'recent_group';
 const SEARCH_GROUP_ID = 'search_group';
@@ -69,11 +71,10 @@ type StickerGroupItem = {
 
 const useGroups = (
   tab: EmojiBoardTab,
-  imagePacks: ImagePack[]
+  imagePacks: ImagePack[],
+  getRoomName: GetRoomNameCallback
 ): [EmojiGroupItem[], StickerGroupItem[]] => {
-  const mx = useMatrixClient();
-
-  const recentEmojis = useRecentEmoji(mx, 21);
+  const recentEmojisResult = useRecentEmoji(21);
   const labels = useEmojiGroupLabels();
 
   const emojiGroupItems = useMemo(() => {
@@ -83,12 +84,12 @@ const useGroups = (
     g.push({
       id: RECENT_GROUP_ID,
       name: 'Recent',
-      items: recentEmojis,
+      items: recentEmojisResult.value ?? [],
     });
 
     imagePacks.forEach((pack) => {
       let label = pack.meta.name;
-      if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
+      if (!label) label = isUserId(pack.id) ? 'Personal Pack' : getRoomName(pack.id);
 
       g.push({
         id: pack.id,
@@ -108,7 +109,7 @@ const useGroups = (
     });
 
     return g;
-  }, [mx, recentEmojis, labels, imagePacks, tab]);
+  }, [getRoomName, recentEmojisResult, labels, imagePacks, tab]);
 
   const stickerGroupItems = useMemo(() => {
     const g: StickerGroupItem[] = [];
@@ -116,7 +117,7 @@ const useGroups = (
 
     imagePacks.forEach((pack) => {
       let label = pack.meta.name;
-      if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
+      if (!label) label = isUserId(pack.id) ? 'Personal Pack' : getRoomName(pack.id);
 
       g.push({
         id: pack.id,
@@ -128,37 +129,24 @@ const useGroups = (
     });
 
     return g;
-  }, [mx, imagePacks, tab]);
+  }, [getRoomName, imagePacks, tab]);
 
   return [emojiGroupItems, stickerGroupItems];
 };
 
 const useItemRenderer = (tab: EmojiBoardTab) => {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
   const renderItem = (emoji: IEmoji | PackImageReader, index: number) => {
     if ('unicode' in emoji) {
       return <EmojiItem key={emoji.unicode + index} emoji={emoji} />;
     }
+    const url = mxcToHttp(ct.session.baseUrl, emoji.url, useAuthentication).url();
     if (tab === EmojiBoardTab.Sticker) {
-      return (
-        <StickerItem
-          key={emoji.shortcode + index}
-          mx={mx}
-          useAuthentication={useAuthentication}
-          image={emoji}
-        />
-      );
+      return <StickerItem key={emoji.shortcode + index} url={url} image={emoji} />;
     }
-    return (
-      <CustomEmojiItem
-        key={emoji.shortcode + index}
-        mx={mx}
-        useAuthentication={useAuthentication}
-        image={emoji}
-      />
-    );
+    return <CustomEmojiItem key={emoji.shortcode + index} url={url} image={emoji} />;
   };
 
   return renderItem;
@@ -168,9 +156,10 @@ type EmojiSidebarProps = {
   activeGroupAtom: PrimitiveAtom<string | undefined>;
   packs: ImagePack[];
   onScrollToGroup: (groupId: string) => void;
+  getRoomName: GetRoomNameCallback;
 };
-function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarProps) {
-  const mx = useMatrixClient();
+function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup, getRoomName }: EmojiSidebarProps) {
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
   const [activeGroupId, setActiveGroupId] = useAtom(activeGroupAtom);
@@ -199,11 +188,12 @@ function EmojiSidebar({ activeGroupAtom, packs, onScrollToGroup }: EmojiSidebarP
           <SidebarDivider />
           {packs.map((pack) => {
             let label = pack.meta.name;
-            if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
+            if (!label) label = isUserId(pack.id) ? 'Personal Pack' : getRoomName(pack.id);
 
-            const url =
-              mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) ||
-              pack.meta.avatar;
+            const avatarMxc = pack.getAvatarUrl(usage);
+            const url = avatarMxc
+              ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).url()
+              : undefined;
 
             return (
               <ImageGroupIcon
@@ -245,9 +235,15 @@ type StickerSidebarProps = {
   activeGroupAtom: PrimitiveAtom<string | undefined>;
   packs: ImagePack[];
   onScrollToGroup: (groupId: string) => void;
+  getRoomName: GetRoomNameCallback;
 };
-function StickerSidebar({ activeGroupAtom, packs, onScrollToGroup }: StickerSidebarProps) {
-  const mx = useMatrixClient();
+function StickerSidebar({
+  activeGroupAtom,
+  packs,
+  onScrollToGroup,
+  getRoomName,
+}: StickerSidebarProps) {
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
   const [activeGroupId, setActiveGroupId] = useAtom(activeGroupAtom);
@@ -263,10 +259,12 @@ function StickerSidebar({ activeGroupAtom, packs, onScrollToGroup }: StickerSide
       <SidebarStack>
         {packs.map((pack) => {
           let label = pack.meta.name;
-          if (!label) label = isUserId(pack.id) ? 'Personal Pack' : mx.getRoom(pack.id)?.name;
+          if (!label) label = isUserId(pack.id) ? 'Personal Pack' : getRoomName(pack.id);
 
-          const url =
-            mxcUrlToHttp(mx, pack.getAvatarUrl(usage) ?? '', useAuthentication) || pack.meta.avatar;
+          const avatarMxc = pack.getAvatarUrl(usage);
+          const url = avatarMxc
+            ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).url()
+            : undefined;
 
           return (
             <ImageGroupIcon
@@ -355,7 +353,7 @@ const VIRTUAL_OVER_SCAN = 2;
 type EmojiBoardProps = {
   tab?: EmojiBoardTab;
   onTabChange?: (tab: EmojiBoardTab) => void;
-  imagePackRooms: Room[];
+  imagePackRooms: string[];
   requestClose: () => void;
   returnFocusOnDeactivate?: boolean;
   onEmojiSelect?: (unicode: string, shortcode: string) => void;
@@ -377,7 +375,9 @@ export function EmojiBoard({
   allowTextCustomEmoji,
   addToRecentEmoji = true,
 }: EmojiBoardProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(imagePackRooms);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
 
   const emojiTab = tab === EmojiBoardTab.Emoji;
   const usage = emojiTab ? ImageUsage.Emoticon : ImageUsage.Sticker;
@@ -388,8 +388,8 @@ export function EmojiBoard({
   );
   const activeGroupIdAtom = useMemo(() => atom<string | undefined>(undefined), []);
   const setActiveGroupId = useSetAtom(activeGroupIdAtom);
-  const imagePacks = useRelevantImagePacks(usage, imagePackRooms);
-  const [emojiGroupItems, stickerGroupItems] = useGroups(tab, imagePacks);
+  const [imagePacks, loading] = useRelevantImagePacks(usage, imagePackRooms);
+  const [emojiGroupItems, stickerGroupItems] = useGroups(tab, imagePacks, getRoomName);
   const groups = emojiTab ? emojiGroupItems : stickerGroupItems;
   const renderItem = useItemRenderer(tab);
 
@@ -438,7 +438,7 @@ export function EmojiBoard({
     if (emojiInfo.type === EmojiType.Emoji) {
       onEmojiSelect?.(emojiInfo.data, emojiInfo.shortcode);
       if (!evt.altKey && !evt.shiftKey && addToRecentEmoji) {
-        addRecentEmoji(mx, emojiInfo.data);
+        addRecentEmoji(ct, emojiInfo.data);
       }
     }
     if (emojiInfo.type === EmojiType.CustomEmoji) {
@@ -522,57 +522,61 @@ export function EmojiBoard({
               activeGroupAtom={activeGroupIdAtom}
               packs={imagePacks}
               onScrollToGroup={handleScrollToGroup}
+              getRoomName={getRoomName}
             />
           ) : (
             <StickerSidebar
               activeGroupAtom={activeGroupIdAtom}
               packs={imagePacks}
               onScrollToGroup={handleScrollToGroup}
+              getRoomName={getRoomName}
             />
           )
         }
       >
         <Box grow="Yes">
-          <EmojiGroupHolder
-            key={tab}
-            contentScrollRef={contentScrollRef}
-            previewAtom={previewAtom}
-            onGroupItemClick={handleGroupItemClick}
-          >
-            {searchedItems && (
-              <EmojiGroup
-                id={SEARCH_GROUP_ID}
-                label={searchedItems.length ? 'Search Results' : 'No Results found'}
-              >
-                {searchedItems.map(renderItem)}
-              </EmojiGroup>
-            )}
-            <div
-              ref={virtualBaseRef}
-              style={{
-                position: 'relative',
-                height: virtualizer.getTotalSize(),
-              }}
+          {!loading && (
+            <EmojiGroupHolder
+              key={tab}
+              contentScrollRef={contentScrollRef}
+              previewAtom={previewAtom}
+              onGroupItemClick={handleGroupItemClick}
             >
-              {vItems.map((vItem) => {
-                const group = groups[vItem.index];
+              {searchedItems && (
+                <EmojiGroup
+                  id={SEARCH_GROUP_ID}
+                  label={searchedItems.length ? 'Search Results' : 'No Results found'}
+                >
+                  {searchedItems.map(renderItem)}
+                </EmojiGroup>
+              )}
+              <div
+                ref={virtualBaseRef}
+                style={{
+                  position: 'relative',
+                  height: virtualizer.getTotalSize(),
+                }}
+              >
+                {vItems.map((vItem) => {
+                  const group = groups[vItem.index];
 
-                return (
-                  <VirtualTile
-                    virtualItem={vItem}
-                    style={{ paddingTop: config.space.S200 }}
-                    ref={virtualizer.measureElement}
-                    key={vItem.index}
-                  >
-                    <EmojiGroup key={group.id} id={group.id} label={group.name}>
-                      {group.items.map(renderItem)}
-                    </EmojiGroup>
-                  </VirtualTile>
-                );
-              })}
-            </div>
-            {tab === EmojiBoardTab.Sticker && groups.length === 0 && <NoStickerPacks />}
-          </EmojiGroupHolder>
+                  return (
+                    <VirtualTile
+                      virtualItem={vItem}
+                      style={{ paddingTop: config.space.S200 }}
+                      ref={virtualizer.measureElement}
+                      key={vItem.index}
+                    >
+                      <EmojiGroup key={group.id} id={group.id} label={group.name}>
+                        {group.items.map(renderItem)}
+                      </EmojiGroup>
+                    </VirtualTile>
+                  );
+                })}
+              </div>
+              {tab === EmojiBoardTab.Sticker && groups.length === 0 && <NoStickerPacks />}
+            </EmojiGroupHolder>
+          )}
         </Box>
         <Preview previewAtom={previewAtom} />
       </EmojiBoardLayout>
diff --git a/src/app/components/emoji-board/components/Item.tsx b/src/app/components/emoji-board/components/Item.tsx
index c3fd3c3a..021ce1b2 100644
--- a/src/app/components/emoji-board/components/Item.tsx
+++ b/src/app/components/emoji-board/components/Item.tsx
@@ -1,11 +1,9 @@
 import React from 'react';
 import { Box } from 'folds';
-import { MatrixClient } from 'matrix-js-sdk';
 import { EmojiItemInfo, EmojiType } from '../types';
 import * as css from './styles.css';
 import { PackImageReader } from '../../../plugins/custom-emoji';
 import { IEmoji } from '../../../plugins/emoji';
-import { mxcUrlToHttp } from '../../../utils/matrix';
 
 export const getEmojiItemInfo = (element: Element): EmojiItemInfo | undefined => {
   const label = element.getAttribute('title');
@@ -46,11 +44,10 @@ export function EmojiItem({ emoji }: EmojiItemProps) {
 }
 
 type CustomEmojiItemProps = {
-  mx: MatrixClient;
-  useAuthentication?: boolean;
+  url?: string;
   image: PackImageReader;
 };
-export function CustomEmojiItem({ mx, useAuthentication, image }: CustomEmojiItemProps) {
+export function CustomEmojiItem({ url, image }: CustomEmojiItemProps) {
   return (
     <Box
       as="button"
@@ -68,19 +65,18 @@ export function CustomEmojiItem({ mx, useAuthentication, image }: CustomEmojiIte
         loading="lazy"
         className={css.CustomEmojiImg}
         alt={image.body || image.shortcode}
-        src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+        src={url ?? image.url}
       />
     </Box>
   );
 }
 
 type StickerItemProps = {
-  mx: MatrixClient;
-  useAuthentication?: boolean;
+  url?: string;
   image: PackImageReader;
 };
 
-export function StickerItem({ mx, useAuthentication, image }: StickerItemProps) {
+export function StickerItem({ url, image }: StickerItemProps) {
   return (
     <Box
       as="button"
@@ -98,7 +94,7 @@ export function StickerItem({ mx, useAuthentication, image }: StickerItemProps)
         loading="lazy"
         className={css.StickerImg}
         alt={image.body || image.shortcode}
-        src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? image.url}
+        src={url ?? image.url}
       />
     </Box>
   );
diff --git a/src/app/components/emoji-board/components/Preview.tsx b/src/app/components/emoji-board/components/Preview.tsx
index 3f5f8d3a..093aa455 100644
--- a/src/app/components/emoji-board/components/Preview.tsx
+++ b/src/app/components/emoji-board/components/Preview.tsx
@@ -2,9 +2,9 @@ import { Box, Text } from 'folds';
 import React from 'react';
 import { Atom, atom, useAtomValue } from 'jotai';
 import * as css from './styles.css';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { mxcUrlToHttp } from '../../../utils/matrix';
+import { useClient } from '../../../hooks/useClient';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
 
 export type PreviewData = {
   key: string;
@@ -18,7 +18,7 @@ type PreviewProps = {
   previewAtom: Atom<PreviewData | undefined>;
 };
 export function Preview({ previewAtom }: PreviewProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
   const { key, shortcode } = useAtomValue(previewAtom) ?? {};
@@ -37,7 +37,7 @@ export function Preview({ previewAtom }: PreviewProps) {
           {key.startsWith('mxc://') ? (
             <img
               className={css.PreviewImg}
-              src={mxcUrlToHttp(mx, key, useAuthentication) ?? key}
+              src={mxcToHttp(ct.session.baseUrl, key, useAuthentication).url() ?? key}
               alt={shortcode}
             />
           ) : (
diff --git a/src/app/components/encrypted-event/EncryptedEvent.tsx b/src/app/components/encrypted-event/EncryptedEvent.tsx
new file mode 100644
index 00000000..692aa725
--- /dev/null
+++ b/src/app/components/encrypted-event/EncryptedEvent.tsx
@@ -0,0 +1,109 @@
+import React, { ReactNode } from 'react';
+import { as, Box, color, config, Icon, Icons, Text } from 'folds';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import {
+  DecryptionManager,
+  EventDecryptionIdle,
+  EventDecryptionPending,
+  EventDecryptionSuccess,
+} from '../../../client/decryption';
+import { useObservableValue } from '../../hooks/useObservableValue';
+
+export const MessageDecryptionIdle = as<'div', { children?: never }>(({ ...props }, ref) => (
+  <Box as="span" alignItems="Center" gap="100" {...props} ref={ref}>
+    <Icon size="50" src={Icons.ShieldLock} />
+    <i>Decrypt message event to view.</i>
+  </Box>
+));
+
+export const MessageDecryptionPending = as<'div', { children?: never }>(({ ...props }, ref) => (
+  <Box as="span" alignItems="Center" gap="100" {...props} ref={ref}>
+    <Icon size="50" src={Icons.Clock} />
+    <i>Waiting for message to be decrypted...</i>
+  </Box>
+));
+
+export const MessageDecryptionError = as<'div', { message: string; children?: never }>(
+  ({ message, ...props }, ref) => (
+    <Box
+      as="span"
+      alignItems="Center"
+      gap="100"
+      style={{ color: color.Critical.Main, opacity: config.opacity.P300 }}
+      {...props}
+      ref={ref}
+    >
+      <Icon size="50" src={Icons.Warning} />
+      <i>{message}</i>
+    </Box>
+  )
+);
+
+type EncryptedMessageEventProps = {
+  decryptionManager: DecryptionManager;
+  roomId: string;
+  event: MessageEventWithoutRoomId;
+  children: (decryptedEvent: MessageEventWithoutRoomId) => ReactNode;
+};
+export function EncryptedMessageEvent({
+  decryptionManager,
+  roomId,
+  event,
+  children,
+}: EncryptedMessageEventProps) {
+  const encryptedEvent = decryptionManager.decryptableMessageEvent(roomId, event);
+  if (encryptedEvent.decryption.read instanceof EventDecryptionIdle) {
+    encryptedEvent.decrypt();
+  }
+  const decryption = useObservableValue(encryptedEvent.decryption);
+
+  if (decryption instanceof EventDecryptionIdle) {
+    return (
+      <Text>
+        <MessageDecryptionIdle />
+      </Text>
+    );
+  }
+
+  if (decryption instanceof EventDecryptionPending) {
+    return (
+      <Text>
+        <MessageDecryptionPending />
+      </Text>
+    );
+  }
+
+  if (decryption instanceof EventDecryptionSuccess) {
+    return children(decryption.event);
+  }
+
+  const { cause, error } = decryption;
+
+  if (cause) {
+    return (
+      <Text>
+        <MessageDecryptionError
+          message={
+            cause instanceof Error
+              ? cause.message
+              : 'Unknown error occurs while decrypting message.'
+          }
+        />
+      </Text>
+    );
+  }
+
+  if (!error) {
+    return (
+      <Text>
+        <MessageDecryptionError message="Unknown error occurs while decrypting message." />
+      </Text>
+    );
+  }
+
+  return (
+    <Text>
+      <MessageDecryptionError message={error.description} />
+    </Text>
+  );
+}
diff --git a/src/app/components/encrypted-event/index.ts b/src/app/components/encrypted-event/index.ts
new file mode 100644
index 00000000..0a307315
--- /dev/null
+++ b/src/app/components/encrypted-event/index.ts
@@ -0,0 +1 @@
+export * from './EncryptedEvent';
diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx
index c7900237..e4291e02 100644
--- a/src/app/components/event-readers/EventReaders.tsx
+++ b/src/app/components/event-readers/EventReaders.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import {
   Avatar,
@@ -13,33 +13,46 @@ import {
   as,
   config,
 } from 'folds';
-import { Room } from 'matrix-js-sdk';
-import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
-import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
 import * as css from './EventReaders.css';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UserAvatar } from '../user-avatar';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getMouseEventCords } from '../../utils/dom';
+import { useClient } from '../../hooks/useClient';
+import { useObservableValuePromise } from '../../hooks/useObservableValue';
+import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { useRoom } from '../../hooks/useRoom';
 
 export type EventReadersProps = {
-  room: Room;
   eventId: string;
   requestClose: () => void;
 };
 export const EventReaders = as<'div', EventReadersProps>(
-  ({ className, room, eventId, requestClose, ...props }, ref) => {
-    const mx = useMatrixClient();
-    const useAuthentication = useMediaAuthentication();
-    const latestEventReaders = useRoomEventReaders(room, eventId);
-    const openProfile = useOpenUserRoomProfile();
-    const space = useSpaceOptionally();
+  ({ className, eventId, requestClose, ...props }, ref) => {
+    const ct = useClient();
+    const roomId = useRoom();
+    const membersAPI = useRoomMembersAPI();
 
-    const getName = (userId: string) =>
-      getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
+    const eventReceipt = useObservableValuePromise(
+      useMemo(
+        () => ct.storage.readReceipt.observableRead.queryIndex('eventId', eventId),
+        [ct, eventId]
+      )
+    );
+
+    const users: string[] = useMemo(() => {
+      const u = new Set<string>();
+      eventReceipt.value?.forEach((r) => {
+        u.add(r.userId);
+      });
+      return Array.from(u);
+    }, [eventReceipt]);
+
+    const useAuthentication = useMediaAuthentication();
+    const openProfile = useOpenUserRoomProfile();
+    const spaceId = useSpaceOptionally();
 
     return (
       <Box
@@ -59,19 +72,15 @@ export const EventReaders = as<'div', EventReadersProps>(
         <Box grow="Yes">
           <Scroll visibility="Hover" hideTrack size="300">
             <Box className={css.Content} direction="Column">
-              {latestEventReaders.map((readerId) => {
-                const name = getName(readerId);
-                const avatarMxcUrl = room.getMember(readerId)?.getMxcAvatarUrl();
+              {users.map((readerId) => {
+                const name = membersAPI.getName(readerId);
+                const avatarMxcUrl = membersAPI.getAvatar(readerId);
                 const avatarUrl = avatarMxcUrl
-                  ? mx.mxcUrlToHttp(
-                      avatarMxcUrl,
-                      100,
-                      100,
-                      'crop',
-                      undefined,
-                      false,
-                      useAuthentication
-                    )
+                  ? mxcToHttp(ct.session.baseUrl, avatarMxcUrl, useAuthentication).thumbnail({
+                      width: 96,
+                      height: 96,
+                      method: 'crop',
+                    })
                   : undefined;
 
                 return (
@@ -81,8 +90,8 @@ export const EventReaders = as<'div', EventReadersProps>(
                     radii="400"
                     onClick={(event) => {
                       openProfile(
-                        room.roomId,
-                        space?.roomId,
+                        roomId,
+                        spaceId,
                         readerId,
                         getMouseEventCords(event.nativeEvent),
                         'Bottom'
diff --git a/src/app/components/image-pack-view/ImagePackContent.tsx b/src/app/components/image-pack-view/ImagePackContent.tsx
index a696ebe8..ff4c7dff 100644
--- a/src/app/components/image-pack-view/ImagePackContent.tsx
+++ b/src/app/components/image-pack-view/ImagePackContent.tsx
@@ -19,7 +19,7 @@ import * as css from './style.css';
 import { useFilePicker } from '../../hooks/useFilePicker';
 import { CompactUploadCardRenderer } from '../upload-card';
 import { UploadSuccess } from '../../state/upload';
-import { getImageInfo, TUploadContent } from '../../utils/matrix';
+import { getImageInfo, UploadContent } from '../../utils/matrix';
 import { getImageFileUrl, loadImageElement, renameFile } from '../../utils/dom';
 import { replaceSpaceWithDash, suffixRename } from '../../utils/common';
 import { getFileNameWithoutExt } from '../../utils/mimeTypes';
@@ -110,7 +110,7 @@ export const ImagePackContent = as<'div', ImagePackContentProps>(
       [imagePack.meta]
     );
 
-    const handleUploadRemove = useCallback((file: TUploadContent) => {
+    const handleUploadRemove = useCallback((file: UploadContent) => {
       setFiles((fs) => fs.filter((f) => f !== file));
     }, []);
 
diff --git a/src/app/components/image-pack-view/ImageTile.tsx b/src/app/components/image-pack-view/ImageTile.tsx
index 37337ff7..959426f4 100644
--- a/src/app/components/image-pack-view/ImageTile.tsx
+++ b/src/app/components/image-pack-view/ImageTile.tsx
@@ -7,7 +7,7 @@ import { ImageUsage, imageUsageEqual, PackImageReader } from '../../plugins/cust
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { SettingTile } from '../setting-tile';
 import { useObjectURL } from '../../hooks/useObjectURL';
-import { createUploadAtom, TUploadAtom } from '../../state/upload';
+import { createUploadAtom, UploadAtom } from '../../state/upload';
 import { replaceSpaceWithDash } from '../../utils/common';
 
 type ImageTileProps = {
@@ -91,7 +91,7 @@ export function ImageTile({
 
 type ImageTileUploadProps = {
   file: File;
-  children: (uploadAtom: TUploadAtom) => ReactNode;
+  children: (uploadAtom: UploadAtom) => ReactNode;
 };
 export function ImageTileUpload({ file, children }: ImageTileUploadProps) {
   const url = useObjectURL(file);
diff --git a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
index ddac0576..57f54c0d 100644
--- a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
+++ b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
@@ -3,7 +3,6 @@ import React, {
   FormEventHandler,
   KeyboardEventHandler,
   useCallback,
-  useMemo,
   useRef,
   useState,
 } from 'react';
@@ -29,19 +28,18 @@ import {
   Scroll,
   MenuItem,
 } from 'folds';
-import { Room } from 'matrix-js-sdk';
 import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';
+import { postInvite } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { stopPropagation } from '../../utils/keyboard';
 import { useDirectUsers } from '../../hooks/useDirectUsers';
 import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
-import { Membership } from '../../../types/matrix/room';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../hooks/useAsyncSearch';
 import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { BreakWord } from '../../styles/Text.css';
 import { useAlive } from '../../hooks/useAlive';
+import { useClient } from '../../hooks/useClient';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -52,27 +50,19 @@ const SEARCH_OPTIONS: UseAsyncSearchOptions = {
 const getUserIdString = (userId: string) => getMxIdLocalPart(userId) ?? userId;
 
 type InviteUserProps = {
-  room: Room;
+  roomId: string;
   requestClose: () => void;
 };
-export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
-  const mx = useMatrixClient();
+export function InviteUserPrompt({ roomId, requestClose }: InviteUserProps) {
+  const ct = useClient();
   const alive = useAlive();
 
   const inputRef = useRef<HTMLInputElement>(null);
   const directUsers = useDirectUsers();
   const [validUserId, setValidUserId] = useState<string>();
 
-  const filteredUsers = useMemo(
-    () =>
-      directUsers.filter((userId) => {
-        const membership = room.getMember(userId)?.membership;
-        return membership !== Membership.Join;
-      }),
-    [directUsers, room]
-  );
   const [result, search, resetSearch] = useAsyncSearch(
-    filteredUsers,
+    directUsers,
     getUserIdString,
     SEARCH_OPTIONS
   );
@@ -83,9 +73,17 @@ export function InviteUserPrompt({ room, requestClose }: InviteUserProps) {
   const [inviteState, invite] = useAsyncCallback<void, Error, [string, string | undefined]>(
     useCallback(
       async (userId, reason) => {
-        await mx.invite(room.roomId, userId, reason);
+        await ct.requestAuthJSON(
+          postInvite({
+            pathParams: { roomId },
+            body: {
+              user_id: userId,
+              reason,
+            },
+          })
+        );
       },
-      [mx, room]
+      [ct, roomId]
     )
   );
 
diff --git a/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx b/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
index 217491e6..eba75721 100644
--- a/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
+++ b/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
@@ -16,10 +16,16 @@ import {
   Button,
   Spinner,
 } from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { postLeave } from 'neurone/lib/api/matrix/client/v3/rooms';
+import {
+  MatrixResponseResult,
+  parseMatrixResp,
+  printMatrixError,
+} from 'neurone/lib/matrix-request';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../utils/keyboard';
+import { useClient } from '../../hooks/useClient';
+import { deleteJoinRooms } from '../../../client/syncWriter/utils';
 
 type LeaveRoomPromptProps = {
   roomId: string;
@@ -27,23 +33,31 @@ type LeaveRoomPromptProps = {
   onCancel: () => void;
 };
 export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
-  const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
+  const [leaveState, leaveRoom] = useAsyncCallback<MatrixResponseResult<unknown>, Error, []>(
     useCallback(async () => {
-      mx.leave(roomId);
-    }, [mx, roomId])
+      const response = await ct.requestAuthJSON(postLeave({ pathParams: { roomId } }));
+      deleteJoinRooms(ct, [roomId])
+        .then(() => console.log('=====> deleted'))
+        .catch((e) => {
+          console.error(e);
+        });
+      return parseMatrixResp(response);
+    }, [ct, roomId])
   );
+  const success = leaveState.status === AsyncStatus.Success;
+  const [requestError] = success ? leaveState.data : [];
 
   const handleLeave = () => {
     leaveRoom();
   };
 
   useEffect(() => {
-    if (leaveState.status === AsyncStatus.Success) {
+    if (success) {
       onDone();
     }
-  }, [leaveState, onDone]);
+  }, [success, onDone]);
 
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
@@ -80,6 +94,11 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
                     Failed to leave room! {leaveState.error.message}
                   </Text>
                 )}
+                {requestError && (
+                  <Text style={{ color: color.Critical.Main }} size="T300">
+                    Failed to leave room! {printMatrixError(requestError)}
+                  </Text>
+                )}
               </Box>
               <Button
                 type="submit"
diff --git a/src/app/components/message/FileHeader.tsx b/src/app/components/message/FileHeader.tsx
index 0248862d..4e0d9811 100644
--- a/src/app/components/message/FileHeader.tsx
+++ b/src/app/components/message/FileHeader.tsx
@@ -3,15 +3,11 @@ import React, { ReactNode, useCallback } from 'react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import FileSaver from 'file-saver';
 import { mimeTypeToExt } from '../../utils/mimeTypes';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import {
-  decryptFile,
-  downloadEncryptedMedia,
-  downloadMedia,
-  mxcUrlToHttp,
-} from '../../utils/matrix';
+import { decryptFile, downloadEncryptedMedia, downloadMedia } from '../../utils/matrix';
+import { useClient } from '../../hooks/useClient';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 const badgeStyles = { maxWidth: toRem(100) };
 
@@ -19,23 +15,25 @@ type FileDownloadButtonProps = {
   filename: string;
   url: string;
   mimeType: string;
-  encInfo?: EncryptedAttachmentInfo;
+  encInfo?: object;
 };
 export function FileDownloadButton({ filename, url, mimeType, encInfo }: FileDownloadButtonProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
   const [downloadState, download] = useAsyncCallback(
     useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const mediaUrl = mxcToHttp(ct.session.baseUrl, url, useAuthentication).url() ?? url;
       const fileContent = encInfo
-        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
+            decryptFile(encBuf, mimeType, encInfo as EncryptedAttachmentInfo)
+          )
         : await downloadMedia(mediaUrl);
 
       const fileURL = URL.createObjectURL(fileContent);
       FileSaver.saveAs(fileURL, filename);
       return fileURL;
-    }, [mx, url, useAuthentication, mimeType, encInfo, filename])
+    }, [ct, url, useAuthentication, mimeType, encInfo, filename])
   );
 
   const downloading = downloadState.status === AsyncStatus.Loading;
diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index a40ecae1..aefd5d72 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -1,34 +1,29 @@
-import React, { CSSProperties, ReactNode } from 'react';
+import React, { CSSProperties } from 'react';
 import { Box, Chip, Icon, Icons, Text, toRem } from 'folds';
-import { IContent } from 'matrix-js-sdk';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { Opts } from 'linkifyjs';
 import { JUMBO_EMOJI_REG, URL_REG } from '../../utils/regex';
 import { trimReplyFromBody } from '../../utils/room';
 import { MessageTextBody } from './layout';
 import {
+  AudioContent,
+  FileContent,
+  ImageContent,
   MessageBadEncryptedContent,
   MessageBrokenContent,
   MessageDeletedContent,
   MessageEditedContent,
   MessageUnsupportedContent,
+  VideoContent,
 } from './content';
-import {
-  IAudioContent,
-  IAudioInfo,
-  IEncryptedFile,
-  IFileContent,
-  IFileInfo,
-  IImageContent,
-  IImageInfo,
-  IThumbnailContent,
-  IVideoContent,
-  IVideoInfo,
-  MATRIX_SPOILER_PROPERTY_NAME,
-  MATRIX_SPOILER_REASON_PROPERTY_NAME,
-} from '../../../types/matrix/common';
 import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
 import { parseGeoUri, scaleYDimension } from '../../utils/common';
 import { Attachment, AttachmentBox, AttachmentContent, AttachmentHeader } from './attachment';
 import { FileHeader, FileDownloadButton } from './FileHeader';
+import { RenderBody } from './RenderBody';
+import { rContent, rEncryptedFile, rInfo } from '../../../client/reader';
+import { UrlPreviewCard, UrlPreviewHolder } from '../url-preview';
+import { testMatrixTo } from '../../plugins/matrix-to';
 
 export function MBadEncrypted() {
   return (
@@ -65,24 +60,53 @@ export function BrokenContent() {
   );
 }
 
-type RenderBodyProps = {
+type UrlPreviewProps = {
   body: string;
-  customBody?: string;
+  ts: number;
 };
+function UrlPreview({ body, ts }: UrlPreviewProps) {
+  const urlsMatch = body.match(URL_REG);
+  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
+
+  if (!urls) return null;
+
+  const filteredUrls = urls.filter((url) => !testMatrixTo(url));
+  if (filteredUrls.length === 0) return null;
+
+  return (
+    <UrlPreviewHolder>
+      {filteredUrls.map((url) => (
+        <UrlPreviewCard key={url} url={url} ts={ts} />
+      ))}
+    </UrlPreviewHolder>
+  );
+}
+
 type MTextProps = {
   edited?: boolean;
-  content: Record<string, unknown>;
-  renderBody: (props: RenderBodyProps) => ReactNode;
-  renderUrlsPreview?: (urls: string[]) => ReactNode;
+  content: object;
+  urlPreview?: boolean;
+  ts: number;
   style?: CSSProperties;
+  highlightRegex?: RegExp;
+  htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
 };
-export function MText({ edited, content, renderBody, renderUrlsPreview, style }: MTextProps) {
-  const { body, formatted_body: customBody } = content;
+export function MText({
+  edited,
+  content,
+  urlPreview,
+  ts,
+  style,
+  highlightRegex,
+  linkifyOpts,
+  htmlReactParserOptions,
+}: MTextProps) {
+  const body = rContent.body(content);
+  const customBody = rContent.formattedBody(content);
+  const trimmedBody = trimReplyFromBody(body ?? '');
 
   if (typeof body !== 'string') return <BrokenContent />;
-  const trimmedBody = trimReplyFromBody(body);
-  const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
-  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
 
   return (
     <>
@@ -91,13 +115,16 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
         jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
         style={style}
       >
-        {renderBody({
-          body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
-        })}
+        <RenderBody
+          body={trimmedBody}
+          customBody={customBody}
+          highlightRegex={highlightRegex}
+          htmlReactParserOptions={htmlReactParserOptions}
+          linkifyOpts={linkifyOpts}
+        />
         {edited && <MessageEditedContent />}
       </MessageTextBody>
-      {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
+      {urlPreview && <UrlPreview body={trimmedBody} ts={ts} />}
     </>
   );
 }
@@ -105,23 +132,28 @@ export function MText({ edited, content, renderBody, renderUrlsPreview, style }:
 type MEmoteProps = {
   displayName: string;
   edited?: boolean;
-  content: Record<string, unknown>;
-  renderBody: (props: RenderBodyProps) => ReactNode;
-  renderUrlsPreview?: (urls: string[]) => ReactNode;
+  content: object;
+  urlPreview?: boolean;
+  ts: number;
+  highlightRegex?: RegExp;
+  htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
 };
 export function MEmote({
   displayName,
   edited,
   content,
-  renderBody,
-  renderUrlsPreview,
+  urlPreview,
+  ts,
+  highlightRegex,
+  linkifyOpts,
+  htmlReactParserOptions,
 }: MEmoteProps) {
-  const { body, formatted_body: customBody } = content;
+  const body = rContent.body(content);
+  const customBody = rContent.formattedBody(content);
 
   if (typeof body !== 'string') return <BrokenContent />;
   const trimmedBody = trimReplyFromBody(body);
-  const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
-  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
 
   return (
     <>
@@ -131,30 +163,43 @@ export function MEmote({
         jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
       >
         <b>{`${displayName} `}</b>
-        {renderBody({
-          body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
-        })}
+        <RenderBody
+          body={trimmedBody}
+          customBody={customBody}
+          highlightRegex={highlightRegex}
+          htmlReactParserOptions={htmlReactParserOptions}
+          linkifyOpts={linkifyOpts}
+        />
         {edited && <MessageEditedContent />}
       </MessageTextBody>
-      {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
+      {urlPreview && <UrlPreview body={trimmedBody} ts={ts} />}
     </>
   );
 }
 
 type MNoticeProps = {
   edited?: boolean;
-  content: Record<string, unknown>;
-  renderBody: (props: RenderBodyProps) => ReactNode;
-  renderUrlsPreview?: (urls: string[]) => ReactNode;
+  content: object;
+  urlPreview?: boolean;
+  ts: number;
+  highlightRegex?: RegExp;
+  htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
 };
-export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNoticeProps) {
-  const { body, formatted_body: customBody } = content;
+export function MNotice({
+  edited,
+  content,
+  urlPreview,
+  ts,
+  highlightRegex,
+  linkifyOpts,
+  htmlReactParserOptions,
+}: MNoticeProps) {
+  const body = rContent.body(content);
+  const customBody = rContent.formattedBody(content);
 
   if (typeof body !== 'string') return <BrokenContent />;
   const trimmedBody = trimReplyFromBody(body);
-  const urlsMatch = renderUrlsPreview && trimmedBody.match(URL_REG);
-  const urls = urlsMatch ? [...new Set(urlsMatch)] : undefined;
 
   return (
     <>
@@ -163,39 +208,34 @@ export function MNotice({ edited, content, renderBody, renderUrlsPreview }: MNot
         preWrap={typeof customBody !== 'string'}
         jumboEmoji={JUMBO_EMOJI_REG.test(trimmedBody)}
       >
-        {renderBody({
-          body: trimmedBody,
-          customBody: typeof customBody === 'string' ? customBody : undefined,
-        })}
+        <RenderBody
+          body={trimmedBody}
+          customBody={customBody}
+          highlightRegex={highlightRegex}
+          htmlReactParserOptions={htmlReactParserOptions}
+          linkifyOpts={linkifyOpts}
+        />
         {edited && <MessageEditedContent />}
       </MessageTextBody>
-      {renderUrlsPreview && urls && urls.length > 0 && renderUrlsPreview(urls)}
+      {urlPreview && <UrlPreview body={trimmedBody} ts={ts} />}
     </>
   );
 }
 
-type RenderImageContentProps = {
-  body: string;
-  filename?: string;
-  info?: IImageInfo & IThumbnailContent;
-  mimeType?: string;
-  url: string;
-  encInfo?: IEncryptedFile;
-  markedAsSpoiler?: boolean;
-  spoilerReason?: string;
-};
 type MImageProps = {
-  content: IImageContent;
-  renderImageContent: (props: RenderImageContentProps) => ReactNode;
+  content: object;
+  mediaAutoLoad?: boolean;
   outlined?: boolean;
 };
-export function MImage({ content, renderImageContent, outlined }: MImageProps) {
-  const imgInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
+export function MImage({ content, mediaAutoLoad, outlined }: MImageProps) {
+  const info = rContent.info(content);
+  const mxcUrl = rEncryptedFile.url(rContent.file(content)) ?? rContent.url(content);
+
   if (typeof mxcUrl !== 'string') {
     return <BrokenContent />;
   }
-  const height = scaleYDimension(imgInfo?.w || 400, 400, imgInfo?.h || 400);
+
+  const height = scaleYDimension(rInfo.w(info) || 400, 400, rInfo.h(info) || 400);
 
   return (
     <Attachment outlined={outlined}>
@@ -204,178 +244,154 @@ export function MImage({ content, renderImageContent, outlined }: MImageProps) {
           height: toRem(height < 48 ? 48 : height),
         }}
       >
-        {renderImageContent({
-          body: content.body || 'Image',
-          info: imgInfo,
-          mimeType: imgInfo?.mimetype,
-          url: mxcUrl,
-          encInfo: content.file,
-          markedAsSpoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
-          spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
-        })}
+        <ImageContent
+          body={rContent.body(content) ?? 'Image'}
+          info={info}
+          mimeType={rInfo.mimetype(info)}
+          url={mxcUrl}
+          encInfo={rContent.file(content)}
+          autoPlay={mediaAutoLoad}
+          markedAsSpoiler={rContent.spoiler(content)}
+          spoilerReason={rContent.spoilerReason(content)}
+        />
       </AttachmentBox>
     </Attachment>
   );
 }
 
-type RenderVideoContentProps = {
-  body: string;
-  info: IVideoInfo & IThumbnailContent;
-  mimeType: string;
-  url: string;
-  encInfo?: IEncryptedFile;
-  markedAsSpoiler?: boolean;
-  spoilerReason?: string;
-};
-type MVideoProps = {
-  content: IVideoContent;
-  renderAsFile: () => ReactNode;
-  renderVideoContent: (props: RenderVideoContentProps) => ReactNode;
+type MFileProps = {
+  content: object;
   outlined?: boolean;
 };
-export function MVideo({ content, renderAsFile, renderVideoContent, outlined }: MVideoProps) {
-  const videoInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
-  const safeMimeType = getBlobSafeMimeType(videoInfo?.mimetype ?? '');
+export function MFile({ content, outlined }: MFileProps) {
+  const fileInfo = rContent.info(content);
+  const mxcUrl = rEncryptedFile.url(rContent.file(content)) ?? rContent.url(content);
 
-  if (!videoInfo || !safeMimeType.startsWith('video') || typeof mxcUrl !== 'string') {
-    if (mxcUrl) {
-      return renderAsFile();
-    }
+  if (typeof mxcUrl !== 'string') {
     return <BrokenContent />;
   }
 
-  const height = scaleYDimension(videoInfo.w || 400, 400, videoInfo.h || 400);
-
-  const filename = content.filename ?? content.body ?? 'Video';
+  const body = rContent.filename(content) ?? rContent.body(content) ?? 'Unnamed File';
+  const mimeType = rInfo.mimetype(fileInfo) ?? FALLBACK_MIMETYPE;
 
   return (
     <Attachment outlined={outlined}>
       <AttachmentHeader>
-        <FileHeader
-          body={filename}
-          mimeType={safeMimeType}
-          after={
-            <FileDownloadButton
-              filename={filename}
-              url={mxcUrl}
-              mimeType={safeMimeType}
-              encInfo={content.file}
-            />
-          }
-        />
-      </AttachmentHeader>
-      <AttachmentBox
-        style={{
-          height: toRem(height < 48 ? 48 : height),
-        }}
-      >
-        {renderVideoContent({
-          body: content.body || 'Video',
-          info: videoInfo,
-          mimeType: safeMimeType,
-          url: mxcUrl,
-          encInfo: content.file,
-          markedAsSpoiler: content[MATRIX_SPOILER_PROPERTY_NAME],
-          spoilerReason: content[MATRIX_SPOILER_REASON_PROPERTY_NAME],
-        })}
-      </AttachmentBox>
-    </Attachment>
-  );
-}
-
-type RenderAudioContentProps = {
-  info: IAudioInfo;
-  mimeType: string;
-  url: string;
-  encInfo?: IEncryptedFile;
-};
-type MAudioProps = {
-  content: IAudioContent;
-  renderAsFile: () => ReactNode;
-  renderAudioContent: (props: RenderAudioContentProps) => ReactNode;
-  outlined?: boolean;
-};
-export function MAudio({ content, renderAsFile, renderAudioContent, outlined }: MAudioProps) {
-  const audioInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
-  const safeMimeType = getBlobSafeMimeType(audioInfo?.mimetype ?? '');
-
-  if (!audioInfo || !safeMimeType.startsWith('audio') || typeof mxcUrl !== 'string') {
-    if (mxcUrl) {
-      return renderAsFile();
-    }
-    return <BrokenContent />;
-  }
-
-  const filename = content.filename ?? content.body ?? 'Audio';
-  return (
-    <Attachment outlined={outlined}>
-      <AttachmentHeader>
-        <FileHeader
-          body={filename}
-          mimeType={safeMimeType}
-          after={
-            <FileDownloadButton
-              filename={filename}
-              url={mxcUrl}
-              mimeType={safeMimeType}
-              encInfo={content.file}
-            />
-          }
-        />
+        <FileHeader body={body} mimeType={mimeType} />
       </AttachmentHeader>
       <AttachmentBox>
         <AttachmentContent>
-          {renderAudioContent({
-            info: audioInfo,
-            mimeType: safeMimeType,
-            url: mxcUrl,
-            encInfo: content.file,
-          })}
+          <FileContent
+            body={body}
+            mimeType={mimeType}
+            info={fileInfo ?? {}}
+            url={mxcUrl}
+            encInfo={rContent.file(content)}
+          />
         </AttachmentContent>
       </AttachmentBox>
     </Attachment>
   );
 }
 
-type RenderFileContentProps = {
-  body: string;
-  info: IFileInfo & IThumbnailContent;
-  mimeType: string;
-  url: string;
-  encInfo?: IEncryptedFile;
-};
-type MFileProps = {
-  content: IFileContent;
-  renderFileContent: (props: RenderFileContentProps) => ReactNode;
+type MVideoProps = {
+  content: object;
+  mediaAutoLoad?: boolean;
   outlined?: boolean;
 };
-export function MFile({ content, renderFileContent, outlined }: MFileProps) {
-  const fileInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
+export function MVideo({ content, mediaAutoLoad, outlined }: MVideoProps) {
+  const videoInfo = rContent.info(content);
+  const mxcUrl = rEncryptedFile.url(rContent.file) ?? rContent.url(content);
+  const safeMimeType = getBlobSafeMimeType(rInfo.mimetype(videoInfo) ?? '');
 
-  if (typeof mxcUrl !== 'string') {
+  if (!videoInfo || !safeMimeType.startsWith('video') || typeof mxcUrl !== 'string') {
+    if (mxcUrl) {
+      return <MFile content={content} outlined={outlined} />;
+    }
     return <BrokenContent />;
   }
 
+  const height = scaleYDimension(rInfo.w(videoInfo) || 400, 400, rInfo.h(videoInfo) || 400);
+
+  const filename = rContent.filename(content) ?? rContent.body(content) ?? 'Video';
+
   return (
     <Attachment outlined={outlined}>
       <AttachmentHeader>
         <FileHeader
-          body={content.filename ?? content.body ?? 'Unnamed File'}
-          mimeType={fileInfo?.mimetype ?? FALLBACK_MIMETYPE}
+          body={filename}
+          mimeType={safeMimeType}
+          after={
+            <FileDownloadButton
+              filename={filename}
+              url={mxcUrl}
+              mimeType={safeMimeType}
+              encInfo={rContent.file(content)}
+            />
+          }
+        />
+      </AttachmentHeader>
+      <AttachmentBox
+        style={{
+          height: toRem(height < 48 ? 48 : height),
+        }}
+      >
+        <VideoContent
+          body={rContent.body(content) || 'Video'}
+          info={videoInfo}
+          mimeType={safeMimeType}
+          url={mxcUrl}
+          encInfo={rContent.file(content)}
+          mediaAutoLoad={mediaAutoLoad}
+          markedAsSpoiler={rContent.spoiler(content)}
+          spoilerReason={rContent.spoilerReason(content)}
+        />
+      </AttachmentBox>
+    </Attachment>
+  );
+}
+
+type MAudioProps = {
+  content: object;
+  outlined?: boolean;
+};
+export function MAudio({ content, outlined }: MAudioProps) {
+  const audioInfo = rContent.info(content);
+  const mxcUrl = rEncryptedFile.url(rContent.file(content)) ?? rContent.url(content);
+  const safeMimeType = getBlobSafeMimeType(rInfo.mimetype(audioInfo) ?? '');
+
+  if (!audioInfo || !safeMimeType.startsWith('audio') || typeof mxcUrl !== 'string') {
+    if (mxcUrl) {
+      return <MFile content={content} outlined={outlined} />;
+    }
+    return <BrokenContent />;
+  }
+
+  const filename = rContent.filename(content) ?? rContent.body(content) ?? 'Audio';
+  return (
+    <Attachment outlined={outlined}>
+      <AttachmentHeader>
+        <FileHeader
+          body={filename}
+          mimeType={safeMimeType}
+          after={
+            <FileDownloadButton
+              filename={filename}
+              url={mxcUrl}
+              mimeType={safeMimeType}
+              encInfo={rContent.file(content)}
+            />
+          }
         />
       </AttachmentHeader>
       <AttachmentBox>
         <AttachmentContent>
-          {renderFileContent({
-            body: content.filename ?? content.body ?? 'File',
-            info: fileInfo ?? {},
-            mimeType: fileInfo?.mimetype ?? FALLBACK_MIMETYPE,
-            url: mxcUrl,
-            encInfo: content.file,
-          })}
+          <AudioContent
+            info={audioInfo}
+            mimeType={safeMimeType}
+            url={mxcUrl}
+            encInfo={rContent.file(content)}
+          />
         </AttachmentContent>
       </AttachmentBox>
     </Attachment>
@@ -383,11 +399,11 @@ export function MFile({ content, renderFileContent, outlined }: MFileProps) {
 }
 
 type MLocationProps = {
-  content: IContent;
+  content: object;
 };
 export function MLocation({ content }: MLocationProps) {
-  const geoUri = content.geo_uri;
-  if (typeof geoUri !== 'string') return <BrokenContent />;
+  const geoUri = rContent.geoUri(content);
+  if (!geoUri) return <BrokenContent />;
   const location = parseGeoUri(geoUri);
   return (
     <Box direction="Column" alignItems="Start" gap="100">
@@ -409,16 +425,18 @@ export function MLocation({ content }: MLocationProps) {
 }
 
 type MStickerProps = {
-  content: IImageContent;
-  renderImageContent: (props: RenderImageContentProps) => ReactNode;
+  content: object;
+  mediaAutoLoad?: boolean;
+  outlineAttachment?: boolean;
 };
-export function MSticker({ content, renderImageContent }: MStickerProps) {
-  const imgInfo = content?.info;
-  const mxcUrl = content.file?.url ?? content.url;
+export function MSticker({ content, mediaAutoLoad, outlineAttachment }: MStickerProps) {
+  const imgInfo = rContent.info(content);
+  const mxcUrl = rEncryptedFile.url(rContent.file(content)) ?? rContent.url(content);
+
   if (typeof mxcUrl !== 'string') {
     return <MessageBrokenContent />;
   }
-  const height = scaleYDimension(imgInfo?.w || 152, 152, imgInfo?.h || 152);
+  const height = scaleYDimension(rInfo.w(imgInfo) || 152, 152, rInfo.h(imgInfo) || 152);
 
   return (
     <AttachmentBox
@@ -427,13 +445,7 @@ export function MSticker({ content, renderImageContent }: MStickerProps) {
         width: toRem(152),
       }}
     >
-      {renderImageContent({
-        body: content.body || 'Sticker',
-        info: imgInfo,
-        mimeType: imgInfo?.mimetype,
-        url: mxcUrl,
-        encInfo: content.file,
-      })}
+      <MImage content={content} mediaAutoLoad={mediaAutoLoad} outlined={outlineAttachment} />
     </AttachmentBox>
   );
 }
diff --git a/src/app/components/message/Reaction.tsx b/src/app/components/message/Reaction.tsx
index 93180e40..ebce3dd4 100644
--- a/src/app/components/message/Reaction.tsx
+++ b/src/app/components/message/Reaction.tsx
@@ -1,21 +1,21 @@
 import React from 'react';
 import { Box, Text, as } from 'folds';
 import classNames from 'classnames';
-import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
 import * as css from './Reaction.css';
 import { getHexcodeForEmoji, getShortcodeFor } from '../../plugins/emoji';
-import { getMemberDisplayName } from '../../utils/room';
-import { eventWithShortcode, getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { ClientContext } from '../../../client/context';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 export const Reaction = as<
   'button',
   {
-    mx: MatrixClient;
+    ct: ClientContext;
     count: number;
     reaction: string;
     useAuthentication?: boolean;
   }
->(({ className, mx, count, reaction, useAuthentication, ...props }, ref) => (
+>(({ className, ct, count, reaction, useAuthentication, ...props }, ref) => (
   <Box
     as="button"
     className={classNames(css.Reaction, className)}
@@ -29,8 +29,7 @@ export const Reaction = as<
       {reaction.startsWith('mxc://') ? (
         <img
           className={css.ReactionImg}
-          src={mxcUrlToHttp(mx, reaction, useAuthentication) ?? reaction
-          }
+          src={mxcToHttp(ct.session.baseUrl, reaction, useAuthentication).url() ?? reaction}
           alt={reaction}
         />
       ) : (
@@ -46,23 +45,15 @@ export const Reaction = as<
 ));
 
 type ReactionTooltipMsgProps = {
-  room: Room;
   reaction: string;
-  events: MatrixEvent[];
+  shortcode?: string;
+  users: string[];
 };
 
-export function ReactionTooltipMsg({ room, reaction, events }: ReactionTooltipMsgProps) {
-  const shortCodeEvt = events.find(eventWithShortcode);
-  const shortcode =
-    shortCodeEvt?.getContent().shortcode ??
-    getShortcodeFor(getHexcodeForEmoji(reaction)) ??
-    reaction;
-  const names = events.map(
-    (ev: MatrixEvent) =>
-      getMemberDisplayName(room, ev.getSender() ?? 'Unknown') ??
-      getMxIdLocalPart(ev.getSender() ?? 'Unknown') ??
-      'Unknown'
-  );
+export function ReactionTooltipMsg({ reaction, shortcode, users }: ReactionTooltipMsgProps) {
+  const memberAPI = useRoomMembersAPI();
+  const label = shortcode ?? getShortcodeFor(getHexcodeForEmoji(reaction)) ?? reaction;
+  const names = users.map((userId) => memberAPI.getName(userId));
 
   return (
     <>
@@ -109,7 +100,7 @@ export function ReactionTooltipMsg({ room, reaction, events }: ReactionTooltipMs
       <Text as="span" size="Inherit" priority="300">
         {' reacted with '}
       </Text>
-      :<b>{shortcode}</b>:
+      :<b>{label}</b>:
     </>
   );
 }
diff --git a/src/app/components/message/RenderBody.tsx b/src/app/components/message/RenderBody.tsx
index 6db9ee48..d48c92a6 100644
--- a/src/app/components/message/RenderBody.tsx
+++ b/src/app/components/message/RenderBody.tsx
@@ -1,15 +1,31 @@
 import React from 'react';
 import parse, { HTMLReactParserOptions } from 'html-react-parser';
 import Linkify from 'linkify-react';
+import { Chip, Text } from 'folds';
 import { Opts } from 'linkifyjs';
 import { MessageEmptyContent } from './content';
 import { sanitizeCustomHtml } from '../../utils/sanitize';
 import { highlightText, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
 
+export function shouldTruncate(
+  body: string,
+  customBody?: string,
+  maxLines = 15,
+  charPerLine = 100
+) {
+  // Count text characters (strip HTML tags)
+  const text = customBody?.replace(/<[^>]+>/g, '') || body;
+
+  const newlines = (body.match(/\n/g) || []).length;
+
+  return text.length > maxLines * charPerLine || newlines > maxLines;
+}
+
+const NEXT_LINE_ONLY_REGEX = /^\n+$/;
+
 type RenderBodyProps = {
   body: string;
   customBody?: string;
-
   highlightRegex?: RegExp;
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: Opts;
@@ -21,9 +37,9 @@ export function RenderBody({
   htmlReactParserOptions,
   linkifyOpts,
 }: RenderBodyProps) {
-  if (body === '') <MessageEmptyContent />;
-  if (customBody) {
-    if (customBody === '') <MessageEmptyContent />;
+  if (body === '' || NEXT_LINE_ONLY_REGEX.test(body)) return <MessageEmptyContent />;
+  if (typeof customBody === 'string') {
+    if (customBody === '') return <MessageEmptyContent />;
     return parse(sanitizeCustomHtml(customBody), htmlReactParserOptions);
   }
   return (
@@ -34,3 +50,30 @@ export function RenderBody({
     </Linkify>
   );
 }
+
+export function ViewMoreLessButton({
+  collapsed,
+  onToggle,
+}: {
+  collapsed: boolean;
+  onToggle: () => void;
+}) {
+  return (
+    <Chip
+      type="button"
+      variant="Primary"
+      fill="Soft"
+      radii="300"
+      onClick={onToggle}
+      outlined
+      style={{
+        position: collapsed ? 'sticky' : 'initial',
+        bottom: '0',
+        borderBottomLeftRadius: collapsed ? 0 : undefined,
+        borderBottomRightRadius: collapsed ? 0 : undefined,
+      }}
+    >
+      <Text size="L400">{collapsed ? 'View More' : 'View Less'}</Text>
+    </Chip>
+  );
+}
diff --git a/src/app/components/message/Reply.css.ts b/src/app/components/message/Reply.css.ts
index 7e5540fd..94394f88 100644
--- a/src/app/components/message/Reply.css.ts
+++ b/src/app/components/message/Reply.css.ts
@@ -1,41 +1,15 @@
 import { style } from '@vanilla-extract/css';
-import { config, toRem } from 'folds';
+import { color, config, toRem } from 'folds';
 
-export const ReplyBend = style({
-  flexShrink: 0,
-});
-
-export const ThreadIndicator = style({
-  opacity: config.opacity.P300,
-
-  selectors: {
-    'button&': {
-      cursor: 'pointer',
-    },
-    ':hover&': {
-      opacity: config.opacity.P500,
-    },
-  },
-});
-
-export const Reply = style({
-  marginBottom: toRem(1),
-  minWidth: 0,
-  maxWidth: '100%',
-  minHeight: config.lineHeight.T300,
-  selectors: {
-    'button&': {
-      cursor: 'pointer',
-    },
-  },
-});
-
-export const ReplyContent = style({
-  opacity: config.opacity.P300,
-
-  selectors: {
-    [`${Reply}:hover &`]: {
-      opacity: config.opacity.P500,
-    },
-  },
+export const ReplyBar = style({
+  position: 'relative',
+  top: toRem(8),
+  marginLeft: 'auto',
+
+  width: toRem(19),
+  height: `calc(100% - ${toRem(8)})`,
+
+  borderLeft: `${config.borderWidth.B500} solid ${color.Surface.ContainerLine}`,
+  borderTop: `${config.borderWidth.B500} solid ${color.Surface.ContainerLine}`,
+  borderTopLeftRadius: config.radii.R400,
 });
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 57bf2af9..d0a99a8d 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -1,138 +1,175 @@
-import { Box, Icon, Icons, Text, as, color, toRem } from 'folds';
-import { EventTimelineSet, Room } from 'matrix-js-sdk';
+import { Box, Text, color, toRem } from 'folds';
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
-import classNames from 'classnames';
-import { getMemberDisplayName, trimReplyFromBody } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { Opts } from 'linkifyjs';
 import { LinePlaceholder } from './placeholder';
 import { randomNumberBetween } from '../../utils/common';
 import * as css from './Reply.css';
-import { MessageBadEncryptedContent, MessageDeletedContent, MessageFailedContent } from './content';
-import { scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
+import { MessageBadEncryptedContent } from './content';
 import { useRoomEvent } from '../../hooks/useRoomEvent';
 import colorMXID from '../../../util/colorMXID';
 import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
+import { GetRoomMemberNameCallback } from '../../hooks/useRoomMembers';
+import { rUnsigned } from '../../../client/reader';
+import { TimelineView } from '../../../client/room';
+import { RenderMessageContent } from '../RenderMessageContent';
+import { Time } from './Time';
+import { BubbleLayout, CompactLayout, MessageBase, ModernLayout } from './layout';
+import { MessageLayout, MessageSpacing } from '../../state/settings';
 
-type ReplyLayoutProps = {
-  userColor?: string;
+type ReplyMessageProps = {
   username?: ReactNode;
+  time?: ReactNode;
+  messageLayout: MessageLayout;
+  children: ReactNode;
 };
-export const ReplyLayout = as<'div', ReplyLayoutProps>(
-  ({ username, userColor, className, children, ...props }, ref) => (
-    <Box
-      className={classNames(css.Reply, className)}
-      alignItems="Center"
-      gap="100"
-      {...props}
-      ref={ref}
-    >
-      <Box style={{ color: userColor, maxWidth: toRem(200) }} alignItems="Center" shrink="No">
-        <Icon size="100" src={Icons.ReplyArrow} />
-        {username}
-      </Box>
-      <Box grow="Yes" className={css.ReplyContent}>
-        {children}
-      </Box>
-    </Box>
-  )
-);
+export function ReplyMessage({ username, time, messageLayout, children }: ReplyMessageProps) {
+  const msgBarJSX = <div className={css.ReplyBar} />;
 
-export const ThreadIndicator = as<'div'>(({ ...props }, ref) => (
-  <Box
-    shrink="No"
-    className={css.ThreadIndicator}
-    alignItems="Center"
-    gap="100"
-    {...props}
-    ref={ref}
-  >
-    <Icon size="50" src={Icons.Thread} />
-    <Text size="L400">Thread</Text>
-  </Box>
-));
+  if (messageLayout === MessageLayout.Compact) {
+    return (
+      <CompactLayout before={msgBarJSX}>
+        <Box grow="Yes" direction="Column">
+          <Box alignItems="Baseline" shrink="No" gap="200">
+            {username}
+            {time}
+          </Box>
+          {children}
+        </Box>
+      </CompactLayout>
+    );
+  }
+
+  if (messageLayout === MessageLayout.Bubble) {
+    return (
+      <BubbleLayout
+        hideBubble
+        before={msgBarJSX}
+        header={
+          <Box alignItems="Baseline" shrink="No" gap="200">
+            {username}
+            {time}
+          </Box>
+        }
+      >
+        {children}
+      </BubbleLayout>
+    );
+  }
+
+  return (
+    <ModernLayout before={msgBarJSX}>
+      <Box alignItems="Baseline" shrink="No" gap="200">
+        {username}
+        {time}
+      </Box>
+      {children}
+    </ModernLayout>
+  );
+}
 
 type ReplyProps = {
-  room: Room;
-  timelineSet?: EventTimelineSet | undefined;
-  replyEventId: string;
-  threadRootId?: string | undefined;
+  roomId: string;
+  eventId: string;
   onClick?: MouseEventHandler | undefined;
   getMemberPowerTag?: GetMemberPowerTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
+  getMemberName: GetRoomMemberNameCallback;
+  redacted: boolean;
+  timeline?: TimelineView;
+  htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
+  hour24Clock: boolean;
+  messageLayout: MessageLayout;
+  dateFormatString: string;
+  messageSpacing: MessageSpacing;
+  mediaAutoLoad?: boolean;
 };
 
-export const Reply = as<'div', ReplyProps>(
-  (
-    {
-      room,
-      timelineSet,
-      replyEventId,
-      threadRootId,
-      onClick,
-      getMemberPowerTag,
-      accessibleTagColors,
-      legacyUsernameColor,
-      ...props
-    },
-    ref
-  ) => {
-    const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
-    const getFromLocalTimeline = useCallback(
-      () => timelineSet?.findEventById(replyEventId),
-      [timelineSet, replyEventId]
-    );
-    const replyEvent = useRoomEvent(room, replyEventId, getFromLocalTimeline);
+export function Reply({
+  roomId,
+  eventId,
+  onClick,
+  getMemberPowerTag,
+  accessibleTagColors,
+  legacyUsernameColor,
+  getMemberName,
+  redacted,
+  timeline,
+  htmlReactParserOptions,
+  linkifyOpts,
+  hour24Clock,
+  dateFormatString,
+  messageLayout,
+  messageSpacing,
+  mediaAutoLoad,
+}: ReplyProps) {
+  const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
+  const replyEvent = useRoomEvent(
+    roomId,
+    eventId,
+    useCallback(() => timeline?.findEvent(eventId), [timeline, eventId])
+  );
 
-    const { body } = replyEvent?.getContent() ?? {};
-    const sender = replyEvent?.getSender();
-    const powerTag = sender ? getMemberPowerTag?.(sender) : undefined;
-    const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
+  const sender = replyEvent?.sender;
+  const powerTag = sender ? getMemberPowerTag?.(sender) : undefined;
+  const tagColor = powerTag?.color ? accessibleTagColors?.get(powerTag.color) : undefined;
 
-    const usernameColor = legacyUsernameColor ? colorMXID(sender ?? replyEventId) : tagColor;
+  const usernameColor = legacyUsernameColor ? colorMXID(sender ?? eventId) : tagColor;
 
-    const fallbackBody = replyEvent?.isRedacted() ? (
-      <MessageDeletedContent />
-    ) : (
-      <MessageFailedContent />
-    );
-
-    const badEncryption = replyEvent?.getContent().msgtype === 'm.bad.encrypted';
-    const bodyJSX = body ? scaleSystemEmoji(trimReplyFromBody(body)) : fallbackBody;
-
-    return (
-      <Box direction="Row" gap="200" alignItems="Center" {...props} ref={ref}>
-        {threadRootId && (
-          <ThreadIndicator as="button" data-event-id={threadRootId} onClick={onClick} />
-        )}
-        <ReplyLayout
-          as="button"
-          userColor={usernameColor}
-          username={
-            sender && (
-              <Text size="T300" truncate>
-                <b>{getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender)}</b>
-              </Text>
-            )
-          }
-          data-event-id={replyEventId}
-          onClick={onClick}
-        >
-          {replyEvent !== undefined ? (
-            <Text size="T300" truncate>
-              {badEncryption ? <MessageBadEncryptedContent /> : bodyJSX}
+  return (
+    <MessageBase space={messageSpacing}>
+      <ReplyMessage
+        messageLayout={messageLayout}
+        username={
+          sender && (
+            <Text style={{ color: usernameColor }} size="T300" truncate>
+              <b>{getMemberName(sender)}</b>
             </Text>
-          ) : (
-            <LinePlaceholder
-              style={{
-                backgroundColor: color.SurfaceVariant.ContainerActive,
-                width: toRem(placeholderWidth),
-                maxWidth: '100%',
-              }}
+          )
+        }
+        time={
+          replyEvent && (
+            <Time
+              ts={replyEvent.origin_server_ts}
+              dateFormatString={dateFormatString}
+              hour24Clock={hour24Clock}
             />
-          )}
-        </ReplyLayout>
-      </Box>
-    );
-  }
-);
+          )
+        }
+        data-event-id={eventId}
+      >
+        {replyEvent !== undefined ? (
+          <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }} as="div">
+            {replyEvent === null ? (
+              <Text>
+                <MessageBadEncryptedContent />
+              </Text>
+            ) : (
+              <RenderMessageContent
+                displayName={getMemberName(replyEvent.sender)}
+                eventType={replyEvent.type}
+                ts={replyEvent.origin_server_ts}
+                edited={false}
+                content={replyEvent.content}
+                mediaAutoLoad={mediaAutoLoad}
+                htmlReactParserOptions={htmlReactParserOptions}
+                linkifyOpts={linkifyOpts}
+                redacted={redacted || !!rUnsigned.redactedBecause(replyEvent.unsigned)}
+              />
+            )}
+          </Box>
+        ) : (
+          <LinePlaceholder
+            style={{
+              backgroundColor: color.SurfaceVariant.ContainerActive,
+              width: toRem(placeholderWidth),
+              maxWidth: '100%',
+            }}
+          />
+        )}
+      </ReplyMessage>
+    </MessageBase>
+  );
+}
diff --git a/src/app/components/message/content/AudioContent.tsx b/src/app/components/message/content/AudioContent.tsx
index 71551b12..1679a436 100644
--- a/src/app/components/message/content/AudioContent.tsx
+++ b/src/app/components/message/content/AudioContent.tsx
@@ -1,11 +1,9 @@
 /* eslint-disable jsx-a11y/media-has-caption */
-import React, { ReactNode, useCallback, useRef, useState } from 'react';
+import React, { useCallback, useRef, useState } from 'react';
 import { Badge, Chip, Icon, IconButton, Icons, ProgressBar, Spinner, Text, toRem } from 'folds';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { Range } from 'react-range';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { IAudioInfo } from '../../../../types/matrix/common';
 import {
   PlayTimeCallback,
   useMediaLoading,
@@ -16,57 +14,45 @@ import {
 } from '../../../hooks/media';
 import { useThrottle } from '../../../hooks/useThrottle';
 import { secondsToMinutesAndSeconds } from '../../../utils/common';
-import {
-  decryptFile,
-  downloadEncryptedMedia,
-  downloadMedia,
-  mxcUrlToHttp,
-} from '../../../utils/matrix';
+import { decryptFile, downloadEncryptedMedia, downloadMedia } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useClient } from '../../../hooks/useClient';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { rInfo } from '../../../../client/reader';
+import { MediaControl } from '../../media';
 
 const PLAY_TIME_THROTTLE_OPS = {
   wait: 500,
   immediate: true,
 };
 
-type RenderMediaControlProps = {
-  after: ReactNode;
-  leftControl: ReactNode;
-  rightControl: ReactNode;
-  children: ReactNode;
-};
 export type AudioContentProps = {
   mimeType: string;
   url: string;
-  info: IAudioInfo;
-  encInfo?: EncryptedAttachmentInfo;
-  renderMediaControl: (props: RenderMediaControlProps) => ReactNode;
+  info: object;
+  encInfo?: object;
 };
-export function AudioContent({
-  mimeType,
-  url,
-  info,
-  encInfo,
-  renderMediaControl,
-}: AudioContentProps) {
-  const mx = useMatrixClient();
+export function AudioContent({ mimeType, url, info, encInfo }: AudioContentProps) {
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
   const [srcState, loadSrc] = useAsyncCallback(
     useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const mediaUrl = mxcToHttp(ct.session.baseUrl, url, useAuthentication).url() ?? url;
       const fileContent = encInfo
-        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
+            decryptFile(encBuf, mimeType, encInfo as EncryptedAttachmentInfo)
+          )
         : await downloadMedia(mediaUrl);
       return URL.createObjectURL(fileContent);
-    }, [mx, url, useAuthentication, mimeType, encInfo])
+    }, [ct, url, useAuthentication, mimeType, encInfo])
   );
 
   const audioRef = useRef<HTMLAudioElement | null>(null);
 
   const [currentTime, setCurrentTime] = useState(0);
   // duration in seconds. (NOTE: info.duration is in milliseconds)
-  const infoDuration = info.duration ?? 0;
+  const infoDuration = rInfo.duration(info) ?? 0;
   const [duration, setDuration] = useState((infoDuration >= 0 ? infoDuration : 0) / 1000);
 
   const getAudioRef = useCallback(() => audioRef.current, []);
@@ -74,9 +60,9 @@ export function AudioContent({
   const { playing, setPlaying } = useMediaPlay(getAudioRef);
   const { seek } = useMediaSeek(getAudioRef);
   const { volume, mute, setMute, setVolume } = useMediaVolume(getAudioRef);
-  const handlePlayTimeCallback: PlayTimeCallback = useCallback((d, ct) => {
+  const handlePlayTimeCallback: PlayTimeCallback = useCallback((d, cTime) => {
     setDuration(d);
-    setCurrentTime(ct);
+    setCurrentTime(cTime);
   }, []);
   useMediaPlayTimeCallback(
     getAudioRef,
@@ -90,95 +76,25 @@ export function AudioContent({
       loadSrc();
     }
   };
-
-  return renderMediaControl({
-    after: (
-      <Range
-        step={1}
-        min={0}
-        max={duration || 1}
-        values={[currentTime]}
-        onChange={(values) => seek(values[0])}
-        renderTrack={(params) => (
-          <div {...params.props}>
-            {params.children}
-            <ProgressBar
-              as="div"
-              variant="Secondary"
-              size="300"
-              min={0}
-              max={duration}
-              value={currentTime}
-              radii="300"
-            />
-          </div>
-        )}
-        renderThumb={(params) => (
-          <Badge
-            size="300"
-            variant="Secondary"
-            fill="Solid"
-            radii="Pill"
-            outlined
-            {...params.props}
-            style={{
-              ...params.props.style,
-              zIndex: 0,
-            }}
-          />
-        )}
-      />
-    ),
-    leftControl: (
-      <>
-        <Chip
-          onClick={handlePlay}
-          variant="Secondary"
-          radii="300"
-          disabled={srcState.status === AsyncStatus.Loading}
-          before={
-            srcState.status === AsyncStatus.Loading || loading ? (
-              <Spinner variant="Secondary" size="50" />
-            ) : (
-              <Icon src={playing ? Icons.Pause : Icons.Play} size="50" filled={playing} />
-            )
-          }
-        >
-          <Text size="B300">{playing ? 'Pause' : 'Play'}</Text>
-        </Chip>
-
-        <Text size="T200">{`${secondsToMinutesAndSeconds(
-          currentTime
-        )} / ${secondsToMinutesAndSeconds(duration)}`}</Text>
-      </>
-    ),
-    rightControl: (
-      <>
-        <IconButton
-          variant="SurfaceVariant"
-          size="300"
-          radii="Pill"
-          onClick={() => setMute(!mute)}
-          aria-pressed={mute}
-        >
-          <Icon src={mute ? Icons.VolumeMute : Icons.VolumeHigh} size="50" />
-        </IconButton>
+  return (
+    <MediaControl
+      after={
         <Range
-          step={0.1}
+          step={1}
           min={0}
-          max={1}
-          values={[volume]}
-          onChange={(values) => setVolume(values[0])}
+          max={duration || 1}
+          values={[currentTime]}
+          onChange={(values) => seek(values[0])}
           renderTrack={(params) => (
             <div {...params.props}>
               {params.children}
               <ProgressBar
-                style={{ width: toRem(48) }}
+                as="div"
                 variant="Secondary"
                 size="300"
                 min={0}
-                max={1}
-                value={volume}
+                max={duration}
+                value={currentTime}
                 radii="300"
               />
             </div>
@@ -198,12 +114,82 @@ export function AudioContent({
             />
           )}
         />
-      </>
-    ),
-    children: (
+      }
+      leftControl={
+        <>
+          <Chip
+            onClick={handlePlay}
+            variant="Secondary"
+            radii="300"
+            disabled={srcState.status === AsyncStatus.Loading}
+            before={
+              srcState.status === AsyncStatus.Loading || loading ? (
+                <Spinner variant="Secondary" size="50" />
+              ) : (
+                <Icon src={playing ? Icons.Pause : Icons.Play} size="50" filled={playing} />
+              )
+            }
+          >
+            <Text size="B300">{playing ? 'Pause' : 'Play'}</Text>
+          </Chip>
+
+          <Text size="T200">{`${secondsToMinutesAndSeconds(
+            currentTime
+          )} / ${secondsToMinutesAndSeconds(duration)}`}</Text>
+        </>
+      }
+      rightControl={
+        <>
+          <IconButton
+            variant="SurfaceVariant"
+            size="300"
+            radii="Pill"
+            onClick={() => setMute(!mute)}
+            aria-pressed={mute}
+          >
+            <Icon src={mute ? Icons.VolumeMute : Icons.VolumeHigh} size="50" />
+          </IconButton>
+          <Range
+            step={0.1}
+            min={0}
+            max={1}
+            values={[volume]}
+            onChange={(values) => setVolume(values[0])}
+            renderTrack={(params) => (
+              <div {...params.props}>
+                {params.children}
+                <ProgressBar
+                  style={{ width: toRem(48) }}
+                  variant="Secondary"
+                  size="300"
+                  min={0}
+                  max={1}
+                  value={volume}
+                  radii="300"
+                />
+              </div>
+            )}
+            renderThumb={(params) => (
+              <Badge
+                size="300"
+                variant="Secondary"
+                fill="Solid"
+                radii="Pill"
+                outlined
+                {...params.props}
+                style={{
+                  ...params.props.style,
+                  zIndex: 0,
+                }}
+              />
+            )}
+          />
+        </>
+      }
+    >
       <audio controls={false} autoPlay ref={audioRef}>
         {srcState.status === AsyncStatus.Success && <source src={srcState.data} type={mimeType} />}
       </audio>
-    ),
-  });
+    </MediaControl>
+  );
 }
diff --git a/src/app/components/message/content/EventContent.tsx b/src/app/components/message/content/EventContent.tsx
index 130ba8c9..5de2b092 100644
--- a/src/app/components/message/content/EventContent.tsx
+++ b/src/app/components/message/content/EventContent.tsx
@@ -18,7 +18,7 @@ export function EventContent({ messageLayout, time, iconSrc, content }: EventCon
         alignItems="Center"
         justifyContent="Center"
       >
-        <Icon style={{ opacity: 0.6 }} size="50" src={iconSrc} />
+        <Icon size="50" src={iconSrc} />
       </Box>
     </Box>
   );
diff --git a/src/app/components/message/content/FileContent.tsx b/src/app/components/message/content/FileContent.tsx
index ad54c531..a4e55290 100644
--- a/src/app/components/message/content/FileContent.tsx
+++ b/src/app/components/message/content/FileContent.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useState } from 'react';
+import React, { useCallback, useState } from 'react';
 import {
   Box,
   Button,
@@ -12,14 +12,12 @@ import {
   Text,
   Tooltip,
   TooltipProvider,
-  as,
 } from 'folds';
 import FileSaver from 'file-saver';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import FocusTrap from 'focus-trap-react';
 import { IFileInfo } from '../../../../types/matrix/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { bytesToSize } from '../../../utils/common';
 import {
   READABLE_EXT_TO_MIME_TYPE,
@@ -28,14 +26,13 @@ import {
   mimeTypeToExt,
 } from '../../../utils/mimeTypes';
 import { stopPropagation } from '../../../utils/keyboard';
-import {
-  decryptFile,
-  downloadEncryptedMedia,
-  downloadMedia,
-  mxcUrlToHttp,
-} from '../../../utils/matrix';
+import { decryptFile, downloadEncryptedMedia, downloadMedia } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ModalWide } from '../../../styles/Modal.css';
+import { useClient } from '../../../hooks/useClient';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { TextViewer } from '../../text-viewer';
+import { PdfViewer } from '../../Pdf-viewer';
 
 const renderErrorButton = (retry: () => void, text: string) => (
   <TooltipProvider
@@ -66,35 +63,30 @@ const renderErrorButton = (retry: () => void, text: string) => (
   </TooltipProvider>
 );
 
-type RenderTextViewerProps = {
-  name: string;
-  text: string;
-  langName: string;
-  requestClose: () => void;
-};
 type ReadTextFileProps = {
   body: string;
   mimeType: string;
   url: string;
-  encInfo?: EncryptedAttachmentInfo;
-  renderViewer: (props: RenderTextViewerProps) => ReactNode;
+  encInfo?: object;
 };
-export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: ReadTextFileProps) {
-  const mx = useMatrixClient();
+export function ReadTextFile({ body, mimeType, url, encInfo }: ReadTextFileProps) {
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const [textViewer, setTextViewer] = useState(false);
 
   const [textState, loadText] = useAsyncCallback(
     useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const mediaUrl = mxcToHttp(ct.session.baseUrl, url, useAuthentication).url() ?? url;
       const fileContent = encInfo
-        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
+            decryptFile(encBuf, mimeType, encInfo as EncryptedAttachmentInfo)
+          )
         : await downloadMedia(mediaUrl);
 
       const text = fileContent.text();
       setTextViewer(true);
       return text;
-    }, [mx, useAuthentication, mimeType, encInfo, url])
+    }, [ct, useAuthentication, mimeType, encInfo, url])
   );
 
   return (
@@ -115,14 +107,16 @@ export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: Rea
                 size="500"
                 onContextMenu={(evt: any) => evt.stopPropagation()}
               >
-                {renderViewer({
-                  name: body,
-                  text: textState.data,
-                  langName: READABLE_TEXT_MIME_TYPES.includes(mimeType)
-                    ? mimeTypeToExt(mimeType)
-                    : mimeTypeToExt(READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)] ?? mimeType),
-                  requestClose: () => setTextViewer(false),
-                })}
+                <TextViewer
+                  name={body}
+                  text={textState.data}
+                  langName={
+                    READABLE_TEXT_MIME_TYPES.includes(mimeType)
+                      ? mimeTypeToExt(mimeType)
+                      : mimeTypeToExt(READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)] ?? mimeType)
+                  }
+                  requestClose={() => setTextViewer(false)}
+                />
               </Modal>
             </FocusTrap>
           </OverlayCenter>
@@ -157,32 +151,28 @@ export function ReadTextFile({ body, mimeType, url, encInfo, renderViewer }: Rea
   );
 }
 
-type RenderPdfViewerProps = {
-  name: string;
-  src: string;
-  requestClose: () => void;
-};
 export type ReadPdfFileProps = {
   body: string;
   mimeType: string;
   url: string;
-  encInfo?: EncryptedAttachmentInfo;
-  renderViewer: (props: RenderPdfViewerProps) => ReactNode;
+  encInfo?: object;
 };
-export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: ReadPdfFileProps) {
-  const mx = useMatrixClient();
+export function ReadPdfFile({ body, mimeType, url, encInfo }: ReadPdfFileProps) {
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const [pdfViewer, setPdfViewer] = useState(false);
 
   const [pdfState, loadPdf] = useAsyncCallback(
     useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const mediaUrl = mxcToHttp(ct.session.baseUrl, url, useAuthentication).url() ?? url;
       const fileContent = encInfo
-        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
+            decryptFile(encBuf, mimeType, encInfo as EncryptedAttachmentInfo)
+          )
         : await downloadMedia(mediaUrl);
       setPdfViewer(true);
       return URL.createObjectURL(fileContent);
-    }, [mx, url, useAuthentication, mimeType, encInfo])
+    }, [ct, url, useAuthentication, mimeType, encInfo])
   );
 
   return (
@@ -203,11 +193,11 @@ export function ReadPdfFile({ body, mimeType, url, encInfo, renderViewer }: Read
                 size="500"
                 onContextMenu={(evt: any) => evt.stopPropagation()}
               >
-                {renderViewer({
-                  name: body,
-                  src: pdfState.data,
-                  requestClose: () => setPdfViewer(false),
-                })}
+                <PdfViewer
+                  name={body}
+                  src={pdfState.data}
+                  requestClose={() => setPdfViewer(false)}
+                />
               </Modal>
             </FocusTrap>
           </OverlayCenter>
@@ -245,23 +235,25 @@ export type DownloadFileProps = {
   mimeType: string;
   url: string;
   info: IFileInfo;
-  encInfo?: EncryptedAttachmentInfo;
+  encInfo?: object;
 };
 export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFileProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
   const [downloadState, download] = useAsyncCallback(
     useCallback(async () => {
-      const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+      const mediaUrl = mxcToHttp(ct.session.baseUrl, url, useAuthentication).url() ?? url;
       const fileContent = encInfo
-        ? await downloadEncryptedMedia(mediaUrl, (encBuf) => decryptFile(encBuf, mimeType, encInfo))
+        ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
+            decryptFile(encBuf, mimeType, encInfo as EncryptedAttachmentInfo)
+          )
         : await downloadMedia(mediaUrl);
 
       const fileURL = URL.createObjectURL(fileContent);
       FileSaver.saveAs(fileURL, body);
       return fileURL;
-    }, [mx, url, useAuthentication, mimeType, encInfo, body])
+    }, [ct, url, useAuthentication, mimeType, encInfo, body])
   );
 
   return downloadState.status === AsyncStatus.Error ? (
@@ -294,17 +286,21 @@ export function DownloadFile({ body, mimeType, url, info, encInfo }: DownloadFil
 type FileContentProps = {
   body: string;
   mimeType: string;
-  renderAsTextFile: () => ReactNode;
-  renderAsPdfFile: () => ReactNode;
+  info: object;
+  url: string;
+  encInfo?: object;
 };
-export const FileContent = as<'div', FileContentProps>(
-  ({ body, mimeType, renderAsTextFile, renderAsPdfFile, children, ...props }, ref) => (
-    <Box direction="Column" gap="300" {...props} ref={ref}>
+export function FileContent({ body, mimeType, info, url, encInfo }: FileContentProps) {
+  return (
+    <Box direction="Column" gap="300">
       {(READABLE_TEXT_MIME_TYPES.includes(mimeType) ||
-        READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)]) &&
-        renderAsTextFile()}
-      {mimeType === 'application/pdf' && renderAsPdfFile()}
-      {children}
+        READABLE_EXT_TO_MIME_TYPE[getFileNameExt(body)]) && (
+        <ReadTextFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} />
+      )}
+      {mimeType === 'application/pdf' && (
+        <ReadPdfFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} />
+      )}
+      <DownloadFile body={body} mimeType={mimeType} url={url} encInfo={encInfo} info={info} />
     </Box>
-  )
-);
+  );
+}
diff --git a/src/app/components/message/content/ImageContent.tsx b/src/app/components/message/content/ImageContent.tsx
index 84e3709e..919fb7f8 100644
--- a/src/app/components/message/content/ImageContent.tsx
+++ b/src/app/components/message/content/ImageContent.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Badge,
   Box,
@@ -22,41 +22,28 @@ import FocusTrap from 'focus-trap-react';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { IImageInfo, MATRIX_BLUR_HASH_PROPERTY_NAME } from '../../../../types/matrix/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import * as css from './style.css';
 import { bytesToSize } from '../../../utils/common';
 import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
 import { stopPropagation } from '../../../utils/keyboard';
-import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
+import { decryptFile, downloadEncryptedMedia } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { ModalWide } from '../../../styles/Modal.css';
 import { validBlurHash } from '../../../utils/blurHash';
+import { useClient } from '../../../hooks/useClient';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { Image } from '../../media';
+import { ImageViewer } from '../../image-viewer';
 
-type RenderViewerProps = {
-  src: string;
-  alt: string;
-  requestClose: () => void;
-};
-type RenderImageProps = {
-  alt: string;
-  title: string;
-  src: string;
-  onLoad: () => void;
-  onError: () => void;
-  onClick: () => void;
-  tabIndex: number;
-};
 export type ImageContentProps = {
   body: string;
   mimeType?: string;
   url: string;
   info?: IImageInfo;
-  encInfo?: EncryptedAttachmentInfo;
+  encInfo?: object;
   autoPlay?: boolean;
   markedAsSpoiler?: boolean;
   spoilerReason?: string;
-  renderViewer: (props: RenderViewerProps) => ReactNode;
-  renderImage: (props: RenderImageProps) => ReactNode;
 };
 export const ImageContent = as<'div', ImageContentProps>(
   (
@@ -70,13 +57,11 @@ export const ImageContent = as<'div', ImageContentProps>(
       autoPlay,
       markedAsSpoiler,
       spoilerReason,
-      renderViewer,
-      renderImage,
       ...props
     },
     ref
   ) => {
-    const mx = useMatrixClient();
+    const ct = useClient();
     const useAuthentication = useMediaAuthentication();
     const blurHash = validBlurHash(info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
 
@@ -87,15 +72,15 @@ export const ImageContent = as<'div', ImageContentProps>(
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
-        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+        const mediaUrl = mxcToHttp(ct.session.baseUrl, url, useAuthentication).url() ?? url;
         if (encInfo) {
           const fileContent = await downloadEncryptedMedia(mediaUrl, (encBuf) =>
-            decryptFile(encBuf, mimeType ?? FALLBACK_MIMETYPE, encInfo)
+            decryptFile(encBuf, mimeType ?? FALLBACK_MIMETYPE, encInfo as EncryptedAttachmentInfo)
           );
           return URL.createObjectURL(fileContent);
         }
         return mediaUrl;
-      }, [mx, url, useAuthentication, mimeType, encInfo])
+      }, [ct, url, useAuthentication, mimeType, encInfo])
     );
 
     const handleLoad = () => {
@@ -133,11 +118,11 @@ export const ImageContent = as<'div', ImageContentProps>(
                   size="500"
                   onContextMenu={(evt: any) => evt.stopPropagation()}
                 >
-                  {renderViewer({
-                    src: srcState.data,
-                    alt: body,
-                    requestClose: () => setViewer(false),
-                  })}
+                  <ImageViewer
+                    src={srcState.data}
+                    alt={body}
+                    requestClose={() => setViewer(false)}
+                  />
                 </Modal>
               </FocusTrap>
             </OverlayCenter>
@@ -168,15 +153,16 @@ export const ImageContent = as<'div', ImageContentProps>(
         )}
         {srcState.status === AsyncStatus.Success && (
           <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
-            {renderImage({
-              alt: body,
-              title: body,
-              src: srcState.data,
-              onLoad: handleLoad,
-              onError: handleError,
-              onClick: () => setViewer(true),
-              tabIndex: 0,
-            })}
+            <Image
+              alt={body}
+              title={body}
+              src={srcState.data}
+              onLoad={handleLoad}
+              onError={handleError}
+              onClick={() => setViewer(true)}
+              tabIndex={0}
+              loading="lazy"
+            />
           </Box>
         )}
         {blurred && !error && srcState.status !== AsyncStatus.Error && (
diff --git a/src/app/components/message/content/ThumbnailContent.tsx b/src/app/components/message/content/ThumbnailContent.tsx
index 0746137c..25d86b3d 100644
--- a/src/app/components/message/content/ThumbnailContent.tsx
+++ b/src/app/components/message/content/ThumbnailContent.tsx
@@ -1,43 +1,50 @@
-import { ReactNode, useCallback, useEffect } from 'react';
-import { IThumbnailContent } from '../../../../types/matrix/common';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import React, { useCallback, useEffect } from 'react';
+import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { decryptFile, downloadEncryptedMedia, mxcUrlToHttp } from '../../../utils/matrix';
+import { decryptFile, downloadEncryptedMedia } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { FALLBACK_MIMETYPE } from '../../../utils/mimeTypes';
+import { rEncryptedFile, rInfo, rThumbnailInfo } from '../../../../client/reader';
+import { Image } from '../../media';
+import { useClient } from '../../../hooks/useClient';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
 
 export type ThumbnailContentProps = {
-  info: IThumbnailContent;
-  renderImage: (src: string) => ReactNode;
+  info: object;
 };
-export function ThumbnailContent({ info, renderImage }: ThumbnailContentProps) {
-  const mx = useMatrixClient();
+export function ThumbnailContent({ info }: ThumbnailContentProps) {
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
   const [thumbSrcState, loadThumbSrc] = useAsyncCallback(
     useCallback(async () => {
-      const thumbInfo = info.thumbnail_info;
-      const thumbMxcUrl = info.thumbnail_file?.url ?? info.thumbnail_url;
-      const encInfo = info.thumbnail_file;
-      if (typeof thumbMxcUrl !== 'string' || typeof thumbInfo?.mimetype !== 'string') {
+      const thumbInfo = rInfo.thumbnailInfo(info);
+      const encInfo = rInfo.thumbnailFile(info);
+      const thumbMxcUrl = rEncryptedFile.url(encInfo) ?? rInfo.thumbnailUrl(info);
+      const mimeType = rThumbnailInfo.mimetype(thumbInfo);
+
+      if (typeof thumbMxcUrl !== 'string' || typeof mimeType !== 'string') {
         throw new Error('Failed to load thumbnail');
       }
 
-      const mediaUrl = mxcUrlToHttp(mx, thumbMxcUrl, useAuthentication) ?? thumbMxcUrl;
+      const mediaUrl =
+        mxcToHttp(ct.session.baseUrl, thumbMxcUrl, useAuthentication).url() ?? thumbMxcUrl;
       if (encInfo) {
         const fileContent = await downloadEncryptedMedia(mediaUrl, (encBuf) =>
-          decryptFile(encBuf, thumbInfo.mimetype ?? FALLBACK_MIMETYPE, encInfo)
+          decryptFile(encBuf, mimeType ?? FALLBACK_MIMETYPE, encInfo as EncryptedAttachmentInfo)
         );
         return URL.createObjectURL(fileContent);
       }
 
       return mediaUrl;
-    }, [mx, info, useAuthentication])
+    }, [ct, info, useAuthentication])
   );
 
   useEffect(() => {
     loadThumbSrc();
   }, [loadThumbSrc]);
 
-  return thumbSrcState.status === AsyncStatus.Success ? renderImage(thumbSrcState.data) : null;
+  return thumbSrcState.status === AsyncStatus.Success ? (
+    <Image alt="Thumbnail" title="Thumbnail" src={thumbSrcState.data} loading="lazy" />
+  ) : null;
 }
diff --git a/src/app/components/message/content/VideoContent.tsx b/src/app/components/message/content/VideoContent.tsx
index 52073ac1..62047a0c 100644
--- a/src/app/components/message/content/VideoContent.tsx
+++ b/src/app/components/message/content/VideoContent.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import {
   Badge,
   Box,
@@ -15,43 +15,28 @@ import {
 import classNames from 'classnames';
 import { BlurhashCanvas } from 'react-blurhash';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
-import {
-  IThumbnailContent,
-  IVideoInfo,
-  MATRIX_BLUR_HASH_PROPERTY_NAME,
-} from '../../../../types/matrix/common';
 import * as css from './style.css';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { bytesToSize, millisecondsToMinutesAndSeconds } from '../../../utils/common';
-import {
-  decryptFile,
-  downloadEncryptedMedia,
-  downloadMedia,
-  mxcUrlToHttp,
-} from '../../../utils/matrix';
+import { decryptFile, downloadEncryptedMedia, downloadMedia } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { validBlurHash } from '../../../utils/blurHash';
+import { useClient } from '../../../hooks/useClient';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { Video } from '../../media';
+import { rInfo, rThumbnailInfo } from '../../../../client/reader';
+import { ThumbnailContent } from './ThumbnailContent';
 
-type RenderVideoProps = {
-  title: string;
-  src: string;
-  onLoadedMetadata: () => void;
-  onError: () => void;
-  autoPlay: boolean;
-  controls: boolean;
-};
 type VideoContentProps = {
   body: string;
   mimeType: string;
   url: string;
-  info: IVideoInfo & IThumbnailContent;
-  encInfo?: EncryptedAttachmentInfo;
+  info: object;
+  encInfo?: object;
   autoPlay?: boolean;
+  mediaAutoLoad?: boolean;
   markedAsSpoiler?: boolean;
   spoilerReason?: string;
-  renderThumbnail?: () => ReactNode;
-  renderVideo: (props: RenderVideoProps) => ReactNode;
 };
 export const VideoContent = as<'div', VideoContentProps>(
   (
@@ -63,17 +48,20 @@ export const VideoContent = as<'div', VideoContentProps>(
       info,
       encInfo,
       autoPlay,
+      mediaAutoLoad,
       markedAsSpoiler,
       spoilerReason,
-      renderThumbnail,
-      renderVideo,
       ...props
     },
     ref
   ) => {
-    const mx = useMatrixClient();
+    const ct = useClient();
     const useAuthentication = useMediaAuthentication();
-    const blurHash = validBlurHash(info.thumbnail_info?.[MATRIX_BLUR_HASH_PROPERTY_NAME]);
+    const thumbnailInfo = rInfo.thumbnailInfo(info);
+    const blurHash = validBlurHash(rThumbnailInfo.blurhash(thumbnailInfo));
+
+    const size = rInfo.size(info);
+    const duration = rInfo.duration(info);
 
     const [load, setLoad] = useState(false);
     const [error, setError] = useState(false);
@@ -81,14 +69,14 @@ export const VideoContent = as<'div', VideoContentProps>(
 
     const [srcState, loadSrc] = useAsyncCallback(
       useCallback(async () => {
-        const mediaUrl = mxcUrlToHttp(mx, url, useAuthentication) ?? url;
+        const mediaUrl = mxcToHttp(ct.session.baseUrl, url, useAuthentication).url() ?? url;
         const fileContent = encInfo
           ? await downloadEncryptedMedia(mediaUrl, (encBuf) =>
-              decryptFile(encBuf, mimeType, encInfo)
+              decryptFile(encBuf, mimeType, encInfo as EncryptedAttachmentInfo)
             )
           : await downloadMedia(mediaUrl);
         return URL.createObjectURL(fileContent);
-      }, [mx, url, useAuthentication, mimeType, encInfo])
+      }, [ct, url, useAuthentication, mimeType, encInfo])
     );
 
     const handleLoad = () => {
@@ -119,13 +107,13 @@ export const VideoContent = as<'div', VideoContentProps>(
             punch={1}
           />
         )}
-        {renderThumbnail && !load && (
+        {mediaAutoLoad && !load && (
           <Box
             className={classNames(css.AbsoluteContainer, blurred && css.Blur)}
             alignItems="Center"
             justifyContent="Center"
           >
-            {renderThumbnail()}
+            <ThumbnailContent info={info} />
           </Box>
         )}
         {!autoPlay && !blurred && srcState.status === AsyncStatus.Idle && (
@@ -144,14 +132,14 @@ export const VideoContent = as<'div', VideoContentProps>(
         )}
         {srcState.status === AsyncStatus.Success && (
           <Box className={classNames(css.AbsoluteContainer, blurred && css.Blur)}>
-            {renderVideo({
-              title: body,
-              src: srcState.data,
-              onLoadedMetadata: handleLoad,
-              onError: handleError,
-              autoPlay: true,
-              controls: true,
-            })}
+            <Video
+              title={body}
+              src={srcState.data}
+              onLoadedMetadata={handleLoad}
+              onError={handleError}
+              autoPlay
+              controls
+            />
           </Box>
         )}
         {blurred && !error && srcState.status !== AsyncStatus.Error && (
@@ -219,7 +207,7 @@ export const VideoContent = as<'div', VideoContentProps>(
             </TooltipProvider>
           </Box>
         )}
-        {!load && typeof info.size === 'number' && (
+        {!load && typeof size === 'number' && (
           <Box
             className={css.AbsoluteFooter}
             justifyContent="SpaceBetween"
@@ -227,10 +215,10 @@ export const VideoContent = as<'div', VideoContentProps>(
             gap="200"
           >
             <Badge variant="Secondary" fill="Soft">
-              <Text size="L400">{millisecondsToMinutesAndSeconds(info.duration ?? 0)}</Text>
+              <Text size="L400">{millisecondsToMinutesAndSeconds(duration ?? 0)}</Text>
             </Badge>
             <Badge variant="Secondary" fill="Soft">
-              <Text size="L400">{bytesToSize(info.size)}</Text>
+              <Text size="L400">{bytesToSize(size)}</Text>
             </Badge>
           </Box>
         )}
diff --git a/src/app/components/message/layout/Base.tsx b/src/app/components/message/layout/Base.tsx
index ac196a5b..b07ae257 100644
--- a/src/app/components/message/layout/Base.tsx
+++ b/src/app/components/message/layout/Base.tsx
@@ -29,12 +29,18 @@ export const UsernameBold = as<'b'>(({ as: AsUsernameBold = 'b', className, ...p
 ));
 
 export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?: boolean }>(
-  ({ as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, ...props }, ref) => (
+  (
+    { as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, truncate, ...props },
+    ref
+  ) => (
     <Text
       as={asComp}
       size="T400"
       priority={notice ? '300' : '400'}
-      className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)}
+      className={classNames(
+        css.MessageTextBody({ preWrap, jumboEmoji, emote, truncate }),
+        className
+      )}
       {...props}
       ref={ref}
     />
diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index cc2cd0c6..0a61b361 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/src/app/components/message/layout/layout.css.ts
@@ -112,8 +112,7 @@ export const CompactHeader = style([
   DefaultReset,
   StickySection,
   {
-    maxWidth: toRem(170),
-    width: '100%',
+    width: toRem(170),
   },
 ]);
 
@@ -182,6 +181,7 @@ export const UsernameBold = style({
 export const MessageTextBody = recipe({
   base: {
     wordBreak: 'break-word',
+    position: 'relative',
   },
   variants: {
     preWrap: {
@@ -201,6 +201,27 @@ export const MessageTextBody = recipe({
         fontStyle: 'italic',
       },
     },
+    truncate: {
+      true: {
+        maxHeight: '15em',
+        overflow: 'hidden',
+
+        selectors: {
+          '&::before': {
+            content: '',
+            position: 'absolute',
+            bottom: 0,
+            left: 0,
+            right: 0,
+            pointerEvents: 'none',
+
+            height: config.space.S400,
+            background: `linear-gradient(to top, ${color.Primary.Container}, #00000000)`,
+            borderBottom: `${config.borderWidth.B400} solid ${color.Primary.ContainerLine}`,
+          },
+        },
+      },
+    },
   },
 });
 
diff --git a/src/app/components/room-avatar/RoomAvatar.css.ts b/src/app/components/room-avatar/RoomAvatar.css.ts
index c9745a9a..26c2a7d5 100644
--- a/src/app/components/room-avatar/RoomAvatar.css.ts
+++ b/src/app/components/room-avatar/RoomAvatar.css.ts
@@ -12,3 +12,7 @@ export const RoomAvatar = style({
     },
   },
 });
+
+export const RoomAvatarImg = style({
+  fontSize: 1,
+});
diff --git a/src/app/components/room-avatar/RoomAvatar.tsx b/src/app/components/room-avatar/RoomAvatar.tsx
index 23f3998d..86866d82 100644
--- a/src/app/components/room-avatar/RoomAvatar.tsx
+++ b/src/app/components/room-avatar/RoomAvatar.tsx
@@ -1,9 +1,10 @@
-import { JoinRule } from 'matrix-js-sdk';
 import { AvatarFallback, AvatarImage, Icon, Icons, color } from 'folds';
 import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useState } from 'react';
+import classNames from 'classnames';
 import * as css from './RoomAvatar.css';
 import { joinRuleToIconSrc } from '../../utils/room';
 import colorMXID from '../../../util/colorMXID';
+import { JoinRule } from '../../../types/matrix/room';
 
 type RoomAvatarProps = {
   roomId: string;
@@ -31,7 +32,7 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
 
   return (
     <AvatarImage
-      className={css.RoomAvatar}
+      className={classNames(css.RoomAvatar, css.RoomAvatarImg)}
       src={src}
       alt={alt}
       onError={() => setError(true)}
@@ -44,12 +45,15 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
 export const RoomIcon = forwardRef<
   SVGSVGElement,
   Omit<ComponentProps<typeof Icon>, 'src'> & {
-    joinRule: JoinRule;
+    joinRule?: JoinRule;
     space?: boolean;
   }
 >(({ joinRule, space, ...props }, ref) => (
   <Icon
-    src={joinRuleToIconSrc(Icons, joinRule, space || false) ?? Icons.Hash}
+    src={
+      joinRuleToIconSrc(Icons, joinRule ?? 'invite', space || false) ??
+      (space ? Icons.Space : Icons.Hash)
+    }
     {...props}
     ref={ref}
   />
diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx
index 34a7e24b..9fb283c2 100644
--- a/src/app/components/room-card/RoomCard.tsx
+++ b/src/app/components/room-card/RoomCard.tsx
@@ -1,5 +1,4 @@
 import React, { ReactNode, useCallback, useRef, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
 import {
   Avatar,
   Badge,
@@ -19,20 +18,22 @@ import {
 } from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
+import { postJoin, PostJoinOK } from 'neurone/lib/api/matrix/client/v3/join';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import * as css from './style.css';
 import { RoomAvatar } from '../room-avatar';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { getMxIdLocalPart } from '../../utils/matrix';
 import { nameInitials } from '../../utils/common';
 import { millify } from '../../plugins/millify';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { onEnterOrSpace, stopPropagation } from '../../utils/keyboard';
-import { RoomType, StateEvent } from '../../../types/matrix/room';
+import { RoomType } from '../../../types/matrix/room';
 import { useJoinedRoomId } from '../../hooks/useJoinedRoomId';
 import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
-import { getRoomAvatarUrl, getStateEvent } from '../../utils/room';
-import { useStateEventCallback } from '../../hooks/useStateEventCallback';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useLocalRoomSummary } from '../../hooks/useLocalRoomSummary';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { useClient } from '../../hooks/useClient';
 
 type GridColumnCount = '1' | '2' | '3';
 const getGridColumnCount = (gridWidth: number): GridColumnCount => {
@@ -161,44 +162,40 @@ export const RoomCard = as<'div', RoomCardProps>(
     },
     ref
   ) => {
-    const mx = useMatrixClient();
+    const ct = useClient();
+    const { baseUrl } = ct.session;
     const useAuthentication = useMediaAuthentication();
     const joinedRoomId = useJoinedRoomId(allRooms, roomIdOrAlias);
-    const joinedRoom = mx.getRoom(joinedRoomId);
-    const [topicEvent, setTopicEvent] = useState(() =>
-      joinedRoom ? getStateEvent(joinedRoom, StateEvent.RoomTopic) : undefined
-    );
+    const localSummary = useLocalRoomSummary(joinedRoomId ?? '');
 
     const fallbackName = getMxIdLocalPart(roomIdOrAlias) ?? roomIdOrAlias;
     const fallbackTopic = roomIdOrAlias;
 
-    const avatar = joinedRoom
-      ? getRoomAvatarUrl(mx, joinedRoom, 96, useAuthentication)
-      : avatarUrl && mxcUrlToHttp(mx, avatarUrl, useAuthentication, 96, 96, 'crop');
+    const avatarMxc = localSummary.avatarUrl ?? avatarUrl;
+    const avatarHttpUrl =
+      avatarMxc &&
+      mxcToHttp(baseUrl, avatarMxc, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      });
 
-    const roomName = joinedRoom?.name || name || fallbackName;
-    const roomTopic =
-      (topicEvent?.getContent().topic as string) || undefined || topic || fallbackTopic;
-    const joinedMemberCount = joinedRoom?.getJoinedMemberCount() ?? memberCount;
+    const roomName = localSummary?.name || name || fallbackName;
+    const roomTopic = localSummary.topic || topic || fallbackTopic;
+    const joinedMemberCount = localSummary.memberCount ?? memberCount;
 
-    useStateEventCallback(
-      mx,
-      useCallback(
-        (event) => {
-          if (
-            joinedRoom &&
-            event.getRoomId() === joinedRoom.roomId &&
-            event.getType() === StateEvent.RoomTopic
-          ) {
-            setTopicEvent(getStateEvent(joinedRoom, StateEvent.RoomTopic));
-          }
-        },
-        [joinedRoom]
-      )
-    );
-
-    const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
-      useCallback(() => mx.joinRoom(roomIdOrAlias, { viaServers }), [mx, roomIdOrAlias, viaServers])
+    const [joinState, join] = useAsyncCallback<PostJoinOK, Error, []>(
+      useCallback(async () => {
+        const response = await ct.requestAuthJSON(
+          postJoin({
+            pathParams: { roomIdOrAlias },
+            searchParams: { server_name: viaServers, via: viaServers },
+          })
+        );
+        const [err, result] = await parseMatrixResp<PostJoinOK>(response);
+        if (err) throw new Error(printMatrixError(err));
+        return result;
+      }, [ct, roomIdOrAlias, viaServers])
     );
     const joining =
       joinState.status === AsyncStatus.Loading || joinState.status === AsyncStatus.Success;
@@ -213,7 +210,7 @@ export const RoomCard = as<'div', RoomCardProps>(
           <Avatar size="500">
             <RoomAvatar
               roomId={roomIdOrAlias}
-              src={avatar ?? undefined}
+              src={avatarHttpUrl}
               alt={roomIdOrAlias}
               renderFallback={() => (
                 <Text as="span" size="H3">
@@ -222,7 +219,7 @@ export const RoomCard = as<'div', RoomCardProps>(
               )}
             />
           </Avatar>
-          {(roomType === RoomType.Space || joinedRoom?.isSpaceRoom()) && (
+          {(roomType === RoomType.Space || localSummary.space) && (
             <Badge variant="Secondary" fill="Soft" outlined>
               <Text size="L400">Space</Text>
             </Badge>
diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx
index ce550992..ff17c964 100644
--- a/src/app/components/room-intro/RoomIntro.tsx
+++ b/src/app/components/room-intro/RoomIntro.tsx
@@ -1,50 +1,55 @@
-import React, { useCallback, useState } from 'react';
-import { Avatar, Box, Button, Spinner, Text, as } from 'folds';
-import { Room } from 'matrix-js-sdk';
-import { useAtomValue } from 'jotai';
-import { IRoomCreateContent, Membership, StateEvent } from '../../../types/matrix/room';
-import { getMemberDisplayName, getStateEvent } from '../../utils/room';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import React, { useState } from 'react';
+import { Avatar, Box, Button, Text, as } from 'folds';
 import { timeDayMonthYear, timeHourMinute } from '../../utils/time';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { RoomAvatar } from '../room-avatar';
 import { nameInitials } from '../../utils/common';
-import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
-import { mDirectAtom } from '../../state/mDirectList';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { InviteUserPrompt } from '../invite-user-prompt';
+import { useClient } from '../../hooks/useClient';
+import { useRoom } from '../../hooks/useRoom';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { useRoomTopic } from '../../hooks/storage/useRoomTopic';
+import { useRoomStateEvent } from '../../hooks/storage/useRoomStateEvent';
+import { StateEventType } from '../../../types/matrix/room';
+import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
 
-export type RoomIntroProps = {
-  room: Room;
-};
-
-export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) => {
-  const mx = useMatrixClient();
+export const RoomIntro = as<
+  'div',
+  {
+    name: string;
+    avatar?: string;
+  }
+>(({ name, avatar, ...props }, ref) => {
+  const ct = useClient();
+  const roomId = useRoom();
   const useAuthentication = useMediaAuthentication();
   const { navigateRoom } = useRoomNavigate();
-  const mDirects = useAtomValue(mDirectAtom);
   const [invitePrompt, setInvitePrompt] = useState(false);
+  const { getName } = useRoomMembersAPI();
 
-  const createEvent = getStateEvent(room, StateEvent.RoomCreate);
-  const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
-  const name = useRoomName(room);
-  const topic = useRoomTopic(room);
-  const avatarHttpUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
+  const topic = useRoomTopic(roomId);
+  const avatarHttpUrl = avatar
+    ? mxcToHttp(ct.session.baseUrl, avatar, useAuthentication).url()
+    : undefined;
 
-  const createContent = createEvent?.getContent<IRoomCreateContent>();
-  const ts = createEvent?.getTs();
-  const creatorId = createEvent?.getSender();
-  const creatorName =
-    creatorId && (getMemberDisplayName(room, creatorId) ?? getMxIdLocalPart(creatorId));
-  const prevRoomId = createContent?.predecessor?.room_id;
+  const createResult = useRoomStateEvent(roomId, StateEventType.RoomCreate, '');
+  const event = createResult.value?.event;
+  const content = event?.content;
 
-  const [prevRoomState, joinPrevRoom] = useAsyncCallback(
-    useCallback(async (roomId: string) => mx.joinRoom(roomId), [mx])
-  );
+  const ts = event?.origin_server_ts;
+  const creatorId = event?.sender;
+  const creatorName = creatorId && getName(creatorId);
+
+  const prevRoomId =
+    content &&
+    'predecessor' in event.content &&
+    typeof event.content.predecessor === 'object' &&
+    event.content.predecessor &&
+    'room_id' in event.content.predecessor &&
+    event.content.predecessor.room_id;
 
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
 
@@ -53,7 +58,7 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
       <Box>
         <Avatar size="500">
           <RoomAvatar
-            roomId={room.roomId}
+            roomId={roomId}
             src={avatarHttpUrl ?? undefined}
             alt={name}
             renderFallback={() => <Text size="H2">{nameInitials(name)}</Text>}
@@ -82,36 +87,19 @@ export const RoomIntro = as<'div', RoomIntroProps>(({ room, ...props }, ref) =>
           </Button>
 
           {invitePrompt && (
-            <InviteUserPrompt room={room} requestClose={() => setInvitePrompt(false)} />
+            <InviteUserPrompt roomId={roomId} requestClose={() => setInvitePrompt(false)} />
+          )}
+          {typeof prevRoomId === 'string' && (
+            <Button
+              onClick={() => navigateRoom(prevRoomId)}
+              variant="Secondary"
+              size="300"
+              fill="Soft"
+              radii="300"
+            >
+              <Text size="B300">Open Old Room</Text>
+            </Button>
           )}
-          {typeof prevRoomId === 'string' &&
-            (mx.getRoom(prevRoomId)?.getMyMembership() === Membership.Join ? (
-              <Button
-                onClick={() => navigateRoom(prevRoomId, createContent?.predecessor?.event_id)}
-                variant="Success"
-                size="300"
-                fill="Soft"
-                radii="300"
-              >
-                <Text size="B300">Open Old Room</Text>
-              </Button>
-            ) : (
-              <Button
-                onClick={() => joinPrevRoom(prevRoomId)}
-                variant="Secondary"
-                size="300"
-                fill="Soft"
-                radii="300"
-                disabled={prevRoomState.status === AsyncStatus.Loading}
-                after={
-                  prevRoomState.status === AsyncStatus.Loading ? (
-                    <Spinner size="50" variant="Secondary" fill="Soft" />
-                  ) : undefined
-                }
-              >
-                <Text size="B300">Join Old Room</Text>
-              </Button>
-            ))}
         </Box>
       </Box>
     </Box>
diff --git a/src/app/components/splash-screen/SplashScreen.css.ts b/src/app/components/splash-screen/SplashScreen.css.ts
index bd3c300a..3cb6a483 100644
--- a/src/app/components/splash-screen/SplashScreen.css.ts
+++ b/src/app/components/splash-screen/SplashScreen.css.ts
@@ -1,5 +1,5 @@
 import { style } from '@vanilla-extract/css';
-import { color, config } from 'folds';
+import { color, config, toRem } from 'folds';
 
 export const SplashScreen = style({
   minHeight: '100%',
@@ -7,6 +7,11 @@ export const SplashScreen = style({
   color: color.Background.OnContainer,
 });
 
+export const SplashLogo = style({
+  width: toRem(42),
+  height: toRem(42),
+});
+
 export const SplashScreenFooter = style({
   padding: config.space.S400,
 });
diff --git a/src/app/components/splash-screen/SplashScreen.tsx b/src/app/components/splash-screen/SplashScreen.tsx
index 27adadba..7df70c4a 100644
--- a/src/app/components/splash-screen/SplashScreen.tsx
+++ b/src/app/components/splash-screen/SplashScreen.tsx
@@ -3,26 +3,33 @@ import React, { ReactNode } from 'react';
 import classNames from 'classnames';
 import * as patternsCSS from '../../styles/Patterns.css';
 import * as css from './SplashScreen.css';
+import CinnySVG from '../../../../public/res/svg/cinny.svg';
 
 type SplashScreenProps = {
-  children: ReactNode;
+  footer?: ReactNode;
+  children?: ReactNode;
 };
-export function SplashScreen({ children }: SplashScreenProps) {
+export function SplashScreen({ footer, children }: SplashScreenProps) {
   return (
     <Box
       className={classNames(css.SplashScreen, patternsCSS.BackgroundDotPattern)}
       direction="Column"
     >
-      {children}
+      {children || (
+        <Box grow="Yes" direction="Column" alignItems="Center" justifyContent="Center" gap="400">
+          <img className={css.SplashLogo} src={CinnySVG} alt="Cinny Logo" />
+          <Text size="H2" align="Center">
+            Cinny
+          </Text>
+        </Box>
+      )}
       <Box
         className={css.SplashScreenFooter}
         shrink="No"
         alignItems="Center"
         justifyContent="Center"
       >
-        <Text size="H2" align="Center">
-          Cinny
-        </Text>
+        {footer}
       </Box>
     </Box>
   );
diff --git a/src/app/components/uia-stages/DummyStage.tsx b/src/app/components/uia-stages/DummyStage.tsx
index 7e0f8586..ce19ab26 100644
--- a/src/app/components/uia-stages/DummyStage.tsx
+++ b/src/app/components/uia-stages/DummyStage.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback } from 'react';
 import { Dialog, Text, Box, Button, config } from 'folds';
-import { AuthType } from 'matrix-js-sdk';
 import { StageComponentProps } from './types';
+import { AuthType } from '../../utils/matrix-uia';
 
 function DummyErrorDialog({
   title,
diff --git a/src/app/components/uia-stages/EmailStage.tsx b/src/app/components/uia-stages/EmailStage.tsx
index fdc2b61a..fd2cc3d0 100644
--- a/src/app/components/uia-stages/EmailStage.tsx
+++ b/src/app/components/uia-stages/EmailStage.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect, useCallback, FormEventHandler } from 'react';
 import { Dialog, Text, Box, Button, config, Input, color, Spinner } from 'folds';
-import { AuthType, MatrixError } from 'matrix-js-sdk';
+import { printMatrixError } from 'neurone/lib/matrix-request';
 import { StageComponentProps } from './types';
 import { AsyncState, AsyncStatus } from '../../hooks/useAsyncCallback';
-import { RequestEmailTokenCallback, RequestEmailTokenResponse } from '../../hooks/types';
+import { RequestEmailTokenCallback, RequestEmailTokenResult } from '../../hooks/types';
+import { AuthType } from '../../utils/matrix-uia';
 
 function EmailErrorDialog({
   title,
@@ -77,10 +78,14 @@ export function EmailStageDialog({
 }: StageComponentProps & {
   email?: string;
   clientSecret: string;
-  emailTokenState: AsyncState<RequestEmailTokenResponse, MatrixError>;
+  emailTokenState: AsyncState<RequestEmailTokenResult, Error>;
   requestEmailToken: RequestEmailTokenCallback;
 }) {
   const { errorCode, error, session } = stageData;
+  const [matrixError, result] =
+    emailTokenState.status === AsyncStatus.Success ? emailTokenState.data : [];
+  const requestError =
+    emailTokenState.status === AsyncStatus.Error ? emailTokenState.error : undefined;
 
   const handleSubmit = useCallback(
     (sessionId: string) => {
@@ -120,14 +125,23 @@ export function EmailStageDialog({
     );
   }
 
-  if (emailTokenState.status === AsyncStatus.Error) {
+  if (requestError) {
     return (
       <EmailErrorDialog
-        title={emailTokenState.error.errcode ?? 'Verify Email'}
+        title={requestError.name ?? 'Verify Email'}
+        message={requestError.message ?? 'Failed to send verification Email request.'}
+        onRetry={handleEmailSubmit}
+        onCancel={onCancel}
+      />
+    );
+  }
+
+  if (matrixError) {
+    return (
+      <EmailErrorDialog
+        title={matrixError?.data.errcode ?? 'Verify Email'}
         message={
-          emailTokenState.error?.data?.error ??
-          emailTokenState.error.message ??
-          'Failed to send verification Email request.'
+          matrixError ? printMatrixError(matrixError) : 'Failed to send verification Email request.'
         }
         onRetry={handleEmailSubmit}
         onCancel={onCancel}
@@ -135,19 +149,19 @@ export function EmailStageDialog({
     );
   }
 
-  if (emailTokenState.status === AsyncStatus.Success) {
+  if (result) {
     return (
       <Dialog>
         <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
           <Box direction="Column" gap="100">
             <Text size="H4">Verification Request Sent</Text>
-            <Text>{`Please check your email "${emailTokenState.data.email}" and validate before continuing further.`}</Text>
+            <Text>{`Please check your email "${result.email}" and validate before continuing further.`}</Text>
 
             {errorCode && (
               <Text style={{ color: color.Critical.Main }}>{`${errorCode}: ${error}`}</Text>
             )}
           </Box>
-          <Button variant="Primary" onClick={() => handleSubmit(emailTokenState.data.result.sid)}>
+          <Button variant="Primary" onClick={() => handleSubmit(result.result.sid)}>
             <Text as="span" size="B400">
               Continue
             </Text>
diff --git a/src/app/components/uia-stages/PasswordStage.tsx b/src/app/components/uia-stages/PasswordStage.tsx
index 0164cae6..fc62e82a 100644
--- a/src/app/components/uia-stages/PasswordStage.tsx
+++ b/src/app/components/uia-stages/PasswordStage.tsx
@@ -1,9 +1,9 @@
 import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
 import React, { FormEventHandler } from 'react';
-import { AuthType } from 'matrix-js-sdk';
 import { StageComponentProps } from './types';
 import { ErrorCode } from '../../cs-errorcode';
 import { PasswordInput } from '../password-input';
+import { AuthType } from '../../utils/matrix-uia';
 
 export function PasswordStage({
   stageData,
diff --git a/src/app/components/uia-stages/ReCaptchaStage.tsx b/src/app/components/uia-stages/ReCaptchaStage.tsx
index 68b3fcf4..5f6b8df9 100644
--- a/src/app/components/uia-stages/ReCaptchaStage.tsx
+++ b/src/app/components/uia-stages/ReCaptchaStage.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import { Dialog, Text, Box, Button, config } from 'folds';
-import { AuthType } from 'matrix-js-sdk';
 import ReCAPTCHA from 'react-google-recaptcha';
 import { StageComponentProps } from './types';
+import { AuthType } from '../../utils/matrix-uia';
 
 function ReCaptchaErrorDialog({
   title,
diff --git a/src/app/components/uia-stages/RegistrationTokenStage.tsx b/src/app/components/uia-stages/RegistrationTokenStage.tsx
index ed8a3045..5ab041b0 100644
--- a/src/app/components/uia-stages/RegistrationTokenStage.tsx
+++ b/src/app/components/uia-stages/RegistrationTokenStage.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback, FormEventHandler } from 'react';
 import { Dialog, Text, Box, Button, config, Input } from 'folds';
-import { AuthType } from 'matrix-js-sdk';
 import { StageComponentProps } from './types';
+import { AuthType } from '../../utils/matrix-uia';
 
 function RegistrationTokenErrorDialog({
   title,
diff --git a/src/app/components/uia-stages/TermsStage.tsx b/src/app/components/uia-stages/TermsStage.tsx
index f6977053..ecb8fb41 100644
--- a/src/app/components/uia-stages/TermsStage.tsx
+++ b/src/app/components/uia-stages/TermsStage.tsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useCallback } from 'react';
 import { Dialog, Text, Box, Button, config } from 'folds';
-import { AuthType } from 'matrix-js-sdk';
 import { StageComponentProps } from './types';
+import { AuthType } from '../../utils/matrix-uia';
 
 function TermsErrorDialog({
   title,
diff --git a/src/app/components/uia-stages/types.ts b/src/app/components/uia-stages/types.ts
index cc6674c5..1ad16c49 100644
--- a/src/app/components/uia-stages/types.ts
+++ b/src/app/components/uia-stages/types.ts
@@ -1,8 +1,7 @@
-import { AuthDict } from 'matrix-js-sdk';
 import { AuthStageData } from '../../hooks/useUIAFlows';
 
 export type StageComponentProps = {
   stageData: AuthStageData;
-  submitAuthDict: (authDict: AuthDict) => void;
+  submitAuthDict: (authDict: object) => void;
   onCancel: () => void;
 };
diff --git a/src/app/components/upload-board/UploadBoard.tsx b/src/app/components/upload-board/UploadBoard.tsx
index 42f3899f..d386b0bf 100644
--- a/src/app/components/upload-board/UploadBoard.tsx
+++ b/src/app/components/upload-board/UploadBoard.tsx
@@ -4,7 +4,8 @@ import classNames from 'classnames';
 import { useAtomValue } from 'jotai';
 
 import * as css from './UploadBoard.css';
-import { TUploadFamilyObserverAtom, Upload, UploadStatus, UploadSuccess } from '../../state/upload';
+import { UploadsAtom, Upload, UploadStatus, UploadSuccess } from '../../state/upload';
+import { UploadItem } from '../../state/room/roomInputDrafts';
 
 type UploadBoardProps = {
   header: ReactNode;
@@ -29,22 +30,24 @@ export type UploadBoardImperativeHandlers = { handleSend: () => Promise<void> };
 type UploadBoardHeaderProps = {
   open: boolean;
   onToggle: () => void;
-  uploadFamilyObserverAtom: TUploadFamilyObserverAtom;
+  uploadsAtom: UploadsAtom;
+  uploadItems: UploadItem[];
   onCancel: (uploads: Upload[]) => void;
-  onSend: (uploads: UploadSuccess[]) => Promise<void>;
+  onSend: (uploadItems: UploadItem[], uploads: UploadSuccess[]) => Promise<void>;
   imperativeHandlerRef: MutableRefObject<UploadBoardImperativeHandlers | undefined>;
 };
 
 export function UploadBoardHeader({
   open,
   onToggle,
-  uploadFamilyObserverAtom,
+  uploadsAtom,
+  uploadItems,
   onCancel,
   onSend,
   imperativeHandlerRef,
 }: UploadBoardHeaderProps) {
   const sendingRef = useRef(false);
-  const uploads = useAtomValue(uploadFamilyObserverAtom);
+  const uploads = useAtomValue(uploadsAtom);
 
   const isSuccess = uploads.every((upload) => upload.status === UploadStatus.Success);
   const isError = uploads.some((upload) => upload.status === UploadStatus.Error);
@@ -66,6 +69,7 @@ export function UploadBoardHeader({
     if (sendingRef.current) return;
     sendingRef.current = true;
     await onSend(
+      uploadItems,
       uploads.filter((upload) => upload.status === UploadStatus.Success) as UploadSuccess[]
     );
     sendingRef.current = false;
diff --git a/src/app/components/upload-card/CompactUploadCardRenderer.tsx b/src/app/components/upload-card/CompactUploadCardRenderer.tsx
index b9bada71..f81b0e93 100644
--- a/src/app/components/upload-card/CompactUploadCardRenderer.tsx
+++ b/src/app/components/upload-card/CompactUploadCardRenderer.tsx
@@ -1,16 +1,16 @@
 import React, { useEffect } from 'react';
 import { Chip, Icon, IconButton, Icons, Text, color } from 'folds';
+import { printMatrixError } from 'neurone/lib/matrix-request';
 import { UploadCard, UploadCardError, CompactUploadCardProgress } from './UploadCard';
-import { TUploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { TUploadContent } from '../../utils/matrix';
+import { UploadAtom, UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
+import { UploadContent } from '../../utils/matrix';
 import { bytesToSize, getFileTypeIcon } from '../../utils/common';
 import { useMediaConfig } from '../../hooks/useMediaConfig';
 
 type CompactUploadCardRendererProps = {
   isEncrypted?: boolean;
-  uploadAtom: TUploadAtom;
-  onRemove: (file: TUploadContent) => void;
+  uploadAtom: UploadAtom;
+  onRemove: (file: UploadContent) => void;
   onComplete?: (upload: UploadSuccess) => void;
 };
 export function CompactUploadCardRenderer({
@@ -19,11 +19,10 @@ export function CompactUploadCardRenderer({
   onRemove,
   onComplete,
 }: CompactUploadCardRendererProps) {
-  const mx = useMatrixClient();
   const mediaConfig = useMediaConfig();
   const allowSize = mediaConfig['m.upload.size'] || Infinity;
 
-  const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
+  const { upload, startUpload, cancelUpload } = useBindUploadAtom(uploadAtom, isEncrypted);
   const { file } = upload;
   const fileSizeExceeded = file.size >= allowSize;
 
@@ -91,7 +90,11 @@ export function CompactUploadCardRenderer({
           )}
           {upload.status === UploadStatus.Error && (
             <UploadCardError>
-              <Text size="T200">{upload.error.message}</Text>
+              <Text size="T200">
+                {upload.error instanceof Error
+                  ? upload.error.message
+                  : printMatrixError(upload.error)}
+              </Text>
             </UploadCardError>
           )}
           {upload.status === UploadStatus.Idle && fileSizeExceeded && (
diff --git a/src/app/components/upload-card/UploadCardRenderer.tsx b/src/app/components/upload-card/UploadCardRenderer.tsx
index f5bc68e0..b5dae512 100644
--- a/src/app/components/upload-card/UploadCardRenderer.tsx
+++ b/src/app/components/upload-card/UploadCardRenderer.tsx
@@ -1,20 +1,20 @@
 import React, { ReactNode, useEffect } from 'react';
+import { printMatrixError } from 'neurone/lib/matrix-request';
 import { Box, Chip, Icon, IconButton, Icons, Text, color, config, toRem } from 'folds';
 import { UploadCard, UploadCardError, UploadCardProgress } from './UploadCard';
 import { UploadStatus, UploadSuccess, useBindUploadAtom } from '../../state/upload';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { TUploadContent } from '../../utils/matrix';
+import { UploadContent } from '../../utils/matrix';
 import { bytesToSize, getFileTypeIcon } from '../../utils/common';
 import {
-  roomUploadAtomFamily,
-  TUploadItem,
-  TUploadMetadata,
+  roomUploadContentToUploadAtom,
+  UploadItem,
+  UploadMetadata,
 } from '../../state/room/roomInputDrafts';
 import { useObjectURL } from '../../hooks/useObjectURL';
 import { useMediaConfig } from '../../hooks/useMediaConfig';
 
 type PreviewImageProps = {
-  fileItem: TUploadItem;
+  fileItem: UploadItem;
 };
 function PreviewImage({ fileItem }: PreviewImageProps) {
   const { originalFile, metadata } = fileItem;
@@ -35,7 +35,7 @@ function PreviewImage({ fileItem }: PreviewImageProps) {
 }
 
 type PreviewVideoProps = {
-  fileItem: TUploadItem;
+  fileItem: UploadItem;
 };
 function PreviewVideo({ fileItem }: PreviewVideoProps) {
   const { originalFile, metadata } = fileItem;
@@ -56,7 +56,7 @@ function PreviewVideo({ fileItem }: PreviewVideoProps) {
 }
 
 type MediaPreviewProps = {
-  fileItem: TUploadItem;
+  fileItem: UploadItem;
   onSpoiler: (marked: boolean) => void;
   children: ReactNode;
 };
@@ -100,9 +100,9 @@ function MediaPreview({ fileItem, onSpoiler, children }: MediaPreviewProps) {
 
 type UploadCardRendererProps = {
   isEncrypted?: boolean;
-  fileItem: TUploadItem;
-  setMetadata: (fileItem: TUploadItem, metadata: TUploadMetadata) => void;
-  onRemove: (file: TUploadContent) => void;
+  fileItem: UploadItem;
+  setMetadata: (fileItem: UploadItem, metadata: UploadMetadata) => void;
+  onRemove: (file: UploadContent) => void;
   onComplete?: (upload: UploadSuccess) => void;
 };
 export function UploadCardRenderer({
@@ -112,13 +112,12 @@ export function UploadCardRenderer({
   onRemove,
   onComplete,
 }: UploadCardRendererProps) {
-  const mx = useMatrixClient();
   const mediaConfig = useMediaConfig();
   const allowSize = mediaConfig['m.upload.size'] || Infinity;
 
-  const uploadAtom = roomUploadAtomFamily(fileItem.file);
+  const uploadAtom = roomUploadContentToUploadAtom(fileItem.file);
   const { metadata } = fileItem;
-  const { upload, startUpload, cancelUpload } = useBindUploadAtom(mx, uploadAtom, isEncrypted);
+  const { upload, startUpload, cancelUpload } = useBindUploadAtom(uploadAtom, isEncrypted);
   const { file } = upload;
   const fileSizeExceeded = file.size >= allowSize;
 
@@ -190,7 +189,11 @@ export function UploadCardRenderer({
           )}
           {upload.status === UploadStatus.Error && (
             <UploadCardError>
-              <Text size="T200">{upload.error.message}</Text>
+              <Text size="T200">
+                {upload.error instanceof Error
+                  ? upload.error.message
+                  : printMatrixError(upload.error)}
+              </Text>
             </UploadCardError>
           )}
           {upload.status === UploadStatus.Idle && fileSizeExceeded && (
diff --git a/src/app/components/url-preview/UrlPreviewCard.tsx b/src/app/components/url-preview/UrlPreviewCard.tsx
index 2a51969a..54749b30 100644
--- a/src/app/components/url-preview/UrlPreviewCard.tsx
+++ b/src/app/components/url-preview/UrlPreviewCard.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useEffect, useRef, useState } from 'react';
-import { IPreviewUrlResponse } from 'matrix-js-sdk';
 import { Box, Icon, IconButton, Icons, Scroll, Spinner, Text, as, color, config } from 'folds';
+import { getPreviewUrl, GetPreviewUrlOK } from 'neurone/lib/api/matrix/client/v1/media';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UrlPreview, UrlPreviewContent, UrlPreviewDescription, UrlPreviewImg } from './UrlPreview';
 import {
   getIntersectionObserverEntry,
@@ -10,17 +10,32 @@ import {
 } from '../../hooks/useIntersectionObserver';
 import * as css from './UrlPreviewCard.css';
 import { tryDecodeURIComponent } from '../../utils/dom';
-import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useClient } from '../../hooks/useClient';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 const linkStyles = { color: color.Success.Main };
 
 export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
   ({ url, ts, ...props }, ref) => {
-    const mx = useMatrixClient();
+    const ct = useClient();
     const useAuthentication = useMediaAuthentication();
     const [previewStatus, loadPreview] = useAsyncCallback(
-      useCallback(() => mx.getUrlPreview(url, ts), [url, ts, mx])
+      useCallback(async () => {
+        const resp = await ct.requestAuthJSON(
+          getPreviewUrl({
+            searchParams: {
+              url,
+              ts,
+            },
+          })
+        );
+        const [err, result] = await parseMatrixResp<GetPreviewUrlOK>(resp);
+        if (err) {
+          throw new Error(printMatrixError(err));
+        }
+        return result;
+      }, [url, ts, ct])
     );
 
     useEffect(() => {
@@ -29,12 +44,29 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
 
     if (previewStatus.status === AsyncStatus.Error) return null;
 
-    const renderContent = (prev: IPreviewUrlResponse) => {
-      const imgUrl = mxcUrlToHttp(mx, prev['og:image'] || '', useAuthentication, 256, 256, 'scale', false);
+    const renderContent = (prev: GetPreviewUrlOK) => {
+      const imgUrl =
+        'og:image' in prev &&
+        typeof prev['og:image'] === 'string' &&
+        mxcToHttp(ct.session.baseUrl, prev['og:image'], useAuthentication).thumbnail({
+          width: 256,
+          height: 256,
+          method: 'scale',
+        });
+      const title =
+        'og:title' in prev && typeof prev['og:title'] === 'string' ? prev['og:title'] : undefined;
+      const description =
+        'og:description' in prev && typeof prev['og:description'] === 'string'
+          ? prev['og:description']
+          : undefined;
+      const siteName =
+        'og:site_name' in prev && typeof prev['og:site_name'] === 'string'
+          ? prev['og:site_name']
+          : undefined;
 
       return (
         <>
-          {imgUrl && <UrlPreviewImg src={imgUrl} alt={prev['og:title']} title={prev['og:title']} />}
+          {imgUrl && <UrlPreviewImg src={imgUrl} alt={title} title={title} />}
           <UrlPreviewContent>
             <Text
               style={linkStyles}
@@ -46,14 +78,14 @@ export const UrlPreviewCard = as<'div', { url: string; ts: number }>(
               size="T200"
               priority="300"
             >
-              {typeof prev['og:site_name'] === 'string' && `${prev['og:site_name']} | `}
+              {siteName ? `${siteName} | ` : null}
               {tryDecodeURIComponent(url)}
             </Text>
             <Text truncate priority="400">
-              <b>{prev['og:title']}</b>
+              <b>{title}</b>
             </Text>
             <Text size="T200" priority="300">
-              <UrlPreviewDescription>{prev['og:description']}</UrlPreviewDescription>
+              <UrlPreviewDescription>{description}</UrlPreviewDescription>
             </Text>
           </UrlPreviewContent>
         </>
diff --git a/src/app/components/user-avatar/UserAvatar.css.ts b/src/app/components/user-avatar/UserAvatar.css.ts
index 0a3684b2..b1512448 100644
--- a/src/app/components/user-avatar/UserAvatar.css.ts
+++ b/src/app/components/user-avatar/UserAvatar.css.ts
@@ -12,3 +12,7 @@ export const UserAvatar = style({
     },
   },
 });
+
+export const UserAvatarImg = style({
+  fontSize: 1,
+});
diff --git a/src/app/components/user-avatar/UserAvatar.tsx b/src/app/components/user-avatar/UserAvatar.tsx
index d9de9b79..dbd534a3 100644
--- a/src/app/components/user-avatar/UserAvatar.tsx
+++ b/src/app/components/user-avatar/UserAvatar.tsx
@@ -31,7 +31,7 @@ export function UserAvatar({ className, userId, src, alt, renderFallback }: User
 
   return (
     <AvatarImage
-      className={classNames(css.UserAvatar, className)}
+      className={classNames(css.UserAvatar, css.UserAvatarImg, className)}
       src={src}
       alt={alt}
       onError={() => setError(true)}
diff --git a/src/app/features/create-chat/CreateChat.tsx b/src/app/features/create-chat/CreateChat.tsx
index faa4511b..b50cbc65 100644
--- a/src/app/features/create-chat/CreateChat.tsx
+++ b/src/app/features/create-chat/CreateChat.tsx
@@ -1,53 +1,76 @@
 import { Box, Button, color, config, Icon, Icons, Input, Spinner, Switch, Text } from 'folds';
 import React, { FormEventHandler, useCallback, useState } from 'react';
-import { ICreateRoomStateEvent, MatrixError, Preset, Visibility } from 'matrix-js-sdk';
 import { useNavigate } from 'react-router-dom';
+import {
+  MatrixResponseResult,
+  parseMatrixResp,
+  printMatrixError,
+} from 'neurone/lib/matrix-request';
+import {
+  CreateRoomStateEvent,
+  postCreateRoom,
+  PostCreateRoomOK,
+} from 'neurone/lib/api/matrix/client/v3/createRoom';
 import { SettingTile } from '../../components/setting-tile';
 import { SequenceCard } from '../../components/sequence-card';
 import { addRoomIdToMDirect, isUserId } from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { ErrorCode } from '../../cs-errorcode';
 import { millisecondsToMinutes } from '../../utils/common';
 import { createRoomEncryptionState } from '../../components/create-room';
 import { useAlive } from '../../hooks/useAlive';
 import { getDirectRoomPath } from '../../pages/pathUtils';
+import { useClient } from '../../hooks/useClient';
+import { rError } from '../../../client/reader';
 
 type CreateChatProps = {
   defaultUserId?: string;
 };
 export function CreateChat({ defaultUserId }: CreateChatProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const alive = useAlive();
   const navigate = useNavigate();
 
   const [encryption, setEncryption] = useState(true);
   const [invalidUserId, setInvalidUserId] = useState(false);
 
-  const [createState, create] = useAsyncCallback<string, Error | MatrixError, [string, boolean]>(
+  const [createState, create] = useAsyncCallback<
+    MatrixResponseResult<string>,
+    Error,
+    [string, boolean]
+  >(
     useCallback(
       async (userId, encrypted) => {
-        const initialState: ICreateRoomStateEvent[] = [];
+        const initialState: CreateRoomStateEvent[] = [];
 
         if (encrypted) initialState.push(createRoomEncryptionState());
 
-        const result = await mx.createRoom({
-          is_direct: true,
-          invite: [userId],
-          visibility: Visibility.Private,
-          preset: Preset.TrustedPrivateChat,
-          initial_state: initialState,
-        });
+        const response = await ct.requestAuthJSON(
+          postCreateRoom({
+            body: {
+              is_direct: true,
+              invite: [userId],
+              visibility: 'private',
+              preset: 'trusted_private_chat',
+              initial_state: initialState,
+            },
+          })
+        );
+        const [err, result] = await parseMatrixResp<PostCreateRoomOK>(response);
+        if (err) return [err, undefined];
 
-        addRoomIdToMDirect(mx, result.room_id, userId);
+        const roomId = result.room_id;
 
-        return result.room_id;
+        addRoomIdToMDirect(ct, roomId, userId);
+
+        return [undefined, roomId];
       },
-      [mx]
+      [ct]
     )
   );
   const loading = createState.status === AsyncStatus.Loading;
   const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
+  const [respError] = createState.status === AsyncStatus.Success ? createState.data : [];
   const disabled = createState.status === AsyncStatus.Loading;
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -64,8 +87,8 @@ export function CreateChat({ defaultUserId }: CreateChatProps) {
       return;
     }
 
-    create(userId, encryption).then((roomId) => {
-      if (alive()) {
+    create(userId, encryption).then(([, roomId]) => {
+      if (alive() && roomId) {
         userIdInput.value = '';
         navigate(getDirectRoomPath(roomId));
       }
@@ -123,13 +146,16 @@ export function CreateChat({ defaultUserId }: CreateChatProps) {
         <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="200">
           <Icon src={Icons.Warning} filled size="100" />
           <Text size="T300" style={{ color: color.Critical.Main }}>
-            <b>
-              {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
-                ? `Server rate-limited your request for ${millisecondsToMinutes(
-                    (error.data.retry_after_ms as number | undefined) ?? 0
-                  )} minutes!`
-                : error.message}
-            </b>
+            {error && <b>error.message</b>}
+            {respError &&
+              (respError.data.errcode === ErrorCode.M_LIMIT_EXCEEDED ? (
+                <b>
+                  Server rate-limited your request for{' '}
+                  {millisecondsToMinutes(rError.retryAfterMs(respError.data) ?? 0)} minutes!
+                </b>
+              ) : (
+                <b>{printMatrixError(respError)}</b>
+              ))}
           </Text>
         </Box>
       )}
diff --git a/src/app/features/create-room/CreateRoom.tsx b/src/app/features/create-room/CreateRoom.tsx
index 6ad469c9..0c7e46f2 100644
--- a/src/app/features/create-room/CreateRoom.tsx
+++ b/src/app/features/create-room/CreateRoom.tsx
@@ -1,5 +1,4 @@
 import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
 import {
   Box,
   Button,
@@ -14,6 +13,7 @@ import {
   Text,
   TextArea,
 } from 'folds';
+import { MatrixResponseResult, printMatrixError } from 'neurone/lib/matrix-request';
 import { SettingTile } from '../../components/setting-tile';
 import { SequenceCard } from '../../components/sequence-card';
 import {
@@ -22,7 +22,6 @@ import {
   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';
@@ -38,6 +37,8 @@ import {
   RoomVersionSelector,
   useAdditionalCreators,
 } from '../../components/create-room';
+import { useClient } from '../../hooks/useClient';
+import { rError } from '../../../client/reader';
 
 const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
   if (kind === CreateRoomKind.Private) return Icons.HashLock;
@@ -47,11 +48,11 @@ const getCreateRoomKindToIcon = (kind: CreateRoomKind) => {
 
 type CreateRoomFormProps = {
   defaultKind?: CreateRoomKind;
-  space?: Room;
+  spaceId?: string;
   onCreate?: (roomId: string) => void;
 };
-export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormProps) {
-  const mx = useMatrixClient();
+export function CreateRoomForm({ defaultKind, spaceId, onCreate }: CreateRoomFormProps) {
+  const ct = useClient();
   const alive = useAlive();
 
   const capabilities = useCapabilities();
@@ -62,7 +63,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
     selectRoomVersion(roomVersions?.default ?? '1');
   }, [roomVersions?.default]);
 
-  const allowRestricted = space && restrictedSupported(selectedRoomVersion);
+  const allowRestricted = spaceId ? restrictedSupported(selectedRoomVersion) : false;
 
   const [kind, setKind] = useState(
     defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
@@ -86,11 +87,14 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
     selectRoomVersion(version);
   };
 
-  const [createState, create] = useAsyncCallback<string, Error | MatrixError, [CreateRoomData]>(
-    useCallback((data) => createRoom(mx, data), [mx])
-  );
+  const [createState, create] = useAsyncCallback<
+    MatrixResponseResult<string>,
+    Error,
+    [CreateRoomData]
+  >(useCallback((data) => createRoom(ct, data), [ct]));
   const loading = createState.status === AsyncStatus.Loading;
   const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
+  const [respError] = createState.status === AsyncStatus.Success ? createState.data : [];
   const disabled = createState.status === AsyncStatus.Loading;
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -118,7 +122,7 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
 
     create({
       version: selectedRoomVersion,
-      parent: space,
+      parentId: spaceId,
       kind,
       name: roomName,
       topic: roomTopic || undefined,
@@ -127,8 +131,8 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
       knock: roomKnock,
       allowFederation: federation,
       additionalCreators: allowAdditionalCreators ? additionalCreators : undefined,
-    }).then((roomId) => {
-      if (alive()) {
+    }).then(([, roomId]) => {
+      if (roomId && alive()) {
         onCreate?.(roomId);
       }
     });
@@ -279,13 +283,16 @@ export function CreateRoomForm({ defaultKind, space, onCreate }: CreateRoomFormP
         <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="200">
           <Icon src={Icons.Warning} filled size="100" />
           <Text size="T300" style={{ color: color.Critical.Main }}>
-            <b>
-              {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
-                ? `Server rate-limited your request for ${millisecondsToMinutes(
-                    (error.data.retry_after_ms as number | undefined) ?? 0
-                  )} minutes!`
-                : error.message}
-            </b>
+            {error && <b>error.message</b>}
+            {respError &&
+              (respError.data.errcode === ErrorCode.M_LIMIT_EXCEEDED ? (
+                <b>
+                  Server rate-limited your request for{' '}
+                  {millisecondsToMinutes(rError.retryAfterMs(respError.data) ?? 0)} minutes!
+                </b>
+              ) : (
+                <b>{printMatrixError(respError)}</b>
+              ))}
           </Text>
         </Box>
       )}
diff --git a/src/app/features/create-space/CreateSpace.tsx b/src/app/features/create-space/CreateSpace.tsx
index b1f9f649..77a70fe8 100644
--- a/src/app/features/create-space/CreateSpace.tsx
+++ b/src/app/features/create-space/CreateSpace.tsx
@@ -1,5 +1,4 @@
 import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
 import {
   Box,
   Button,
@@ -14,6 +13,7 @@ import {
   Text,
   TextArea,
 } from 'folds';
+import { MatrixResponseResult, printMatrixError } from 'neurone/lib/matrix-request';
 import { SettingTile } from '../../components/setting-tile';
 import { SequenceCard } from '../../components/sequence-card';
 import {
@@ -22,7 +22,6 @@ import {
   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';
@@ -39,6 +38,8 @@ import {
   useAdditionalCreators,
 } from '../../components/create-room';
 import { RoomType } from '../../../types/matrix/room';
+import { useClient } from '../../hooks/useClient';
+import { rError } from '../../../client/reader';
 
 const getCreateSpaceKindToIcon = (kind: CreateRoomKind) => {
   if (kind === CreateRoomKind.Private) return Icons.SpaceLock;
@@ -48,11 +49,11 @@ const getCreateSpaceKindToIcon = (kind: CreateRoomKind) => {
 
 type CreateSpaceFormProps = {
   defaultKind?: CreateRoomKind;
-  space?: Room;
+  spaceId?: string;
   onCreate?: (roomId: string) => void;
 };
-export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFormProps) {
-  const mx = useMatrixClient();
+export function CreateSpaceForm({ defaultKind, spaceId, onCreate }: CreateSpaceFormProps) {
+  const ct = useClient();
   const alive = useAlive();
 
   const capabilities = useCapabilities();
@@ -63,7 +64,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
     selectRoomVersion(roomVersions?.default ?? '1');
   }, [roomVersions?.default]);
 
-  const allowRestricted = space && restrictedSupported(selectedRoomVersion);
+  const allowRestricted = spaceId ? restrictedSupported(selectedRoomVersion) : false;
 
   const [kind, setKind] = useState(
     defaultKind ?? allowRestricted ? CreateRoomKind.Restricted : CreateRoomKind.Private
@@ -87,11 +88,14 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
     selectRoomVersion(version);
   };
 
-  const [createState, create] = useAsyncCallback<string, Error | MatrixError, [CreateRoomData]>(
-    useCallback((data) => createRoom(mx, data), [mx])
-  );
+  const [createState, create] = useAsyncCallback<
+    MatrixResponseResult<string>,
+    Error,
+    [CreateRoomData]
+  >(useCallback((data) => createRoom(ct, data), [ct]));
   const loading = createState.status === AsyncStatus.Loading;
   const error = createState.status === AsyncStatus.Error ? createState.error : undefined;
+  const [respError] = createState.status === AsyncStatus.Success ? createState.data : [];
   const disabled = createState.status === AsyncStatus.Loading;
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -120,7 +124,7 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
     create({
       version: selectedRoomVersion,
       type: RoomType.Space,
-      parent: space,
+      parentId: spaceId,
       kind,
       name: roomName,
       topic: roomTopic || undefined,
@@ -128,8 +132,8 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
       knock: roomKnock,
       allowFederation: federation,
       additionalCreators: allowAdditionalCreators ? additionalCreators : undefined,
-    }).then((roomId) => {
-      if (alive()) {
+    }).then(([, roomId]) => {
+      if (roomId && alive()) {
         onCreate?.(roomId);
       }
     });
@@ -248,17 +252,20 @@ export function CreateSpaceForm({ defaultKind, space, onCreate }: CreateSpaceFor
         )}
       </Box>
 
-      {error && (
+      {(error || respError) && (
         <Box style={{ color: color.Critical.Main }} alignItems="Center" gap="200">
           <Icon src={Icons.Warning} filled size="100" />
           <Text size="T300" style={{ color: color.Critical.Main }}>
-            <b>
-              {error instanceof MatrixError && error.name === ErrorCode.M_LIMIT_EXCEEDED
-                ? `Server rate-limited your request for ${millisecondsToMinutes(
-                    (error.data.retry_after_ms as number | undefined) ?? 0
-                  )} minutes!`
-                : error.message}
-            </b>
+            {error && <b>error.message</b>}
+            {respError &&
+              (respError.data.errcode === ErrorCode.M_LIMIT_EXCEEDED ? (
+                <b>
+                  Server rate-limited your request for{' '}
+                  {millisecondsToMinutes(rError.retryAfterMs(respError.data) ?? 0)} minutes!
+                </b>
+              ) : (
+                <b>{printMatrixError(respError)}</b>
+              ))}
           </Text>
         </Box>
       )}
diff --git a/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx b/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx
index 028cd560..1a5ca147 100644
--- a/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx
+++ b/src/app/features/join-before-navigate/JoinBeforeNavigate.tsx
@@ -6,10 +6,10 @@ import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import { Page, PageHeader } from '../../components/page';
 import { RoomSummaryLoader } from '../../components/RoomSummaryLoader';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
+import { useClient } from '../../hooks/useClient';
 
 type JoinBeforeNavigateProps = { roomIdOrAlias: string; eventId?: string; viaServers?: string[] };
 export function JoinBeforeNavigate({
@@ -17,13 +17,13 @@ export function JoinBeforeNavigate({
   eventId,
   viaServers,
 }: JoinBeforeNavigateProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const allRooms = useAtomValue(allRoomsAtom);
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const screenSize = useScreenSizeContext();
 
   const handleView = (roomId: string) => {
-    if (mx.getRoom(roomId)?.isSpaceRoom()) {
+    if (ct.spaceRooms.read.has(roomId)) {
       navigateSpace(roomId);
       return;
     }
diff --git a/src/app/features/lobby/DnD.css.ts b/src/app/features/lobby/DnD.css.ts
index 76a0e2bf..77259c70 100644
--- a/src/app/features/lobby/DnD.css.ts
+++ b/src/app/features/lobby/DnD.css.ts
@@ -36,7 +36,7 @@ const DropTargetLine = style({
 
       borderBottom: `${toRem(LineHeight)} solid currentColor`,
     },
-    '&[data-hover=true]:after': {
+    '&[data-hover=true]::after': {
       content: '',
       display: 'block',
       width: toRem(LineHeight * 3),
diff --git a/src/app/features/lobby/HierarchyItemMenu.tsx b/src/app/features/lobby/HierarchyItemMenu.tsx
index c6aff741..58ed2109 100644
--- a/src/app/features/lobby/HierarchyItemMenu.tsx
+++ b/src/app/features/lobby/HierarchyItemMenu.tsx
@@ -17,7 +17,7 @@ import {
 } from 'folds';
 import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { MSpaceChildContent, StateEvent } from '../../../types/matrix/room';
+import { SpaceChildContent, StateEvent } from '../../../types/matrix/room';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
@@ -47,7 +47,7 @@ function SuggestMenuItem({
 
   const [toggleState, handleToggleSuggested] = useAsyncCallback(
     useCallback(() => {
-      const newContent: MSpaceChildContent = { ...content, suggested: !content.suggested };
+      const newContent: SpaceChildContent = { ...content, suggested: !content.suggested };
       return mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, newContent, roomId);
     }, [mx, parentId, roomId, content])
   );
diff --git a/src/app/features/lobby/Lobby.tsx b/src/app/features/lobby/Lobby.tsx
index 4b19e516..c182223d 100644
--- a/src/app/features/lobby/Lobby.tsx
+++ b/src/app/features/lobby/Lobby.tsx
@@ -3,9 +3,6 @@ import { Box, Chip, Icon, IconButton, Icons, Line, Scroll, Spinner, Text, config
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useAtom, useAtomValue } from 'jotai';
 import { useNavigate } from 'react-router-dom';
-import { JoinRule, RestrictedAllowType, Room } from 'matrix-js-sdk';
-import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
-import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
 import produce from 'immer';
 import { useSpace } from '../../hooks/useSpace';
 import { Page, PageContent, PageContentCenter, PageHeroSection } from '../../components/page';
@@ -33,7 +30,6 @@ import {
 import { mDirectAtom } from '../../state/mDirectList';
 import { makeLobbyCategoryId } from '../../state/closedLobbyCategories';
 import { useCategoryHandler } from '../../hooks/useCategoryHandler';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { getCanonicalAliasOrRoomId, rateLimitedActions } from '../../utils/matrix';
 import { getSpaceRoomPath } from '../../pages/pathUtils';
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 33b21bff..dd014cd1 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -1,5 +1,4 @@
 import React, { MouseEventHandler, forwardRef, useState } from 'react';
-import { Room } from 'matrix-js-sdk';
 import {
   Avatar,
   Box,
@@ -22,21 +21,15 @@ import FocusTrap from 'focus-trap-react';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
 import { nameInitials } from '../../utils/common';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRoomUnread } from '../../state/hooks/unread';
-import { roomToUnreadAtom } from '../../state/room/roomToUnread';
-import { usePowerLevels } from '../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsState } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
-import { markAsRead } from '../../utils/notifications';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
 import { TypingIndicator } from '../../components/typing-indicator';
 import { stopPropagation } from '../../utils/keyboard';
 import { getMatrixToRoom } from '../../plugins/matrix-to';
-import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../utils/matrix';
 import { getViaServers } from '../../plugins/via-servers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
@@ -51,29 +44,35 @@ import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationS
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { JoinRule } from '../../../types/matrix/room';
+import { useClient } from '../../hooks/useClient';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { TotalNotifications } from '../../state/hooks/roomNotifications';
 
 type RoomNavItemMenuProps = {
-  room: Room;
+  roomId: string;
   requestClose: () => void;
   notificationMode?: RoomNotificationMode;
+  notifications?: TotalNotifications;
 };
 const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
-  ({ room, requestClose, notificationMode }, ref) => {
-    const mx = useMatrixClient();
+  ({ roomId, requestClose, notificationMode, notifications }, ref) => {
+    const ct = useClient();
+    const { userId } = ct.session;
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-    const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
-    const powerLevels = usePowerLevels(room);
-    const creators = useRoomCreators(room);
+    const powerLevelState = usePowerLevelsState(roomId);
+    const powerLevels = usePowerLevels(powerLevelState.value);
+    const creators = useRoomCreators(roomId);
 
     const permissions = useRoomPermissions(creators, powerLevels);
-    const canInvite = permissions.action('invite', mx.getSafeUserId());
+    const canInvite = permissions.action('invite', userId);
     const openRoomSettings = useOpenRoomSettings();
     const space = useSpaceOptionally();
 
     const [invitePrompt, setInvitePrompt] = useState(false);
 
     const handleMarkAsRead = () => {
-      markAsRead(mx, room.roomId, hideActivity);
+      // markAsRead(mx, roomId, hideActivity);
       requestClose();
     };
 
@@ -82,22 +81,22 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
     };
 
     const handleCopyLink = () => {
-      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-      const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-      copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
+      const alias = ct.roomToAlias.read.get(roomId);
+      const viaServers = alias ? undefined : getViaServers(creators, powerLevels);
+      copyToClipboard(getMatrixToRoom(alias ?? roomId, viaServers));
       requestClose();
     };
 
     const handleRoomSettings = () => {
-      openRoomSettings(room.roomId, space?.roomId);
+      openRoomSettings(roomId, space?.roomId);
       requestClose();
     };
 
     return (
       <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-        {invitePrompt && room && (
+        {invitePrompt && (
           <InviteUserPrompt
-            room={room}
+            roomId={roomId}
             requestClose={() => {
               setInvitePrompt(false);
               requestClose();
@@ -110,13 +109,13 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
             size="300"
             after={<Icon size="100" src={Icons.CheckTwice} />}
             radii="300"
-            disabled={!unread}
+            disabled={!notifications || notifications.count === 0}
           >
             <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
               Mark as Read
             </Text>
           </MenuItem>
-          <RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}>
+          <RoomNotificationModeSwitcher roomId={roomId} value={notificationMode}>
             {(handleOpen, opened, changing) => (
               <MenuItem
                 size="300"
@@ -195,7 +194,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
                 </MenuItem>
                 {promptLeave && (
                   <LeaveRoomPrompt
-                    roomId={room.roomId}
+                    roomId={roomId}
                     onDone={requestClose}
                     onCancel={() => setPromptLeave(false)}
                   />
@@ -210,31 +209,37 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
 );
 
 type RoomNavItemProps = {
-  room: Room;
+  roomId: string;
+  roomName: string;
+  avatarUrl?: string;
   selected: boolean;
   linkPath: string;
+  joinRule?: JoinRule;
   notificationMode?: RoomNotificationMode;
   showAvatar?: boolean;
-  direct?: boolean;
+  notifications?: TotalNotifications;
+  unread?: boolean;
 };
 export function RoomNavItem({
-  room,
+  roomId,
+  roomName,
+  avatarUrl,
   selected,
   showAvatar,
-  direct,
   notificationMode,
   linkPath,
+  joinRule,
+  notifications,
+  unread,
 }: RoomNavItemProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const { baseUrl, userId } = ct.session;
   const useAuthentication = useMediaAuthentication();
   const [hover, setHover] = useState(false);
   const { hoverProps } = useHover({ onHoverChange: setHover });
   const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
-  const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
-  const typingMember = useRoomTypingMember(room.roomId).filter(
-    (receipt) => receipt.userId !== mx.getUserId()
-  );
+  const typingMember = useRoomTypingMember(roomId).filter((uId) => uId !== userId);
 
   const handleContextMenu: MouseEventHandler<HTMLElement> = (evt) => {
     evt.preventDefault();
@@ -251,12 +256,13 @@ export function RoomNavItem({
   };
 
   const optionsVisible = hover || !!menuAnchor;
+  const unreadOrNotification = (notifications && notifications.count > 0) || unread;
 
   return (
     <NavItem
       variant="Background"
       radii="400"
-      highlight={unread !== undefined}
+      highlight={unreadOrNotification}
       aria-selected={selected}
       data-hover={!!menuAnchor}
       onContextMenu={handleContextMenu}
@@ -269,41 +275,53 @@ export function RoomNavItem({
             <Avatar size="200" radii="400">
               {showAvatar ? (
                 <RoomAvatar
-                  roomId={room.roomId}
+                  roomId={roomId}
                   src={
-                    direct
-                      ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                      : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    avatarUrl &&
+                    mxcToHttp(baseUrl, avatarUrl, useAuthentication).thumbnail({
+                      width: 96,
+                      height: 96,
+                    })
                   }
-                  alt={room.name}
+                  alt={roomName}
                   renderFallback={() => (
                     <Text as="span" size="H6">
-                      {nameInitials(room.name)}
+                      {nameInitials(roomName)}
                     </Text>
                   )}
                 />
               ) : (
                 <RoomIcon
-                  style={{ opacity: unread ? config.opacity.P500 : config.opacity.P300 }}
+                  style={{
+                    opacity: unreadOrNotification ? config.opacity.P500 : config.opacity.P300,
+                  }}
                   filled={selected}
                   size="100"
-                  joinRule={room.getJoinRule()}
+                  joinRule={joinRule}
                 />
               )}
             </Avatar>
             <Box as="span" grow="Yes">
-              <Text priority={unread ? '500' : '300'} as="span" size="Inherit" truncate>
-                {room.name}
+              <Text
+                priority={unreadOrNotification ? '500' : '300'}
+                as="span"
+                size="Inherit"
+                truncate
+              >
+                {roomName}
               </Text>
             </Box>
-            {!optionsVisible && !unread && !selected && typingMember.length > 0 && (
+            {!optionsVisible && !unreadOrNotification && !selected && typingMember.length > 0 && (
               <Badge size="300" variant="Secondary" fill="Soft" radii="Pill" outlined>
                 <TypingIndicator size="300" disableAnimation />
               </Badge>
             )}
-            {!optionsVisible && unread && (
+            {!optionsVisible && unreadOrNotification && (
               <UnreadBadgeCenter>
-                <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
+                <UnreadBadge
+                  highlight={notifications?.highlight}
+                  count={notifications?.count ?? 0}
+                />
               </UnreadBadgeCenter>
             )}
             {!optionsVisible && notificationMode !== RoomNotificationMode.Unset && (
@@ -333,9 +351,10 @@ export function RoomNavItem({
                 }}
               >
                 <RoomNavItemMenu
-                  room={room}
+                  roomId={roomId}
                   requestClose={() => setMenuAnchor(undefined)}
                   notificationMode={notificationMode}
+                  notifications={notifications}
                 />
               </FocusTrap>
             }
diff --git a/src/app/features/room/CommandAutocomplete.tsx b/src/app/features/room/CommandAutocomplete.tsx
index 6b7ba56e..02f64532 100644
--- a/src/app/features/room/CommandAutocomplete.tsx
+++ b/src/app/features/room/CommandAutocomplete.tsx
@@ -1,8 +1,7 @@
 import React, { KeyboardEvent as ReactKeyboardEvent, useCallback, useEffect, useMemo } from 'react';
 import { Editor } from 'slate';
 import { Box, config, MenuItem, Text } from 'folds';
-import { Room } from 'matrix-js-sdk';
-import { Command, useCommands } from '../../hooks/useCommands';
+import { Command, CommandRecord } from '../../hooks/useCommands';
 import {
   AutocompleteMenu,
   AutocompleteQuery,
@@ -11,14 +10,13 @@ import {
   replaceWithElement,
 } from '../../components/editor';
 import { UseAsyncSearchOptions, useAsyncSearch } from '../../hooks/useAsyncSearch';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { onTabPress } from '../../utils/keyboard';
 
 type CommandAutoCompleteHandler = (commandName: string) => void;
 
 type CommandAutocompleteProps = {
-  room: Room;
+  commands: CommandRecord;
   editor: Editor;
   query: AutocompleteQuery<string>;
   requestClose: () => void;
@@ -31,13 +29,11 @@ const SEARCH_OPTIONS: UseAsyncSearchOptions = {
 };
 
 export function CommandAutocomplete({
-  room,
+  commands,
   editor,
   query,
   requestClose,
 }: CommandAutocompleteProps) {
-  const mx = useMatrixClient();
-  const commands = useCommands(mx, room);
   const commandNames = useMemo(() => Object.keys(commands) as Command[], [commands]);
 
   const [result, search, resetSearch] = useAsyncSearch(
diff --git a/src/app/features/room/FileDropDialog.tsx b/src/app/features/room/FileDropDialog.tsx
new file mode 100644
index 00000000..a88ed547
--- /dev/null
+++ b/src/app/features/room/FileDropDialog.tsx
@@ -0,0 +1,36 @@
+import {
+  Box,
+  Dialog,
+  Icon,
+  Icons,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  toRem,
+} from 'folds';
+import React from 'react';
+
+export function FileDropDialog({ visible }: { visible: boolean }) {
+  return (
+    <Overlay open={visible} backdrop={<OverlayBackdrop />} style={{ pointerEvents: 'none' }}>
+      <OverlayCenter>
+        <Dialog variant="Primary">
+          <Box
+            direction="Column"
+            justifyContent="Center"
+            alignItems="Center"
+            gap="500"
+            style={{ padding: toRem(60) }}
+          >
+            <Icon size="600" src={Icons.File} />
+            <Text size="H4" align="Center">
+              {`Drop Files"`}
+            </Text>
+            <Text align="Center">Drag and drop files here or click for selection dialog</Text>
+          </Box>
+        </Dialog>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index d9205076..7a6ff8b2 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -26,22 +26,14 @@ import {
   TooltipProvider,
   config,
 } from 'folds';
-import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import classNames from 'classnames';
-
 import * as css from './MembersDrawer.css';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { UseStateProvider } from '../../components/UseStateProvider';
-import {
-  SearchItemStrGetter,
-  UseAsyncSearchOptions,
-  useAsyncSearch,
-} from '../../hooks/useAsyncSearch';
+import { UseAsyncSearchOptions, useAsyncSearch } from '../../hooks/useAsyncSearch';
 import { useDebounce } from '../../hooks/useDebounce';
 import { TypingIndicator } from '../../components/typing-indicator';
-import { getMemberDisplayName, getMemberSearchStr } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
+import { getMemberSearchStr } from '../../utils/room';
 import { useSetSetting, useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { millify } from '../../plugins/millify';
@@ -59,19 +51,30 @@ import { useSpaceOptionally } from '../../hooks/useSpace';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoom } from '../../hooks/useRoom';
+import { useClient } from '../../hooks/useClient';
+import {
+  GetRoomMemberAvatarCallback,
+  GetRoomMemberNameCallback,
+  useRoomMembersAPI,
+} from '../../hooks/useRoomMembers';
+import { JoinRoomMemberObject } from '../../../client/storage/collections';
+import { ClientContext } from '../../../client/context';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { usePendingMembers } from '../../hooks/usePendingMembers';
 
 type MemberDrawerHeaderProps = {
-  room: Room;
+  joinedMemberCount: number;
 };
-function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
+function MemberDrawerHeader({ joinedMemberCount }: MemberDrawerHeaderProps) {
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
 
   return (
     <Header className={css.MembersDrawerHeader} variant="Background" size="600">
       <Box grow="Yes" alignItems="Center" gap="200">
         <Box grow="Yes" alignItems="Center" gap="200">
-          <Text title={`${room.getJoinedMemberCount()} Members`} size="H5" truncate>
-            {`${millify(room.getJoinedMemberCount())} Members`}
+          <Text title={`${joinedMemberCount} Members`} size="H5" truncate>
+            {joinedMemberCount > 0 ? `${millify(joinedMemberCount)} Members` : 'Members'}
           </Text>
         </Box>
         <Box shrink="No" alignItems="Center">
@@ -102,28 +105,33 @@ function MemberDrawerHeader({ room }: MemberDrawerHeaderProps) {
 }
 
 type MemberItemProps = {
-  mx: MatrixClient;
+  ct: ClientContext;
   useAuthentication: boolean;
-  room: Room;
-  member: RoomMember;
+  member: JoinRoomMemberObject;
+  getName: GetRoomMemberNameCallback;
+  getAvatar: GetRoomMemberAvatarCallback;
   onClick: MouseEventHandler<HTMLButtonElement>;
   pressed?: boolean;
   typing?: boolean;
 };
 function MemberItem({
-  mx,
+  ct,
   useAuthentication,
-  room,
   member,
+  getName,
+  getAvatar,
   onClick,
   pressed,
   typing,
 }: MemberItemProps) {
-  const name =
-    getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
-  const avatarMxcUrl = member.getMxcAvatarUrl();
+  const name = getName(member.userId);
+  const avatarMxcUrl = getAvatar(member.userId);
   const avatarUrl = avatarMxcUrl
-    ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication)
+    ? mxcToHttp(ct.session.baseUrl, avatarMxcUrl, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
   return (
@@ -168,32 +176,32 @@ const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   },
 };
 
-const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
-const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
-  getMemberSearchStr(m, query, mxIdToName);
-
-type MembersDrawerProps = {
-  room: Room;
-  members: RoomMember[];
-};
-export function MembersDrawer({ room, members }: MembersDrawerProps) {
-  const mx = useMatrixClient();
+const EMPTY_MEMBER_LIST: JoinRoomMemberObject[] = [];
+export function MembersDrawer() {
+  const ct = useClient();
+  const roomId = useRoom();
   const useAuthentication = useMediaAuthentication();
   const scrollRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
+
   const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(room);
-  const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const creators = useRoomCreators(roomId);
+  const getPowerTag = useGetMemberPowerTag(creators, powerLevels);
   const getPowerLevel = useGetMemberPowerLevel(powerLevels);
 
-  const fetchingMembers = members.length < room.getJoinedMemberCount();
+  const membersAPI = useRoomMembersAPI();
+  const members = membersAPI.memberEventsResult.value ?? EMPTY_MEMBER_LIST;
+  const loadingFromMemory = membersAPI.memberEventsResult.pending;
+
+  const fetchingMembers = usePendingMembers(roomId);
+
   const openUserRoomProfile = useOpenUserRoomProfile();
-  const space = useSpaceOptionally();
+  const spaceId = useSpaceOptionally();
   const openProfileUserId = useUserRoomProfileState()?.userId;
 
-  const membershipFilterMenu = useMembershipFilterMenu();
-  const sortFilterMenu = useMemberSortMenu();
+  const membershipFilterMenu = useMembershipFilterMenu(membersAPI.getMembership);
+  const sortFilterMenu = useMemberSortMenu(membersAPI.getName);
   const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
   const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
 
@@ -201,16 +209,20 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
   const memberSort = useMemberSort(sortFilterIndex, sortFilterMenu);
   const memberPowerSort = useMemberPowerSort(creators, getPowerLevel);
 
-  const typingMembers = useRoomTypingMember(room.roomId);
+  const typingMembers = useRoomTypingMember(roomId);
 
   const filteredMembers = useMemo(
     () => members.filter(membershipFilter.filterFn).sort(memberSort.sortFn).sort(memberPowerSort),
     [members, membershipFilter, memberSort, memberPowerSort]
   );
+  const joinedMemberCount = filteredMembers.length ?? 0;
 
   const [result, search, resetSearch] = useAsyncSearch(
     filteredMembers,
-    getRoomMemberStr,
+    useCallback(
+      (m, query) => getMemberSearchStr(m, query, membersAPI.getName),
+      [membersAPI.getName]
+    ),
     SEARCH_OPTIONS
   );
   if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
@@ -241,7 +253,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
     if (!userId) return;
-    openUserRoomProfile(room.roomId, space?.roomId, userId, btn.getBoundingClientRect(), 'Left');
+    openUserRoomProfile(roomId, spaceId, userId, btn.getBoundingClientRect(), 'Left');
   };
 
   return (
@@ -250,7 +262,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
       shrink="No"
       direction="Column"
     >
-      <MemberDrawerHeader room={room} />
+      <MemberDrawerHeader joinedMemberCount={joinedMemberCount} />
       <Box className={css.MemberDrawerContentBase} grow="Yes">
         <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
           <Box className={css.MemberDrawerContent} direction="Column" gap="200">
@@ -370,7 +382,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
               </IconButton>
             </ScrollTopContainer>
 
-            {!fetchingMembers && !result && processMembers.length === 0 && (
+            {!loadingFromMemory && !fetchingMembers && !result && processMembers.length === 0 && (
               <Text style={{ padding: config.space.S300 }} align="Center">
                 {`No "${membershipFilter.name}" Members`}
               </Text>
@@ -393,7 +405,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                         }}
                         data-index={vItem.index}
                         ref={virtualizer.measureElement}
-                        key={`${room.roomId}-${vItem.index}`}
+                        key={`${roomId}-${vItem.index}`}
                         className={classNames(css.MembersGroupLabel, css.DrawerVirtualItem)}
                         size="L400"
                       >
@@ -409,19 +421,18 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
                       }}
                       className={css.DrawerVirtualItem}
                       data-index={vItem.index}
-                      key={`${room.roomId}-${tagOrMember.userId}`}
+                      key={`${roomId}-${tagOrMember.userId}`}
                       ref={virtualizer.measureElement}
                     >
                       <MemberItem
-                        mx={mx}
+                        ct={ct}
                         useAuthentication={useAuthentication}
-                        room={room}
                         member={tagOrMember}
+                        getName={membersAPI.getName}
+                        getAvatar={membersAPI.getAvatar}
                         onClick={handleMemberClick}
                         pressed={openProfileUserId === tagOrMember.userId}
-                        typing={typingMembers.some(
-                          (receipt) => receipt.userId === tagOrMember.userId
-                        )}
+                        typing={typingMembers.some((userId) => userId === tagOrMember.userId)}
                       />
                     </div>
                   );
@@ -429,7 +440,7 @@ export function MembersDrawer({ room, members }: MembersDrawerProps) {
               </div>
             </Box>
 
-            {fetchingMembers && (
+            {(fetchingMembers || loadingFromMemory) && (
               <Box justifyContent="Center">
                 <Spinner />
               </Box>
diff --git a/src/app/features/room/OutboxView.tsx b/src/app/features/room/OutboxView.tsx
new file mode 100644
index 00000000..493514cf
--- /dev/null
+++ b/src/app/features/room/OutboxView.tsx
@@ -0,0 +1,339 @@
+import React, { Fragment, MouseEventHandler, ReactNode } from 'react';
+import classNames from 'classnames';
+import {
+  Box,
+  color,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  toRem,
+} from 'folds';
+import { printMatrixError } from 'neurone/lib/matrix-request';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { Opts } from 'linkifyjs';
+import { useTimelineView } from './hooks/useTimeline';
+import { useObservableValue } from '../../hooks/useObservableValue';
+import {
+  EventSenderError,
+  EventSenderPending,
+  EventSenderSuccess,
+  LocalEvent,
+  LocalEventSender,
+  LocalMessage,
+} from '../../../client/room/local-event';
+import { MessageBase, Reply } from '../../components/message';
+import { inSameDay, minuteDifference } from '../../utils/time';
+import { MessageLayout, MessageSpacing } from '../../state/settings';
+import { RoomMembersAPI } from '../../hooks/useRoomMembers';
+import { useClient } from '../../hooks/useClient';
+import { fallbackReply, getReplyId } from '../../utils/room';
+import * as css from './message/styles.css';
+import { MemberPowerTag } from '../../../types/matrix/room';
+import { MessageAvatar, MessageUsername, RenderMessageLayout } from './message';
+import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
+import { RenderMessageContent } from '../../components/RenderMessageContent';
+import { InfoCard } from '../../components/info-card';
+import { LocalEventOutbox } from '../../../client/room/local-event/LocalEventOutbox';
+import { MessageBatch } from '../../../client/room/messages';
+import { DayDivider } from './components';
+import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
+
+function MessageSendingError({
+  sender,
+  senderError,
+  outbox,
+}: {
+  sender: LocalEventSender;
+  outbox: LocalEventOutbox;
+  senderError: EventSenderError;
+}) {
+  return (
+    <InfoCard
+      variant="Critical"
+      title="Failed to send message."
+      description={
+        senderError.error
+          ? senderError.error.data.error ?? printMatrixError(senderError.error)
+          : (senderError.cause instanceof Error && senderError.cause.message) ?? 'Unknown Error'
+      }
+      after={
+        <Box gap="200">
+          <TooltipProvider
+            tooltip={
+              <Tooltip>
+                <Text size="T300">Retry</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                ref={triggerRef}
+                variant="Critical"
+                size="300"
+                radii="300"
+                outlined
+                onClick={() => senderError.resend()}
+              >
+                <Icon size="100" src={Icons.Reload} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+          <TooltipProvider
+            tooltip={
+              <Tooltip>
+                <Text size="T300">Delete</Text>
+              </Tooltip>
+            }
+          >
+            {(triggerRef) => (
+              <IconButton
+                ref={triggerRef}
+                variant="Critical"
+                size="300"
+                radii="300"
+                outlined
+                onClick={() => outbox.remove(sender)}
+              >
+                <Icon size="100" src={Icons.Delete} />
+              </IconButton>
+            )}
+          </TooltipProvider>
+        </Box>
+      }
+    />
+  );
+}
+
+type MessageSendingProps = {
+  outbox: LocalEventOutbox;
+  sender: LocalEventSender;
+  collapse: boolean;
+  messageLayout: MessageLayout;
+  messageSpacing: MessageSpacing;
+  membersAPI: RoomMembersAPI;
+
+  memberPowerTag?: MemberPowerTag;
+  accessibleTagColors?: Map<string, string>;
+  legacyUsernameColor?: boolean;
+  onUserClick: MouseEventHandler<HTMLButtonElement>;
+  onUsernameClick: MouseEventHandler<HTMLButtonElement>;
+  children: ReactNode;
+};
+
+function MessageSending({
+  outbox,
+  sender,
+  collapse,
+  messageLayout,
+  messageSpacing,
+  membersAPI,
+  memberPowerTag,
+  accessibleTagColors,
+  legacyUsernameColor,
+  onUserClick,
+  onUsernameClick,
+  children,
+}: MessageSendingProps) {
+  const ct = useClient();
+  const { userId } = ct.session;
+  const senderState = useObservableValue(sender.state);
+  const { original } = sender.localEvent;
+
+  const senderDisplayName = membersAPI.getName(userId);
+  const senderAvatarMxc = membersAPI.getAvatar(userId);
+
+  return (
+    <MessageBase
+      className={classNames(css.MessageBase, {
+        [css.MessageBaseBubbleCollapsed]: messageLayout === MessageLayout.Bubble && collapse,
+      })}
+      tabIndex={0}
+      space={messageSpacing}
+      collapse={collapse || (!!getReplyId(original.content) && !fallbackReply(original.content))}
+    >
+      <RenderMessageLayout
+        avatar={
+          !collapse &&
+          messageLayout !== MessageLayout.Compact && (
+            <MessageAvatar
+              userId={userId}
+              displayName={senderDisplayName}
+              avatarUrl={senderAvatarMxc}
+              onUserClick={onUserClick}
+              bubbleLayout={messageLayout === MessageLayout.Bubble}
+            />
+          )
+        }
+        username={
+          !collapse && (
+            <MessageUsername
+              userId={userId}
+              displayName={senderDisplayName}
+              onUserClick={onUserClick}
+              onUsernameClick={onUsernameClick}
+              messageLayout={messageLayout}
+              memberPowerTag={memberPowerTag}
+              accessibleTagColors={accessibleTagColors}
+              legacyUsernameColor={legacyUsernameColor}
+            />
+          )
+        }
+        time={
+          <>
+            {senderState instanceof EventSenderSuccess && <Icon size="50" src={Icons.Check} />}
+            {senderState instanceof EventSenderError && (
+              <Icon style={{ color: color.Critical.Main }} filled size="50" src={Icons.Warning} />
+            )}
+            {senderState instanceof EventSenderPending && <Icon size="50" src={Icons.Clock} />}
+          </>
+        }
+        collapse={collapse}
+        messageLayout={messageLayout}
+      >
+        {children}
+        {senderState instanceof EventSenderError && (
+          <div
+            style={{
+              marginTop: config.space.S200,
+              width: toRem(400),
+            }}
+          >
+            <MessageSendingError sender={sender} outbox={outbox} senderError={senderState} />
+          </div>
+        )}
+      </RenderMessageLayout>
+    </MessageBase>
+  );
+}
+
+export function OutboxView({
+  messageBatch,
+  senders,
+  redacted,
+  messageLayout,
+  messageSpacing,
+  membersAPI,
+  getMemberPowerTag,
+  accessibleTagColors,
+  legacyUsernameColor,
+  onUserClick,
+  onUsernameClick,
+  mediaAutoLoad,
+  urlPreview,
+  hour24Clock,
+  dateFormatString,
+  onReplyClick,
+  htmlReactParserOptions,
+  linkifyOpts,
+}: {
+  messageBatch: MessageBatch;
+  senders: readonly LocalEventSender[];
+  redacted: Set<string>;
+  messageLayout: MessageLayout;
+  messageSpacing: MessageSpacing;
+  membersAPI: RoomMembersAPI;
+  getMemberPowerTag: GetMemberPowerTag;
+  accessibleTagColors?: Map<string, string>;
+  legacyUsernameColor?: boolean;
+  onUserClick: MouseEventHandler<HTMLButtonElement>;
+  onUsernameClick: MouseEventHandler<HTMLButtonElement>;
+  mediaAutoLoad?: boolean;
+  urlPreview?: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
+  onReplyClick?: MouseEventHandler | undefined;
+  htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
+}) {
+  const ct = useClient();
+  const roomId = useRoom();
+  const timeline = useTimelineView();
+  const direct = useIsDirectRoom();
+
+  const lastMessage = messageBatch.messages.events[messageBatch.size - 1];
+
+  let prevMsg: LocalEvent | undefined =
+    lastMessage && lastMessage.sender === ct.session.userId
+      ? new LocalEvent(
+          new LocalMessage(roomId, lastMessage.type, lastMessage.content),
+          new LocalMessage(roomId, lastMessage.type, lastMessage.content),
+          '',
+          lastMessage.origin_server_ts
+        )
+      : undefined;
+
+  return (
+    <>
+      {senders.map((sender) => {
+        const dayDivider = prevMsg ? !inSameDay(prevMsg.ts, sender.localEvent.ts) : false;
+
+        const collapse =
+          !!prevMsg &&
+          !dayDivider &&
+          prevMsg.original.type === sender.localEvent.original.type &&
+          minuteDifference(prevMsg.ts, sender.localEvent.ts) < 2;
+        prevMsg = sender.localEvent;
+
+        const replyEventId = getReplyId(sender.localEvent.original.content);
+
+        const replyJSX = replyEventId && (
+          <Reply
+            roomId={roomId}
+            eventId={replyEventId}
+            onClick={onReplyClick}
+            getMemberPowerTag={getMemberPowerTag}
+            accessibleTagColors={accessibleTagColors}
+            legacyUsernameColor={legacyUsernameColor || direct}
+            redacted={redacted.has(replyEventId)}
+            getMemberName={membersAPI.getName}
+            timeline={timeline}
+            htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+            messageLayout={messageLayout}
+            messageSpacing={messageSpacing}
+            mediaAutoLoad={mediaAutoLoad}
+          />
+        );
+
+        return (
+          <Fragment key={sender.localEvent.txnId}>
+            {dayDivider && <DayDivider ts={sender.localEvent.ts} messageSpacing={messageSpacing} />}
+            {replyJSX}
+            <MessageSending
+              key={sender.localEvent.txnId}
+              outbox={timeline.outbox}
+              sender={sender}
+              membersAPI={membersAPI}
+              messageSpacing={messageSpacing}
+              messageLayout={messageLayout}
+              collapse={collapse}
+              onUserClick={onUserClick}
+              onUsernameClick={onUsernameClick}
+              memberPowerTag={getMemberPowerTag(ct.session.userId)}
+              accessibleTagColors={accessibleTagColors}
+              legacyUsernameColor={legacyUsernameColor || direct}
+            >
+              <RenderMessageContent
+                displayName={membersAPI.getName(ct.session.userId)}
+                eventType={sender.localEvent.original.type}
+                ts={sender.localEvent.ts}
+                content={sender.localEvent.original.content}
+                mediaAutoLoad={mediaAutoLoad}
+                urlPreview={urlPreview}
+                htmlReactParserOptions={htmlReactParserOptions}
+                linkifyOpts={linkifyOpts}
+                outlineAttachment={messageLayout === MessageLayout.Bubble}
+              />
+            </MessageSending>
+          </Fragment>
+        );
+      })}
+    </>
+  );
+}
diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 24878d5e..ade37e01 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -7,47 +7,91 @@ import { MembersDrawer } from './MembersDrawer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import { PowerLevelsContextProvider, usePowerLevels } from '../../hooks/usePowerLevels';
+import {
+  PowerLevelsContextProvider,
+  usePowerLevels,
+  usePowerLevelsState,
+} from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { markAsRead } from '../../utils/notifications';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRoomMembers } from '../../hooks/useRoomMembers';
+import { RoomMembersAPIProvider, useCreateRoomMembersAPI } from '../../hooks/useRoomMembers';
+import {
+  PowerLevelTagsContextProvider,
+  usePowerLevelTags,
+  usePowerLevelTagsState,
+} from '../../hooks/usePowerLevelTags';
+import { usePendingMemberLoader, usePendingMembers } from '../../hooks/usePendingMembers';
+import { useObservableValue, useObservableValueOptionally } from '../../hooks/useObservableValue';
+import { useClient } from '../../hooks/useClient';
+import { ThreadView } from './thread-view';
+import { TimelineViewProvider } from './hooks/useTimeline';
 
 export function Room() {
   const { eventId } = useParams();
-  const room = useRoom();
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const roomId = useRoom();
+  const roomToTimeline = useObservableValue(ct.roomToTimeline);
+
+  const timeline = roomToTimeline.get(roomId);
+  const activeThreadId = useObservableValueOptionally(timeline?.activeThread);
+  const threads = useObservableValueOptionally(timeline?.threads);
+  const threadTimeline = activeThreadId ? threads?.get(activeThreadId) : undefined;
 
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const screenSize = useScreenSizeContext();
-  const powerLevels = usePowerLevels(room);
-  const members = useRoomMembers(mx, room.roomId);
+  const powerLevelStateResult = usePowerLevelsState(roomId);
+  const powerLevels = usePowerLevels(powerLevelStateResult.value);
+  const powerLevelTagsStateResult = usePowerLevelTagsState(roomId);
+  const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsStateResult.value);
+  const membersAPI = useCreateRoomMembersAPI(roomId);
+  const membersPending = usePendingMembers(roomId);
+  usePendingMemberLoader(roomId, membersPending);
 
   useKeyDown(
     window,
     useCallback(
       (evt) => {
         if (isKeyHotkey('escape', evt)) {
-          markAsRead(mx, room.roomId, hideActivity);
+          // markAsRead(mx, roomId, hideActivity);
         }
       },
-      [mx, room.roomId, hideActivity]
+      [roomId, hideActivity]
     )
   );
 
   return (
-    <PowerLevelsContextProvider value={powerLevels}>
-      <Box grow="Yes">
-        <RoomView room={room} eventId={eventId} />
-        {screenSize === ScreenSize.Desktop && isDrawer && (
-          <>
-            <Line variant="Background" direction="Vertical" size="300" />
-            <MembersDrawer key={room.roomId} room={room} members={members} />
-          </>
-        )}
-      </Box>
-    </PowerLevelsContextProvider>
+    <RoomMembersAPIProvider value={membersAPI}>
+      <PowerLevelsContextProvider value={powerLevels}>
+        <PowerLevelTagsContextProvider value={powerLevelTags}>
+          {timeline && (
+            <Box grow="Yes">
+              <TimelineViewProvider value={timeline}>
+                <RoomView key={roomId} timeline={timeline} eventId={eventId} />
+              </TimelineViewProvider>
+
+              {threadTimeline ? (
+                <TimelineViewProvider value={threadTimeline}>
+                  <Line variant="Surface" direction="Vertical" size="300" />
+                  <ThreadView
+                    threadTimeline={threadTimeline}
+                    requestClose={() => timeline.closeThread()}
+                  />
+                </TimelineViewProvider>
+              ) : (
+                screenSize === ScreenSize.Desktop &&
+                isDrawer && (
+                  <>
+                    <Line variant="Background" direction="Vertical" size="300" />
+                    <MembersDrawer key={roomId} />
+                  </>
+                )
+              )}
+            </Box>
+          )}
+        </PowerLevelTagsContextProvider>
+      </PowerLevelsContextProvider>
+    </RoomMembersAPIProvider>
   );
 }
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index ae46d2d0..13acf3da 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -7,34 +7,15 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtom } from 'jotai';
 import { isKeyHotkey } from 'is-hotkey';
-import { EventType, IContent, MsgType, RelationType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { Transforms, Editor } from 'slate';
-import {
-  Box,
-  Dialog,
-  Icon,
-  IconButton,
-  Icons,
-  Line,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  PopOut,
-  Scroll,
-  Text,
-  config,
-  toRem,
-} from 'folds';
+import { Box, Checkbox, Icon, IconButton, Icons, Line, PopOut, Scroll, Text, config } from 'folds';
 
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import {
   CustomEditor,
   Toolbar,
-  toMatrixCustomHTML,
-  toPlainText,
   AUTOCOMPLETE_PREFIXES,
   AutocompletePrefix,
   AutocompleteQuery,
@@ -47,33 +28,15 @@ import {
   createEmoticonElement,
   moveCursor,
   resetEditorHistory,
-  customHtmlEqualsPlainText,
-  trimCustomHtml,
   isEmptyEditor,
-  getBeginCommand,
-  trimCommand,
-  getMentions,
 } from '../../components/editor';
 import { EmojiBoard, EmojiBoardTab } from '../../components/emoji-board';
 import { UseStateProvider } from '../../components/UseStateProvider';
-import {
-  TUploadContent,
-  encryptFile,
-  getImageInfo,
-  getMxIdLocalPart,
-  mxcUrlToHttp,
-} from '../../utils/matrix';
 import { useTypingStatusUpdater } from '../../hooks/useTypingStatusUpdater';
-import { useFilePicker } from '../../hooks/useFilePicker';
-import { useFilePasteHandler } from '../../hooks/useFilePasteHandler';
-import { useFileDropZone } from '../../hooks/useFileDrop';
 import {
-  TUploadItem,
-  TUploadMetadata,
-  roomIdToMsgDraftAtomFamily,
-  roomIdToReplyDraftAtomFamily,
-  roomIdToUploadItemsAtomFamily,
-  roomUploadAtomFamily,
+  composerToDraftAtom,
+  getComposerId,
+  composerToReplyDraftAtom,
 } from '../../state/room/roomInputDrafts';
 import { UploadCardRenderer } from '../../components/upload-card';
 import {
@@ -82,70 +45,62 @@ import {
   UploadBoardHeader,
   UploadBoardImperativeHandlers,
 } from '../../components/upload-board';
-import {
-  Upload,
-  UploadStatus,
-  UploadSuccess,
-  createUploadFamilyObserverAtom,
-} from '../../state/upload';
-import { getImageUrlBlob, loadImageElement } from '../../utils/dom';
-import { safeFile } from '../../utils/mimeTypes';
-import { fulfilledPromiseSettledResult } from '../../utils/common';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import {
-  getAudioMsgContent,
-  getFileMsgContent,
-  getImageMsgContent,
-  getVideoMsgContent,
-} from './msgContent';
-import { getMemberDisplayName, getMentionContent, trimReplyFromBody } from '../../utils/room';
 import { CommandAutocomplete } from './CommandAutocomplete';
-import { Command, SHRUG, TABLEFLIP, UNFLIP, useCommands } from '../../hooks/useCommands';
+import { useCommands } from '../../hooks/useCommands';
 import { mobileOrTablet } from '../../utils/user-agent';
 import { useElementSizeObserver } from '../../hooks/useElementSizeObserver';
-import { ReplyLayout, ThreadIndicator } from '../../components/message';
-import { roomToParentsAtom } from '../../state/room/roomToParents';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import colorMXID from '../../../util/colorMXID';
-import { useIsDirectRoom } from '../../hooks/useRoom';
+import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
 import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
-import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { usePowerLevelTagsContext } from '../../hooks/usePowerLevelTags';
 import { useComposingCheck } from '../../hooks/useComposingCheck';
+import {
+  useSendMessage,
+  useSendStickerMessage,
+  useSendUploadMessage,
+} from './hooks/useSendMessage';
+import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { FileDropDialog } from './FileDropDialog';
+import { useUploadItemPicker } from './hooks/useUploadItemPicker';
+import { useUploadItems } from './hooks/useUploadItems';
+import { useUploadsAtom } from './hooks/useUploadsAtom';
 
 interface RoomInputProps {
   editor: Editor;
   fileDropContainerRef: RefObject<HTMLElement>;
-  roomId: string;
-  room: Room;
+  threadId?: string;
 }
 export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
-  ({ editor, fileDropContainerRef, roomId, room }, ref) => {
-    const mx = useMatrixClient();
-    const useAuthentication = useMediaAuthentication();
+  ({ editor, fileDropContainerRef, threadId }, ref) => {
+    const roomId = useRoom();
+
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
-    const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
     const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
-    const direct = useIsDirectRoom();
-    const commands = useCommands(mx, room);
-    const emojiBtnRef = useRef<HTMLButtonElement>(null);
-    const roomToParents = useAtomValue(roomToParentsAtom);
-    const powerLevels = usePowerLevelsContext();
-    const creators = useRoomCreators(room);
+    const [ping, setPing] = useState(true);
 
-    const [msgDraft, setMsgDraft] = useAtom(roomIdToMsgDraftAtomFamily(roomId));
-    const [replyDraft, setReplyDraft] = useAtom(roomIdToReplyDraftAtomFamily(roomId));
+    const direct = useIsDirectRoom();
+    const commands = useCommands();
+    const emojiBtnRef = useRef<HTMLButtonElement>(null);
+    const powerLevels = usePowerLevelsContext();
+    const creators = useRoomCreators(roomId);
+    const memberAPI = useRoomMembersAPI();
+
+    const composerId = getComposerId(roomId, threadId);
+    const [draft, setDraft] = useAtom(composerToDraftAtom(composerId));
+    const [replyDraft, setReplyDraft] = useAtom(composerToReplyDraftAtom(composerId));
     const replyUserID = replyDraft?.userId;
 
-    const powerLevelTags = usePowerLevelTags(room, powerLevels);
+    const powerLevelTags = usePowerLevelTagsContext();
     const creatorsTag = useRoomCreatorsTag();
-    const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+    const getMemberPowerTag = useGetMemberPowerTag(creators, powerLevels);
     const theme = useTheme();
     const accessibleTagColors = useAccessiblePowerTagColors(
       theme.kind,
@@ -161,223 +116,74 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       legacyUsernameColor || direct ? colorMXID(replyUserID ?? '') : replyPowerColor;
 
     const [uploadBoard, setUploadBoard] = useState(true);
-    const [selectedFiles, setSelectedFiles] = useAtom(roomIdToUploadItemsAtomFamily(roomId));
-    const uploadFamilyObserverAtom = createUploadFamilyObserverAtom(
-      roomUploadAtomFamily,
-      selectedFiles.map((f) => f.file)
+    const { uploadItems, addUploadItems, removeUploadItem, updateUploadMetadata, dropUploads } =
+      useUploadItems();
+    useEffect(() => setUploadBoard(true), [uploadItems]); // open upload board so items start uploading in UploadCard
+    const { pickFile, handlePaste, dropZoneVisible } = useUploadItemPicker(
+      fileDropContainerRef,
+      addUploadItems
     );
+
+    const uploadsAtom = useUploadsAtom(uploadItems);
     const uploadBoardHandlers = useRef<UploadBoardImperativeHandlers>();
 
-    const imagePackRooms: Room[] = useImagePackRooms(roomId, roomToParents);
+    const imagePackRooms: string[] = useImagePackRooms(roomId);
 
     const [toolbar, setToolbar] = useSetting(settingsAtom, 'editorToolbar');
     const [autocompleteQuery, setAutocompleteQuery] =
       useState<AutocompleteQuery<AutocompletePrefix>>();
 
-    const sendTypingStatus = useTypingStatusUpdater(mx, roomId);
+    const sendTypingStatus = useTypingStatusUpdater(roomId);
 
-    const handleFiles = useCallback(
-      async (files: File[]) => {
-        setUploadBoard(true);
-        const safeFiles = files.map(safeFile);
-        const fileItems: TUploadItem[] = [];
-
-        if (room.hasEncryptionStateEvent()) {
-          const encryptFiles = fulfilledPromiseSettledResult(
-            await Promise.allSettled(safeFiles.map((f) => encryptFile(f)))
-          );
-          encryptFiles.forEach((ef) =>
-            fileItems.push({
-              ...ef,
-              metadata: {
-                markedAsSpoiler: false,
-              },
-            })
-          );
-        } else {
-          safeFiles.forEach((f) =>
-            fileItems.push({
-              file: f,
-              originalFile: f,
-              encInfo: undefined,
-              metadata: {
-                markedAsSpoiler: false,
-              },
-            })
-          );
-        }
-        setSelectedFiles({
-          type: 'PUT',
-          item: fileItems,
-        });
-      },
-      [setSelectedFiles, room]
-    );
-    const pickFile = useFilePicker(handleFiles, true);
-    const handlePaste = useFilePasteHandler(handleFiles);
-    const dropZoneVisible = useFileDropZone(fileDropContainerRef, handleFiles);
     const [hideStickerBtn, setHideStickerBtn] = useState(document.body.clientWidth < 500);
 
     const isComposing = useComposingCheck();
 
+    const sendMessage = useSendMessage(editor, commands, threadId);
+    const sendSticker = useSendStickerMessage(threadId);
+    const sendUploads = useSendUploadMessage(dropUploads, threadId);
+
     useElementSizeObserver(
       useCallback(() => document.body, []),
       useCallback((width) => setHideStickerBtn(width < 500), [])
     );
 
     useEffect(() => {
-      Transforms.insertFragment(editor, msgDraft);
-    }, [editor, msgDraft]);
+      Transforms.insertFragment(editor, draft);
+    }, [editor, draft]);
 
     useEffect(
       () => () => {
         if (!isEmptyEditor(editor)) {
           const parsedDraft = JSON.parse(JSON.stringify(editor.children));
-          setMsgDraft(parsedDraft);
+          setDraft(parsedDraft);
         } else {
-          setMsgDraft([]);
+          setDraft([]);
         }
         resetEditor(editor);
         resetEditorHistory(editor);
       },
-      [roomId, editor, setMsgDraft]
+      [roomId, editor, setDraft]
     );
 
-    const handleFileMetadata = useCallback(
-      (fileItem: TUploadItem, metadata: TUploadMetadata) => {
-        setSelectedFiles({
-          type: 'REPLACE',
-          item: fileItem,
-          replacement: { ...fileItem, metadata },
-        });
-      },
-      [setSelectedFiles]
-    );
-
-    const handleRemoveUpload = useCallback(
-      (upload: TUploadContent | TUploadContent[]) => {
-        const uploads = Array.isArray(upload) ? upload : [upload];
-        setSelectedFiles({
-          type: 'DELETE',
-          item: selectedFiles.filter((f) => uploads.find((u) => u === f.file)),
-        });
-        uploads.forEach((u) => roomUploadAtomFamily.remove(u));
-      },
-      [setSelectedFiles, selectedFiles]
-    );
-
-    const handleCancelUpload = (uploads: Upload[]) => {
-      uploads.forEach((upload) => {
-        if (upload.status === UploadStatus.Loading) {
-          mx.cancelUpload(upload.promise);
-        }
-      });
-      handleRemoveUpload(uploads.map((upload) => upload.file));
-    };
-
-    const handleSendUpload = async (uploads: UploadSuccess[]) => {
-      const contentsPromises = uploads.map(async (upload) => {
-        const fileItem = selectedFiles.find((f) => f.file === upload.file);
-        if (!fileItem) throw new Error('Broken upload');
-
-        if (fileItem.file.type.startsWith('image')) {
-          return getImageMsgContent(mx, fileItem, upload.mxc);
-        }
-        if (fileItem.file.type.startsWith('video')) {
-          return getVideoMsgContent(mx, fileItem, upload.mxc);
-        }
-        if (fileItem.file.type.startsWith('audio')) {
-          return getAudioMsgContent(fileItem, upload.mxc);
-        }
-        return getFileMsgContent(fileItem, upload.mxc);
-      });
-      handleCancelUpload(uploads);
-      const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises));
-      contents.forEach((content) => mx.sendMessage(roomId, content as any));
-    };
-
     const submit = useCallback(() => {
       uploadBoardHandlers.current?.handleSend();
 
-      const commandName = getBeginCommand(editor);
-      let plainText = toPlainText(editor.children, isMarkdown).trim();
-      let customHtml = trimCustomHtml(
-        toMatrixCustomHTML(editor.children, {
-          allowTextFormatting: true,
-          allowBlockMarkdown: isMarkdown,
-          allowInlineMarkdown: isMarkdown,
-        })
+      sendMessage(
+        replyDraft
+          ? {
+              userId: replyDraft.userId,
+              eventId: replyDraft.eventId,
+              ping,
+            }
+          : undefined
       );
-      let msgType = MsgType.Text;
 
-      if (commandName) {
-        plainText = trimCommand(commandName, plainText);
-        customHtml = trimCommand(commandName, customHtml);
-      }
-      if (commandName === Command.Me) {
-        msgType = MsgType.Emote;
-      } else if (commandName === Command.Notice) {
-        msgType = MsgType.Notice;
-      } else if (commandName === Command.Shrug) {
-        plainText = `${SHRUG} ${plainText}`;
-        customHtml = `${SHRUG} ${customHtml}`;
-      } else if (commandName === Command.TableFlip) {
-        plainText = `${TABLEFLIP} ${plainText}`;
-        customHtml = `${TABLEFLIP} ${customHtml}`;
-      } else if (commandName === Command.UnFlip) {
-        plainText = `${UNFLIP} ${plainText}`;
-        customHtml = `${UNFLIP} ${customHtml}`;
-      } else if (commandName) {
-        const commandContent = commands[commandName as Command];
-        if (commandContent) {
-          commandContent.exe(plainText);
-        }
-        resetEditor(editor);
-        resetEditorHistory(editor);
-        sendTypingStatus(false);
-        return;
-      }
-
-      if (plainText === '') return;
-
-      const body = plainText;
-      const formattedBody = customHtml;
-      const mentionData = getMentions(mx, roomId, editor);
-
-      const content: IContent = {
-        msgtype: msgType,
-        body,
-      };
-
-      if (replyDraft && replyDraft.userId !== mx.getUserId()) {
-        mentionData.users.add(replyDraft.userId);
-      }
-
-      const mMentions = getMentionContent(Array.from(mentionData.users), mentionData.room);
-      content['m.mentions'] = mMentions;
-
-      if (replyDraft || !customHtmlEqualsPlainText(formattedBody, body)) {
-        content.format = 'org.matrix.custom.html';
-        content.formatted_body = formattedBody;
-      }
-      if (replyDraft) {
-        content['m.relates_to'] = {
-          'm.in_reply_to': {
-            event_id: replyDraft.eventId,
-          },
-        };
-        if (replyDraft.relation?.rel_type === RelationType.Thread) {
-          content['m.relates_to'].event_id = replyDraft.relation.event_id;
-          content['m.relates_to'].rel_type = RelationType.Thread;
-          content['m.relates_to'].is_falling_back = false;
-        }
-      }
-      mx.sendMessage(roomId, content as any);
       resetEditor(editor);
       resetEditorHistory(editor);
       setReplyDraft(undefined);
       sendTypingStatus(false);
-    }, [mx, roomId, editor, replyDraft, sendTypingStatus, setReplyDraft, isMarkdown, commands]);
+    }, [editor, replyDraft, ping, sendTypingStatus, setReplyDraft, sendMessage]);
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {
@@ -430,41 +236,26 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       moveCursor(editor);
     };
 
-    const handleStickerSelect = async (mxc: string, shortcode: string, label: string) => {
-      const stickerUrl = mxcUrlToHttp(mx, mxc, useAuthentication);
-      if (!stickerUrl) return;
-
-      const info = await getImageInfo(
-        await loadImageElement(stickerUrl),
-        await getImageUrlBlob(stickerUrl)
-      );
-
-      mx.sendEvent(roomId, EventType.Sticker, {
-        body: label,
-        url: mxc,
-        info,
-      });
-    };
-
     return (
       <div ref={ref}>
-        {selectedFiles.length > 0 && (
+        {uploadItems.length > 0 && (
           <UploadBoard
             header={
               <UploadBoardHeader
                 open={uploadBoard}
                 onToggle={() => setUploadBoard(!uploadBoard)}
-                uploadFamilyObserverAtom={uploadFamilyObserverAtom}
-                onSend={handleSendUpload}
+                uploadItems={uploadItems}
+                uploadsAtom={uploadsAtom}
+                onSend={sendUploads}
                 imperativeHandlerRef={uploadBoardHandlers}
-                onCancel={handleCancelUpload}
+                onCancel={dropUploads}
               />
             }
           >
             {uploadBoard && (
               <Scroll size="300" hideTrack visibility="Hover">
                 <UploadBoardContent>
-                  {Array.from(selectedFiles)
+                  {Array.from(uploadItems)
                     .reverse()
                     .map((fileItem, index) => (
                       <UploadCardRenderer
@@ -472,8 +263,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                         key={index}
                         isEncrypted={!!fileItem.encInfo}
                         fileItem={fileItem}
-                        setMetadata={handleFileMetadata}
-                        onRemove={handleRemoveUpload}
+                        setMetadata={updateUploadMetadata}
+                        onRemove={removeUploadItem}
                       />
                     ))}
                 </UploadBoardContent>
@@ -481,29 +272,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
             )}
           </UploadBoard>
         )}
-        <Overlay
-          open={dropZoneVisible}
-          backdrop={<OverlayBackdrop />}
-          style={{ pointerEvents: 'none' }}
-        >
-          <OverlayCenter>
-            <Dialog variant="Primary">
-              <Box
-                direction="Column"
-                justifyContent="Center"
-                alignItems="Center"
-                gap="500"
-                style={{ padding: toRem(60) }}
-              >
-                <Icon size="600" src={Icons.File} />
-                <Text size="H4" align="Center">
-                  {`Drop Files in "${room?.name || 'Room'}"`}
-                </Text>
-                <Text align="Center">Drag and drop files here or click for selection dialog</Text>
-              </Box>
-            </Dialog>
-          </OverlayCenter>
-        </Overlay>
+        <FileDropDialog visible={dropZoneVisible} />
         {autocompleteQuery?.prefix === AutocompletePrefix.RoomMention && (
           <RoomMentionAutocomplete
             roomId={roomId}
@@ -514,7 +283,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         )}
         {autocompleteQuery?.prefix === AutocompletePrefix.UserMention && (
           <UserMentionAutocomplete
-            room={room}
+            roomId={roomId}
             editor={editor}
             query={autocompleteQuery}
             requestClose={handleCloseAutocomplete}
@@ -530,7 +299,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         )}
         {autocompleteQuery?.prefix === AutocompletePrefix.Command && (
           <CommandAutocomplete
-            room={room}
+            commands={commands}
             editor={editor}
             query={autocompleteQuery}
             requestClose={handleCloseAutocomplete}
@@ -559,24 +328,24 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   >
                     <Icon src={Icons.Cross} size="50" />
                   </IconButton>
-                  <Box direction="Row" gap="200" alignItems="Center">
-                    {replyDraft.relation?.rel_type === RelationType.Thread && <ThreadIndicator />}
-                    <ReplyLayout
-                      userColor={replyUsernameColor}
-                      username={
-                        <Text size="T300" truncate>
-                          <b>
-                            {getMemberDisplayName(room, replyDraft.userId) ??
-                              getMxIdLocalPart(replyDraft.userId) ??
-                              replyDraft.userId}
-                          </b>
-                        </Text>
-                      }
-                    >
-                      <Text size="T300" truncate>
-                        {trimReplyFromBody(replyDraft.body)}
-                      </Text>
-                    </ReplyLayout>
+                  <Box grow="Yes" direction="Row" gap="200" alignItems="Center">
+                    <Text size="T300" truncate>
+                      Quote{' '}
+                      <strong style={{ color: replyUsernameColor }}>
+                        @{memberAPI.getName(replyDraft.userId)}
+                      </strong>
+                    </Text>
+                  </Box>
+                  <Box alignItems="Center" shrink="No" gap="100">
+                    <Text as="label" size="T200">
+                      Ping:
+                    </Text>
+                    <Checkbox
+                      checked={ping}
+                      onClick={() => setPing(!ping)}
+                      variant="Success"
+                      size="100"
+                    />
                   </Box>
                 </Box>
               </div>
@@ -622,7 +391,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                         returnFocusOnDeactivate={false}
                         onEmojiSelect={handleEmoticonSelect}
                         onCustomEmojiSelect={handleEmoticonSelect}
-                        onStickerSelect={handleStickerSelect}
+                        onStickerSelect={sendSticker}
                         requestClose={() => {
                           setEmojiBoardTab((t) => {
                             if (t) {
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 2281b59d..fb5401af 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -1,9 +1,8 @@
 /* eslint-disable react/destructuring-assignment */
 import React, {
-  Dispatch,
+  forwardRef,
   MouseEventHandler,
   RefObject,
-  SetStateAction,
   useCallback,
   useEffect,
   useLayoutEffect,
@@ -11,59 +10,20 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  Direction,
-  EventTimeline,
-  EventTimelineSet,
-  EventTimelineSetHandlerMap,
-  IContent,
-  MatrixClient,
-  MatrixEvent,
-  Room,
-  RoomEvent,
-  RoomEventHandlerMap,
-} from 'matrix-js-sdk';
 import { HTMLReactParserOptions } from 'html-react-parser';
-import classNames from 'classnames';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
-import to from 'await-to-js';
-import { useAtomValue, useSetAtom } from 'jotai';
-import {
-  Badge,
-  Box,
-  Chip,
-  ContainerColor,
-  Icon,
-  Icons,
-  Line,
-  Scroll,
-  Text,
-  as,
-  color,
-  config,
-  toRem,
-} from 'folds';
-import { isKeyHotkey } from 'is-hotkey';
+import { Box, Scroll, config, toRem } from 'folds';
 import { Opts as LinkifyOpts } from 'linkifyjs';
-import { useTranslation } from 'react-i18next';
-import { eventWithShortcode, factoryEventSentBy, getMxIdLocalPart } from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useVirtualPaginator, ItemRange } from '../../hooks/useVirtualPaginator';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { useVirtualPaginator } from '../../hooks/useVirtualPaginator';
 import { useAlive } from '../../hooks/useAlive';
-import { editableActiveElement, scrollToBottom } from '../../utils/dom';
+import { scrollToBottom } from '../../utils/dom';
 import {
   DefaultPlaceholder,
   CompactPlaceholder,
-  Reply,
   MessageBase,
-  MessageUnsupportedContent,
-  Time,
-  MessageNotDecryptedContent,
-  RedactedContent,
-  MSticker,
-  ImageContent,
-  EventContent,
+  Reply,
 } from '../../components/message';
 import {
   factoryRenderLinkifyWithMention,
@@ -72,378 +32,94 @@ import {
   makeMentionCustomProps,
   renderMatrixMention,
 } from '../../plugins/react-custom-html-parser';
-import {
-  canEditEvent,
-  decryptAllTimelineEvent,
-  getEditedEvent,
-  getEventReactions,
-  getLatestEditableEvt,
-  getMemberDisplayName,
-  getReactionContent,
-  isMembershipChanged,
-  reactionOrEditEvent,
-} from '../../utils/room';
+import { getLatestEditEvent, getReplyId, getThreadId } from '../../utils/room';
 import { useSetting } from '../../state/hooks/settings';
 import { MessageLayout, settingsAtom } from '../../state/settings';
-import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
-import { Reactions, Message, Event, EncryptedContent } from './message';
-import { useMemberEventParser } from '../../hooks/useMemberEventParser';
-import * as customHtmlCss from '../../styles/CustomHtml.css';
+import { Reactions, Message, ThreadEvents } from './message';
 import { RoomIntro } from '../../components/room-intro';
-import {
-  getIntersectionObserverEntry,
-  useIntersectionObserver,
-} from '../../hooks/useIntersectionObserver';
-import { markAsRead } from '../../utils/notifications';
-import { useDebounce } from '../../hooks/useDebounce';
-import { getResizeObserverEntry, useResizeObserver } from '../../hooks/useResizeObserver';
-import * as css from './RoomTimeline.css';
-import { inSameDay, minuteDifference, timeDayMonthYear, today, yesterday } from '../../utils/time';
-import { createMentionElement, isEmptyEditor, moveCursor } from '../../components/editor';
-import { roomIdToReplyDraftAtomFamily } from '../../state/room/roomInputDrafts';
+import { inSameDay, minuteDifference } from '../../utils/time';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
-import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
-import { useKeyDown } from '../../hooks/useKeyDown';
-import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
+import { MessageEvent, StateEvent } from '../../../types/matrix/room';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
-import { Image } from '../../components/media';
-import { ImageViewer } from '../../components/image-viewer';
-import { roomToParentsAtom } from '../../state/room/roomToParents';
-import { useRoomUnread } from '../../state/hooks/unread';
-import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
-import { useIsDirectRoom } from '../../hooks/useRoom';
-import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
-import { useSpaceOptionally } from '../../hooks/useSpace';
+import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useAccessiblePowerTagColors, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { useTheme } from '../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
-import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import { usePowerLevelTags, usePowerLevelTagsState } from '../../hooks/usePowerLevelTags';
+import { Timeline } from '../../../client/room';
+import { useObservableValue, useObservableValueListener } from '../../hooks/useObservableValue';
+import { useClient } from '../../hooks/useClient';
+import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
+import {
+  useAtBottomToggle,
+  useEditorResizeStickBottom,
+  useReplyClickHandler,
+  useRestoreScrollToBottom,
+  useTimelinePaginate,
+  useTimelinePrefetch,
+  useTimelineScrollRestore,
+  useUserClickHandler,
+  useUsernameClickHandler,
+} from './hooks/useTimeline';
+import { RoomViewTyping } from './RoomViewTyping';
+import { rContent } from '../../../client/reader';
+import { ThreadSelector, ThreadSelectorContainer } from './message/thread-selector';
+import { TimelineFloat, JumpToLatestButton, NewMessageDivider, DayDivider } from './components';
+import { OutboxView } from './OutboxView';
+import { EncryptedMessageEvent } from '../../components/encrypted-event';
 
-const TimelineFloat = as<'div', css.TimelineFloatVariants>(
-  ({ position, className, ...props }, ref) => (
-    <Box
-      className={classNames(css.TimelineFloat({ position }), className)}
-      justifyContent="Center"
-      alignItems="Center"
-      gap="200"
-      {...props}
-      ref={ref}
-    />
+type PlaceholderListProps = {
+  count: number;
+  Placeholder: React.ComponentType;
+};
+const PlaceholderList = forwardRef<HTMLDivElement, PlaceholderListProps>(
+  ({ count, Placeholder }, ref) => (
+    <div ref={ref}>
+      {Array.from({ length: count }).map((_, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <MessageBase key={i}>
+          <Placeholder />
+        </MessageBase>
+      ))}
+    </div>
   )
 );
 
-const TimelineDivider = as<'div', { variant?: ContainerColor | 'Inherit' }>(
-  ({ variant, children, ...props }, ref) => (
-    <Box gap="100" justifyContent="Center" alignItems="Center" {...props} ref={ref}>
-      <Line style={{ flexGrow: 1 }} variant={variant} size="300" />
-      {children}
-      <Line style={{ flexGrow: 1 }} variant={variant} size="300" />
-    </Box>
-  )
-);
-
-export const getLiveTimeline = (room: Room): EventTimeline =>
-  room.getUnfilteredTimelineSet().getLiveTimeline();
-
-export const getEventTimeline = (room: Room, eventId: string): EventTimeline | undefined => {
-  const timelineSet = room.getUnfilteredTimelineSet();
-  return timelineSet.getTimelineForEvent(eventId) ?? undefined;
-};
-
-export const getFirstLinkedTimeline = (
-  timeline: EventTimeline,
-  direction: Direction
-): EventTimeline => {
-  const linkedTm = timeline.getNeighbouringTimeline(direction);
-  if (!linkedTm) return timeline;
-  return getFirstLinkedTimeline(linkedTm, direction);
-};
-
-export const getLinkedTimelines = (timeline: EventTimeline): EventTimeline[] => {
-  const firstTimeline = getFirstLinkedTimeline(timeline, Direction.Backward);
-  const timelines: EventTimeline[] = [];
-
-  for (
-    let nextTimeline: EventTimeline | null = firstTimeline;
-    nextTimeline;
-    nextTimeline = nextTimeline.getNeighbouringTimeline(Direction.Forward)
-  ) {
-    timelines.push(nextTimeline);
-  }
-  return timelines;
-};
-
-export const timelineToEventsCount = (t: EventTimeline) => t.getEvents().length;
-export const getTimelinesEventsCount = (timelines: EventTimeline[]): number => {
-  const timelineEventCountReducer = (count: number, tm: EventTimeline) =>
-    count + timelineToEventsCount(tm);
-  return timelines.reduce(timelineEventCountReducer, 0);
-};
-
-export const getTimelineAndBaseIndex = (
-  timelines: EventTimeline[],
-  index: number
-): [EventTimeline | undefined, number] => {
-  let uptoTimelineLen = 0;
-  const timeline = timelines.find((t) => {
-    uptoTimelineLen += t.getEvents().length;
-    if (index < uptoTimelineLen) return true;
-    return false;
-  });
-  if (!timeline) return [undefined, 0];
-  return [timeline, uptoTimelineLen - timeline.getEvents().length];
-};
-
-export const getTimelineRelativeIndex = (absoluteIndex: number, timelineBaseIndex: number) =>
-  absoluteIndex - timelineBaseIndex;
-
-export const getTimelineEvent = (timeline: EventTimeline, index: number): MatrixEvent | undefined =>
-  timeline.getEvents()[index];
-
-export const getEventIdAbsoluteIndex = (
-  timelines: EventTimeline[],
-  eventTimeline: EventTimeline,
-  eventId: string
-): number | undefined => {
-  const timelineIndex = timelines.findIndex((t) => t === eventTimeline);
-  if (timelineIndex === -1) return undefined;
-  const eventIndex = eventTimeline.getEvents().findIndex((evt) => evt.getId() === eventId);
-  if (eventIndex === -1) return undefined;
-  const baseIndex = timelines
-    .slice(0, timelineIndex)
-    .reduce((accValue, timeline) => timeline.getEvents().length + accValue, 0);
-  return baseIndex + eventIndex;
-};
-
 type RoomTimelineProps = {
-  room: Room;
   eventId?: string;
   roomInputRef: RefObject<HTMLElement>;
   editor: Editor;
+  timeline: Timeline;
 };
 
 const PAGINATION_LIMIT = 80;
 
-type Timeline = {
-  linkedTimelines: EventTimeline[];
-  range: ItemRange;
-};
-
-const useEventTimelineLoader = (
-  mx: MatrixClient,
-  room: Room,
-  onLoad: (eventId: string, linkedTimelines: EventTimeline[], evtAbsIndex: number) => void,
-  onError: (err: Error | null) => void
-) => {
-  const loadEventTimeline = useCallback(
-    async (eventId: string) => {
-      const [err, replyEvtTimeline] = await to(
-        mx.getEventTimeline(room.getUnfilteredTimelineSet(), eventId)
-      );
-      if (!replyEvtTimeline) {
-        onError(err ?? null);
-        return;
-      }
-      const linkedTimelines = getLinkedTimelines(replyEvtTimeline);
-      const absIndex = getEventIdAbsoluteIndex(linkedTimelines, replyEvtTimeline, eventId);
-
-      if (absIndex === undefined) {
-        onError(err ?? null);
-        return;
-      }
-
-      onLoad(eventId, linkedTimelines, absIndex);
-    },
-    [mx, room, onLoad, onError]
-  );
-
-  return loadEventTimeline;
-};
-
-const useTimelinePagination = (
-  mx: MatrixClient,
-  timeline: Timeline,
-  setTimeline: Dispatch<SetStateAction<Timeline>>,
-  limit: number
-) => {
-  const timelineRef = useRef(timeline);
-  timelineRef.current = timeline;
-  const alive = useAlive();
-
-  const handleTimelinePagination = useMemo(() => {
-    let fetching = false;
-
-    const recalibratePagination = (
-      linkedTimelines: EventTimeline[],
-      timelinesEventsCount: number[],
-      backwards: boolean
-    ) => {
-      const topTimeline = linkedTimelines[0];
-      const timelineMatch = (mt: EventTimeline) => (t: EventTimeline) => t === mt;
-
-      const newLTimelines = getLinkedTimelines(topTimeline);
-      const topTmIndex = newLTimelines.findIndex(timelineMatch(topTimeline));
-      const topAddedTm = topTmIndex === -1 ? [] : newLTimelines.slice(0, topTmIndex);
-
-      const topTmAddedEvt =
-        timelineToEventsCount(newLTimelines[topTmIndex]) - timelinesEventsCount[0];
-      const offsetRange = getTimelinesEventsCount(topAddedTm) + (backwards ? topTmAddedEvt : 0);
-
-      setTimeline((currentTimeline) => ({
-        linkedTimelines: newLTimelines,
-        range:
-          offsetRange > 0
-            ? {
-                start: currentTimeline.range.start + offsetRange,
-                end: currentTimeline.range.end + offsetRange,
-              }
-            : { ...currentTimeline.range },
-      }));
-    };
-
-    return async (backwards: boolean) => {
-      if (fetching) return;
-      const { linkedTimelines: lTimelines } = timelineRef.current;
-      const timelinesEventsCount = lTimelines.map(timelineToEventsCount);
-
-      const timelineToPaginate = backwards ? lTimelines[0] : lTimelines[lTimelines.length - 1];
-      if (!timelineToPaginate) return;
-
-      const paginationToken = timelineToPaginate.getPaginationToken(
-        backwards ? Direction.Backward : Direction.Forward
-      );
-      if (
-        !paginationToken &&
-        getTimelinesEventsCount(lTimelines) !==
-          getTimelinesEventsCount(getLinkedTimelines(timelineToPaginate))
-      ) {
-        recalibratePagination(lTimelines, timelinesEventsCount, backwards);
-        return;
-      }
-
-      fetching = true;
-      const [err] = await to(
-        mx.paginateEventTimeline(timelineToPaginate, {
-          backwards,
-          limit,
-        })
-      );
-      if (err) {
-        // TODO: handle pagination error.
-        return;
-      }
-      const fetchedTimeline =
-        timelineToPaginate.getNeighbouringTimeline(
-          backwards ? Direction.Backward : Direction.Forward
-        ) ?? timelineToPaginate;
-      // Decrypt all event ahead of render cycle
-      const roomId = fetchedTimeline.getRoomId();
-      const room = roomId ? mx.getRoom(roomId) : null;
-
-      if (room?.hasEncryptionStateEvent()) {
-        await to(decryptAllTimelineEvent(mx, fetchedTimeline));
-      }
-
-      fetching = false;
-      if (alive()) {
-        recalibratePagination(lTimelines, timelinesEventsCount, backwards);
-      }
-    };
-  }, [mx, alive, setTimeline, limit]);
-  return handleTimelinePagination;
-};
-
-const useLiveEventArrive = (room: Room, onArrive: (mEvent: MatrixEvent) => void) => {
-  useEffect(() => {
-    const handleTimelineEvent: EventTimelineSetHandlerMap[RoomEvent.Timeline] = (
-      mEvent,
-      eventRoom,
-      toStartOfTimeline,
-      removed,
-      data
-    ) => {
-      if (eventRoom?.roomId !== room.roomId || !data.liveEvent) return;
-      onArrive(mEvent);
-    };
-    const handleRedaction: RoomEventHandlerMap[RoomEvent.Redaction] = (mEvent, eventRoom) => {
-      if (eventRoom?.roomId !== room.roomId) return;
-      onArrive(mEvent);
-    };
-
-    room.on(RoomEvent.Timeline, handleTimelineEvent);
-    room.on(RoomEvent.Redaction, handleRedaction);
-    return () => {
-      room.removeListener(RoomEvent.Timeline, handleTimelineEvent);
-      room.removeListener(RoomEvent.Redaction, handleRedaction);
-    };
-  }, [room, onArrive]);
-};
-
-const useLiveTimelineRefresh = (room: Room, onRefresh: () => void) => {
-  useEffect(() => {
-    const handleTimelineRefresh: RoomEventHandlerMap[RoomEvent.TimelineRefresh] = (r) => {
-      if (r.roomId !== room.roomId) return;
-      onRefresh();
-    };
-
-    room.on(RoomEvent.TimelineRefresh, handleTimelineRefresh);
-    return () => {
-      room.removeListener(RoomEvent.TimelineRefresh, handleTimelineRefresh);
-    };
-  }, [room, onRefresh]);
-};
-
-const getInitialTimeline = (room: Room) => {
-  const linkedTimelines = getLinkedTimelines(getLiveTimeline(room));
-  const evLength = getTimelinesEventsCount(linkedTimelines);
-  return {
-    linkedTimelines,
-    range: {
-      start: Math.max(evLength - PAGINATION_LIMIT, 0),
-      end: evLength,
-    },
-  };
-};
-
-const getEmptyTimeline = () => ({
-  range: { start: 0, end: 0 },
-  linkedTimelines: [],
-});
-
-const getRoomUnreadInfo = (room: Room, scrollTo = false) => {
-  const readUptoEventId = room.getEventReadUpTo(room.client.getUserId() ?? '');
-  if (!readUptoEventId) return undefined;
-  const evtTimeline = getEventTimeline(room, readUptoEventId);
-  const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
-  return {
-    readUptoEventId,
-    inLiveTimeline: latestTimeline === room.getLiveTimeline(),
-    scrollTo,
-  };
-};
-
-export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimelineProps) {
-  const mx = useMatrixClient();
+export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTimelineProps) {
+  const ct = useClient();
+  const roomId = useRoom();
   const useAuthentication = useMediaAuthentication();
+  const encryptedRooms = useObservableValue(ct.encryptedRooms);
+
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
   const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
   const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
   const direct = useIsDirectRoom();
-  const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
-  const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
   const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
-  const showUrlPreview = room.hasEncryptionStateEvent() ? encUrlPreview : urlPreview;
+  const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
   const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
   const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
 
@@ -453,13 +129,17 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
   const ignoredUsersList = useIgnoredUsers();
   const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
 
-  const setReplyDraft = useSetAtom(roomIdToReplyDraftAtomFamily(room.roomId));
   const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(room);
+  const creators = useRoomCreators(roomId);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
 
+  const membersAPI = useRoomMembersAPI();
   const creatorsTag = useRoomCreatorsTag();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const powerLevelTagsState = usePowerLevelTagsState(roomId);
+  const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsState.value);
+  const getMemberPowerTag = useGetMemberPowerTag(creators, powerLevels);
 
   const theme = useTheme();
   const accessiblePowerTagColors = useAccessiblePowerTagColors(
@@ -470,37 +150,26 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
 
   const permissions = useRoomPermissions(creators, powerLevels);
 
-  const canRedact = permissions.action('redact', mx.getSafeUserId());
-  const canSendReaction = permissions.event(MessageEvent.Reaction, mx.getSafeUserId());
-  const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, mx.getSafeUserId());
+  const canRedact = permissions.action('redact', ct.session.userId);
+  const canSendReaction = permissions.event(MessageEvent.Reaction, ct.session.userId);
+  const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, ct.session.userId);
   const [editId, setEditId] = useState<string>();
 
-  const roomToParents = useAtomValue(roomToParentsAtom);
-  const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
+  // const roomToParents = useAtomValue(roomToParentsAtom);
+  // const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const { navigateRoom } = useRoomNavigate();
-  const mentionClickHandler = useMentionClickHandler(room.roomId);
+  const mentionClickHandler = useMentionClickHandler(roomId);
   const spoilerClickHandler = useSpoilerClickHandler();
-  const openUserRoomProfile = useOpenUserRoomProfile();
-  const space = useSpaceOptionally();
 
-  const imagePackRooms: Room[] = useImagePackRooms(room.roomId, roomToParents);
+  const imagePackRooms = useImagePackRooms(roomId);
 
-  const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true));
+  // const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true));
   const readUptoEventIdRef = useRef<string>();
-  if (unreadInfo) {
-    readUptoEventIdRef.current = unreadInfo.readUptoEventId;
-  }
-
-  const atBottomAnchorRef = useRef<HTMLElement>(null);
-  const [atBottom, setAtBottom] = useState<boolean>(true);
-  const atBottomRef = useRef(atBottom);
-  atBottomRef.current = atBottom;
+  // if (unreadInfo) {
+  //   readUptoEventIdRef.current = unreadInfo.readUptoEventId;
+  // }
 
   const scrollRef = useRef<HTMLDivElement>(null);
-  const scrollToBottomRef = useRef({
-    count: 0,
-    smooth: true,
-  });
 
   const [focusItem, setFocusItem] = useState<
     | {
@@ -516,51 +185,68 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     () => ({
       ...LINKIFY_OPTS,
       render: factoryRenderLinkifyWithMention((href) =>
-        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+        renderMatrixMention(
+          ct,
+          roomId,
+          href,
+          makeMentionCustomProps(mentionClickHandler),
+          membersAPI.getName,
+          getRoomName
+        )
       ),
     }),
-    [mx, room, mentionClickHandler]
+    [ct, roomId, mentionClickHandler, membersAPI.getName, getRoomName]
   );
   const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
     () =>
-      getReactCustomHtmlParser(mx, room.roomId, {
+      getReactCustomHtmlParser(ct, roomId, {
         linkifyOpts,
         useAuthentication,
         handleSpoilerClick: spoilerClickHandler,
         handleMentionClick: mentionClickHandler,
+        getMemberName: membersAPI.getName,
+        getRoomName,
       }),
-    [mx, room, linkifyOpts, spoilerClickHandler, mentionClickHandler, useAuthentication]
+    [
+      ct,
+      roomId,
+      linkifyOpts,
+      spoilerClickHandler,
+      mentionClickHandler,
+      useAuthentication,
+      membersAPI.getName,
+      getRoomName,
+    ]
   );
-  const parseMemberEvent = useMemberEventParser();
 
-  const [timeline, setTimeline] = useState<Timeline>(() =>
-    eventId ? getEmptyTimeline() : getInitialTimeline(room)
-  );
-  const eventsLength = getTimelinesEventsCount(timeline.linkedTimelines);
-  const liveTimelineLinked =
-    timeline.linkedTimelines[timeline.linkedTimelines.length - 1] === getLiveTimeline(room);
-  const canPaginateBack =
-    typeof timeline.linkedTimelines[0]?.getPaginationToken(Direction.Backward) === 'string';
-  const rangeAtStart = timeline.range.start === 0;
-  const rangeAtEnd = timeline.range.end === eventsLength;
-  const atLiveEndRef = useRef(liveTimelineLinked && rangeAtEnd);
-  atLiveEndRef.current = liveTimelineLinked && rangeAtEnd;
+  const threads = useObservableValue(timeline.threads);
+  const redacted = useObservableValue(timeline.relations.redacted);
+  const reactions = useObservableValue(timeline.relations.reactions.eventToRelations);
+  const edits = useObservableValue(timeline.relations.edits.eventToRelations);
 
-  const handleTimelinePagination = useTimelinePagination(
-    mx,
-    timeline,
-    setTimeline,
-    PAGINATION_LIMIT
-  );
+  const messageBatch = useObservableValue(timeline.batch);
+  const localEventSenders = useObservableValue(timeline.outbox.senders);
+  const { events } = messageBatch.messages;
+
+  window.t = timeline;
+
+  const range = useObservableValue(timeline.range.info);
+  const rangeAtStart = range.start === 0;
+  const rangeAtEnd = range.end === messageBatch.size;
 
   const getScrollElement = useCallback(() => scrollRef.current, []);
 
+  useTimelinePrefetch(timeline, PAGINATION_LIMIT);
+  const handlePaginate = useTimelinePaginate(timeline, PAGINATION_LIMIT);
+  useTimelineScrollRestore(timeline, scrollRef);
+  useRestoreScrollToBottom(scrollRef, messageBatch);
+
   const { getItems, scrollToItem, scrollToElement, observeBackAnchor, observeFrontAnchor } =
     useVirtualPaginator({
-      count: eventsLength,
+      count: messageBatch.size,
       limit: PAGINATION_LIMIT,
-      range: timeline.range,
-      onRangeChange: useCallback((r) => setTimeline((cs) => ({ ...cs, range: r })), []),
+      range,
+      onRangeChange: useCallback((r) => timeline.range.setRange(r), [timeline]),
       getScrollElement,
       getItemElement: useCallback(
         (index: number) =>
@@ -568,267 +254,32 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
           undefined,
         []
       ),
-      onEnd: handleTimelinePagination,
+      onEnd: handlePaginate,
     });
 
-  const loadEventTimeline = useEventTimelineLoader(
-    mx,
-    room,
-    useCallback(
-      (evtId, lTimelines, evtAbsIndex) => {
-        if (!alive()) return;
-        const evLength = getTimelinesEventsCount(lTimelines);
-
-        setFocusItem({
-          index: evtAbsIndex,
-          scrollTo: true,
-          highlight: evtId !== readUptoEventIdRef.current,
-        });
-        setTimeline({
-          linkedTimelines: lTimelines,
-          range: {
-            start: Math.max(evtAbsIndex - PAGINATION_LIMIT, 0),
-            end: Math.min(evtAbsIndex + PAGINATION_LIMIT, evLength),
-          },
-        });
-      },
-      [alive]
-    ),
-    useCallback(() => {
-      if (!alive()) return;
-      setTimeline(getInitialTimeline(room));
-      scrollToBottomRef.current.count += 1;
-      scrollToBottomRef.current.smooth = false;
-    }, [alive, room])
-  );
-
-  useLiveEventArrive(
-    room,
-    useCallback(
-      (mEvt: MatrixEvent) => {
-        // if user is at bottom of timeline
-        // keep paginating timeline and conditionally mark as read
-        // otherwise we update timeline without paginating
-        // so timeline can be updated with evt like: edits, reactions etc
-        if (atBottomRef.current) {
-          if (document.hasFocus() && (!unreadInfo || mEvt.getSender() === mx.getUserId())) {
-            // Check if the document is in focus (user is actively viewing the app),
-            // and either there are no unread messages or the latest message is from the current user.
-            // If either condition is met, trigger the markAsRead function to send a read receipt.
-            requestAnimationFrame(() => markAsRead(mx, mEvt.getRoomId()!, hideActivity));
-          }
-
-          if (!document.hasFocus() && !unreadInfo) {
-            setUnreadInfo(getRoomUnreadInfo(room));
-          }
-
-          scrollToBottomRef.current.count += 1;
-          scrollToBottomRef.current.smooth = true;
-
-          setTimeline((ct) => ({
-            ...ct,
-            range: {
-              start: ct.range.start + 1,
-              end: ct.range.end + 1,
-            },
-          }));
-          return;
-        }
-        setTimeline((ct) => ({ ...ct }));
-        if (!unreadInfo) {
-          setUnreadInfo(getRoomUnreadInfo(room));
-        }
-      },
-      [mx, room, unreadInfo, hideActivity]
-    )
-  );
-
-  const handleOpenEvent = useCallback(
-    async (
-      evtId: string,
-      highlight = true,
-      onScroll: ((scrolled: boolean) => void) | undefined = undefined
-    ) => {
-      const evtTimeline = getEventTimeline(room, evtId);
-      const absoluteIndex =
-        evtTimeline && getEventIdAbsoluteIndex(timeline.linkedTimelines, evtTimeline, evtId);
-
-      if (typeof absoluteIndex === 'number') {
-        const scrolled = scrollToItem(absoluteIndex, {
-          behavior: 'smooth',
-          align: 'center',
-          stopInView: true,
-        });
-        if (onScroll) onScroll(scrolled);
-        setFocusItem({
-          index: absoluteIndex,
-          scrollTo: false,
-          highlight,
-        });
-      } else {
-        setTimeline(getEmptyTimeline());
-        loadEventTimeline(evtId);
-      }
-    },
-    [room, timeline, scrollToItem, loadEventTimeline]
-  );
-
-  useLiveTimelineRefresh(
-    room,
-    useCallback(() => {
-      if (liveTimelineLinked) {
-        setTimeline(getInitialTimeline(room));
-      }
-    }, [room, liveTimelineLinked])
-  );
-
-  // Stay at bottom when room editor resize
-  useResizeObserver(
-    useMemo(() => {
-      let mounted = false;
-      return (entries) => {
-        if (!mounted) {
-          // skip initial mounting call
-          mounted = true;
-          return;
-        }
-        if (!roomInputRef.current) return;
-        const editorBaseEntry = getResizeObserverEntry(roomInputRef.current, entries);
-        const scrollElement = getScrollElement();
-        if (!editorBaseEntry || !scrollElement) return;
-
-        if (atBottomRef.current) {
-          scrollToBottom(scrollElement);
-        }
-      };
-    }, [getScrollElement, roomInputRef]),
-    useCallback(() => roomInputRef.current, [roomInputRef])
-  );
-
   const tryAutoMarkAsRead = useCallback(() => {
-    const readUptoEventId = readUptoEventIdRef.current;
-    if (!readUptoEventId) {
-      requestAnimationFrame(() => markAsRead(mx, room.roomId, hideActivity));
-      return;
-    }
-    const evtTimeline = getEventTimeline(room, readUptoEventId);
-    const latestTimeline = evtTimeline && getFirstLinkedTimeline(evtTimeline, Direction.Forward);
-    if (latestTimeline === room.getLiveTimeline()) {
-      requestAnimationFrame(() => markAsRead(mx, room.roomId, hideActivity));
-    }
-  }, [mx, room, hideActivity]);
+    console.log('mark as read.');
+  }, []);
 
-  const debounceSetAtBottom = useDebounce(
-    useCallback((entry: IntersectionObserverEntry) => {
-      if (!entry.isIntersecting) setAtBottom(false);
-    }, []),
-    { wait: 1000 }
-  );
-  useIntersectionObserver(
+  const [atBottom, atBottomAnchorRef] = useAtBottomToggle(
+    getScrollElement,
+    messageBatch.next.end ?? false,
     useCallback(
-      (entries) => {
-        const target = atBottomAnchorRef.current;
-        if (!target) return;
-        const targetEntry = getIntersectionObserverEntry(target, entries);
-        if (targetEntry) debounceSetAtBottom(targetEntry);
-        if (targetEntry?.isIntersecting && atLiveEndRef.current) {
-          setAtBottom(true);
-          if (document.hasFocus()) {
-            tryAutoMarkAsRead();
-          }
-        }
-      },
-      [debounceSetAtBottom, tryAutoMarkAsRead]
-    ),
-    useCallback(
-      () => ({
-        root: getScrollElement(),
-        rootMargin: '100px',
-      }),
-      [getScrollElement]
-    ),
-    useCallback(() => atBottomAnchorRef.current, [])
-  );
-
-  useDocumentFocusChange(
-    useCallback(
-      (inFocus) => {
-        if (inFocus && atBottomRef.current) {
-          if (unreadInfo?.inLiveTimeline) {
-            handleOpenEvent(unreadInfo.readUptoEventId, false, (scrolled) => {
-              // the unread event is already in view
-              // so, try mark as read;
-              if (!scrolled) {
-                tryAutoMarkAsRead();
-              }
-            });
-            return;
-          }
+      (bottom: boolean) => {
+        if (bottom && document.hasFocus()) {
           tryAutoMarkAsRead();
         }
       },
-      [tryAutoMarkAsRead, unreadInfo, handleOpenEvent]
+      [tryAutoMarkAsRead]
     )
   );
 
-  // Handle up arrow edit
-  useKeyDown(
-    window,
-    useCallback(
-      (evt) => {
-        if (
-          isKeyHotkey('arrowup', evt) &&
-          editableActiveElement() &&
-          document.activeElement?.getAttribute('data-editable-name') === 'RoomInput' &&
-          isEmptyEditor(editor)
-        ) {
-          const editableEvt = getLatestEditableEvt(room.getLiveTimeline(), (mEvt) =>
-            canEditEvent(mx, mEvt)
-          );
-          const editableEvtId = editableEvt?.getId();
-          if (!editableEvtId) return;
-          setEditId(editableEvtId);
-          evt.preventDefault();
-        }
-      },
-      [mx, room, editor]
-    )
+  useEditorResizeStickBottom(
+    getScrollElement,
+    useCallback(() => roomInputRef.current, [roomInputRef]),
+    atBottom
   );
 
-  useEffect(() => {
-    if (eventId) {
-      setTimeline(getEmptyTimeline());
-      loadEventTimeline(eventId);
-    }
-  }, [eventId, loadEventTimeline]);
-
-  // Scroll to bottom on initial timeline load
-  useLayoutEffect(() => {
-    const scrollEl = scrollRef.current;
-    if (scrollEl) {
-      scrollToBottom(scrollEl);
-    }
-  }, []);
-
-  // if live timeline is linked and unreadInfo change
-  // Scroll to last read message
-  useLayoutEffect(() => {
-    const { readUptoEventId, inLiveTimeline, scrollTo } = unreadInfo ?? {};
-    if (readUptoEventId && inLiveTimeline && scrollTo) {
-      const linkedTimelines = getLinkedTimelines(getLiveTimeline(room));
-      const evtTimeline = getEventTimeline(room, readUptoEventId);
-      const absoluteIndex =
-        evtTimeline && getEventIdAbsoluteIndex(linkedTimelines, evtTimeline, readUptoEventId);
-      if (absoluteIndex) {
-        scrollToItem(absoluteIndex, {
-          behavior: 'instant',
-          align: 'start',
-          stopInView: true,
-        });
-      }
-    }
-  }, [room, unreadInfo, scrollToItem]);
-
   // scroll to focused message
   useLayoutEffect(() => {
     if (focusItem && focusItem.scrollTo) {
@@ -848,23 +299,6 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     }, 2000);
   }, [alive, focusItem, scrollToItem]);
 
-  // scroll to bottom of timeline
-  const scrollToBottomCount = scrollToBottomRef.current.count;
-  useLayoutEffect(() => {
-    if (scrollToBottomCount > 0) {
-      const scrollEl = scrollRef.current;
-      if (scrollEl)
-        scrollToBottom(scrollEl, scrollToBottomRef.current.smooth ? 'smooth' : 'instant');
-    }
-  }, [scrollToBottomCount]);
-
-  // Remove unreadInfo on mark as read
-  useEffect(() => {
-    if (!unread) {
-      setUnreadInfo(undefined);
-    }
-  }, [unread]);
-
   // scroll out of view msg editor in view.
   useEffect(() => {
     if (editId) {
@@ -881,128 +315,33 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     }
   }, [scrollToElement, editId]);
 
-  const handleJumpToLatest = () => {
-    if (eventId) {
-      navigateRoom(room.roomId, undefined, { replace: true });
-    }
-    setTimeline(getInitialTimeline(room));
-    scrollToBottomRef.current.count += 1;
-    scrollToBottomRef.current.smooth = false;
-  };
+  const stickToBottom = useCallback(() => {
+    if (!atBottom) return;
 
-  const handleJumpToUnread = () => {
-    if (unreadInfo?.readUptoEventId) {
-      setTimeline(getEmptyTimeline());
-      loadEventTimeline(unreadInfo.readUptoEventId);
-    }
-  };
-
-  const handleMarkAsRead = () => {
-    markAsRead(mx, room.roomId, hideActivity);
-  };
-
-  const handleOpenReply: MouseEventHandler = useCallback(
-    async (evt) => {
-      const targetId = evt.currentTarget.getAttribute('data-event-id');
-      if (!targetId) return;
-      handleOpenEvent(targetId);
-    },
-    [handleOpenEvent]
-  );
-
-  const handleUserClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-    (evt) => {
-      evt.preventDefault();
-      evt.stopPropagation();
-      const userId = evt.currentTarget.getAttribute('data-user-id');
-      if (!userId) {
-        console.warn('Button should have "data-user-id" attribute!');
-        return;
+    setTimeout(() => {
+      const scrollEl = getScrollElement();
+      if (scrollEl) {
+        scrollToBottom(scrollEl, 'smooth');
       }
-      openUserRoomProfile(
-        room.roomId,
-        space?.roomId,
-        userId,
-        evt.currentTarget.getBoundingClientRect()
-      );
-    },
-    [room, space, openUserRoomProfile]
-  );
-  const handleUsernameClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-    (evt) => {
-      evt.preventDefault();
-      const userId = evt.currentTarget.getAttribute('data-user-id');
-      if (!userId) {
-        console.warn('Button should have "data-user-id" attribute!');
-        return;
-      }
-      const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
-      editor.insertNode(
-        createMentionElement(
-          userId,
-          name.startsWith('@') ? name : `@${name}`,
-          userId === mx.getUserId()
-        )
-      );
-      ReactEditor.focus(editor);
-      moveCursor(editor);
-    },
-    [mx, room, editor]
-  );
+    }, 100);
+  }, [getScrollElement, atBottom]);
 
-  const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback(
-    (evt, startThread = false) => {
-      const replyId = evt.currentTarget.getAttribute('data-event-id');
-      if (!replyId) {
-        console.warn('Button should have "data-event-id" attribute!');
-        return;
-      }
-      const replyEvt = room.findEventById(replyId);
-      if (!replyEvt) return;
-      const editedReply = getEditedEvent(replyId, replyEvt, room.getUnfilteredTimelineSet());
-      const content: IContent = editedReply?.getContent()['m.new_content'] ?? replyEvt.getContent();
-      const { body, formatted_body: formattedBody } = content;
-      const { 'm.relates_to': relation } = startThread
-        ? { 'm.relates_to': { rel_type: 'm.thread', event_id: replyId } }
-        : replyEvt.getWireContent();
-      const senderId = replyEvt.getSender();
-      if (senderId && typeof body === 'string') {
-        setReplyDraft({
-          userId: senderId,
-          eventId: replyId,
-          body,
-          formattedBody,
-          relation,
-        });
-        setTimeout(() => ReactEditor.focus(editor), 100);
-      }
-    },
-    [room, setReplyDraft, editor]
-  );
+  useObservableValueListener(timeline.outbox.senders, stickToBottom);
+  useObservableValueListener(timeline.range.info, stickToBottom);
 
-  const handleReactionToggle = useCallback(
-    (targetEventId: string, key: string, shortcode?: string) => {
-      const relations = getEventReactions(room.getUnfilteredTimelineSet(), targetEventId);
-      const allReactions = relations?.getSortedAnnotationsByKey() ?? [];
-      const [, reactionsSet] = allReactions.find(([k]) => k === key) ?? [];
-      const reactions = reactionsSet ? Array.from(reactionsSet) : [];
-      const myReaction = reactions.find(factoryEventSentBy(mx.getUserId()!));
+  const handleOpenReply: MouseEventHandler = useCallback(async (evt) => {
+    const targetId = evt.currentTarget.getAttribute('data-event-id');
+    if (!targetId) return;
+    console.log(targetId);
+  }, []);
 
-      if (myReaction && !!myReaction?.isRelation()) {
-        mx.redactEvent(room.roomId, myReaction.getId()!);
-        return;
-      }
-      const rShortcode =
-        shortcode ||
-        (reactions.find(eventWithShortcode)?.getContent().shortcode as string | undefined);
-      mx.sendEvent(
-        room.roomId,
-        MessageEvent.Reaction as any,
-        getReactionContent(targetEventId, key, rShortcode)
-      );
-    },
-    [mx, room]
-  );
+  const handleUserClick = useUserClickHandler();
+  const handleUsernameClick = useUsernameClickHandler(editor);
+  const [replyDraft, handleReplyClick] = useReplyClickHandler(timeline, editor);
+
+  const handleReactionToggle = useCallback((targetEventId: string) => {
+    console.log(targetEventId);
+  }, []);
   const handleEdit = useCallback(
     (editEvtId?: string) => {
       if (editEvtId) {
@@ -1014,636 +353,225 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
     },
     [editor]
   );
-  const { t } = useTranslation();
 
-  const renderMatrixEvent = useMatrixEventRenderer<
-    [string, MatrixEvent, number, EventTimelineSet, boolean]
-  >(
-    {
-      [MessageEvent.RoomMessage]: (mEventId, mEvent, item, timelineSet, collapse) => {
-        const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
-        const hasReactions = reactions && reactions.length > 0;
-        const { replyEventId, threadRootId } = mEvent;
-        const highlighted = focusItem?.index === item && focusItem.highlight;
+  const handleOpenThread = (threadId: string) => {
+    timeline.openThread(threadId);
+  };
 
-        const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet);
-        const getContent = (() =>
-          editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent()) as GetContentCallback;
+  console.log('========> RoomTimeline');
+  console.log(range, events.length);
 
-        const senderId = mEvent.getSender() ?? '';
-        const senderDisplayName =
-          getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
+  let threadSeries: MessageEventWithoutRoomId[] = [];
+  const renderMatrixEvent = (event: MessageEventWithoutRoomId, item: number, collapse: boolean) => {
+    const reactionEvents = reactions.get(event.event_id)?.filter((r) => !redacted.has(r.event_id));
+    const editEvents = edits.get(event.event_id);
+    const editedEvent = editEvents && getLatestEditEvent(event.sender, editEvents, redacted);
+    const highlighted = focusItem?.index === item && focusItem.highlight;
 
-        return (
-          <Message
-            key={mEvent.getId()}
-            data-message-item={item}
-            data-message-id={mEventId}
-            room={room}
-            mEvent={mEvent}
-            messageSpacing={messageSpacing}
-            messageLayout={messageLayout}
-            collapse={collapse}
-            highlight={highlighted}
-            edit={editId === mEventId}
-            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
-            canSendReaction={canSendReaction}
-            canPinEvent={canPinEvent}
-            imagePackRooms={imagePackRooms}
-            relations={hasReactions ? reactionRelations : undefined}
-            onUserClick={handleUserClick}
-            onUsernameClick={handleUsernameClick}
-            onReplyClick={handleReplyClick}
-            onReactionToggle={handleReactionToggle}
-            onEditId={handleEdit}
-            reply={
-              replyEventId && (
-                <Reply
-                  room={room}
-                  timelineSet={timelineSet}
-                  replyEventId={replyEventId}
-                  threadRootId={threadRootId}
-                  onClick={handleOpenReply}
-                  getMemberPowerTag={getMemberPowerTag}
-                  accessibleTagColors={accessiblePowerTagColors}
-                  legacyUsernameColor={legacyUsernameColor || direct}
-                />
-              )
-            }
-            reactions={
-              reactionRelations && (
-                <Reactions
-                  style={{ marginTop: config.space.S200 }}
-                  room={room}
-                  relations={reactionRelations}
-                  mEventId={mEventId}
-                  canSendReaction={canSendReaction}
-                  onReactionToggle={handleReactionToggle}
-                />
-              )
-            }
-            hideReadReceipts={hideActivity}
-            showDeveloperTools={showDeveloperTools}
-            memberPowerTag={getMemberPowerTag(senderId)}
-            accessibleTagColors={accessiblePowerTagColors}
-            legacyUsernameColor={legacyUsernameColor || direct}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
+    const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
+      <Reactions
+        style={{ marginTop: config.space.S200 }}
+        reactions={reactionEvents}
+        eventId={event.event_id}
+        canSendReaction={canSendReaction}
+        onReactionToggle={handleReactionToggle}
+      />
+    );
+
+    const threadId = getThreadId(event);
+    if (threadId) {
+      const nextEvent: MessageEventWithoutRoomId | undefined = events[item + 1];
+      if (nextEvent && getThreadId(nextEvent) === threadId) {
+        threadSeries.push(event);
+        return null;
+      }
+      threadSeries.push(event);
+      const userNames = Array.from(
+        new Set(threadSeries.map((ev) => membersAPI.getName(ev.sender)))
+      );
+      const threadReplyCounts = threadSeries.length;
+      threadSeries = [];
+
+      return (
+        <ThreadEvents
+          key={event.event_id}
+          users={userNames}
+          ts={event.origin_server_ts}
+          messageLayout={messageLayout}
+          hour24Clock={hour24Clock}
+          dateFormatString={dateFormatString}
+          messageSpacing={messageSpacing}
+          count={threadReplyCounts}
+          onClick={() => handleOpenThread(threadId)}
+        />
+      );
+    }
+
+    const threadTimeline = threads.get(event.event_id);
+
+    return (
+      <Message
+        key={event.event_id}
+        data-message-item={item}
+        data-message-id={event.event_id}
+        data-sender-id={event.sender}
+        event={event}
+        membersAPI={membersAPI}
+        messageSpacing={messageSpacing}
+        messageLayout={messageLayout}
+        collapse={collapse}
+        highlight={highlighted}
+        selected={replyDraft?.eventId === event.event_id}
+        edit={editId === event.event_id}
+        canDelete={canRedact || event.sender === ct.session.userId}
+        canSendReaction={canSendReaction}
+        canPinEvent={canPinEvent}
+        imagePackRooms={imagePackRooms}
+        reactionEvents={reactionEvents && reactionEvents.length > 0 ? reactionEvents : undefined}
+        onUserClick={handleUserClick}
+        onUsernameClick={handleUsernameClick}
+        onReplyClick={handleReplyClick}
+        onReactionToggle={handleReactionToggle}
+        onEditId={handleEdit}
+        redacted={redacted.has(event.event_id)}
+        hideReadReceipts={hideActivity}
+        showDeveloperTools={showDeveloperTools}
+        memberPowerTag={getMemberPowerTag(event.sender)}
+        accessibleTagColors={accessiblePowerTagColors}
+        legacyUsernameColor={legacyUsernameColor || direct}
+        hour24Clock={hour24Clock}
+        dateFormatString={dateFormatString}
+      >
+        {(editedEvent ?? event).type === MessageEvent.RoomMessageEncrypted ? (
+          <EncryptedMessageEvent
+            roomId={roomId}
+            decryptionManager={ct.decryption}
+            event={editedEvent ?? event}
           >
-            {mEvent.isRedacted() ? (
-              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
-            ) : (
+            {(decryptedEvent) => (
               <RenderMessageContent
-                displayName={senderDisplayName}
-                msgType={mEvent.getContent().msgtype ?? ''}
-                ts={mEvent.getTs()}
+                displayName={membersAPI.getName(event.sender)}
+                eventType={decryptedEvent.type}
+                ts={event.origin_server_ts}
                 edited={!!editedEvent}
-                getContent={getContent}
+                content={rContent.newContent(decryptedEvent.content) ?? decryptedEvent.content}
                 mediaAutoLoad={mediaAutoLoad}
                 urlPreview={showUrlPreview}
                 htmlReactParserOptions={htmlReactParserOptions}
                 linkifyOpts={linkifyOpts}
                 outlineAttachment={messageLayout === MessageLayout.Bubble}
+                redacted={redacted.has(event.event_id)}
               />
             )}
-          </Message>
-        );
-      },
-      [MessageEvent.RoomMessageEncrypted]: (mEventId, mEvent, item, timelineSet, collapse) => {
-        const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
-        const hasReactions = reactions && reactions.length > 0;
-        const { replyEventId, threadRootId } = mEvent;
-        const highlighted = focusItem?.index === item && focusItem.highlight;
-
-        return (
-          <Message
-            key={mEvent.getId()}
-            data-message-item={item}
-            data-message-id={mEventId}
-            room={room}
-            mEvent={mEvent}
-            messageSpacing={messageSpacing}
-            messageLayout={messageLayout}
-            collapse={collapse}
-            highlight={highlighted}
-            edit={editId === mEventId}
-            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
-            canSendReaction={canSendReaction}
-            canPinEvent={canPinEvent}
-            imagePackRooms={imagePackRooms}
-            relations={hasReactions ? reactionRelations : undefined}
-            onUserClick={handleUserClick}
-            onUsernameClick={handleUsernameClick}
-            onReplyClick={handleReplyClick}
-            onReactionToggle={handleReactionToggle}
-            onEditId={handleEdit}
-            reply={
-              replyEventId && (
-                <Reply
-                  room={room}
-                  timelineSet={timelineSet}
-                  replyEventId={replyEventId}
-                  threadRootId={threadRootId}
-                  onClick={handleOpenReply}
-                  getMemberPowerTag={getMemberPowerTag}
-                  accessibleTagColors={accessiblePowerTagColors}
-                  legacyUsernameColor={legacyUsernameColor || direct}
-                />
-              )
-            }
-            reactions={
-              reactionRelations && (
-                <Reactions
-                  style={{ marginTop: config.space.S200 }}
-                  room={room}
-                  relations={reactionRelations}
-                  mEventId={mEventId}
-                  canSendReaction={canSendReaction}
-                  onReactionToggle={handleReactionToggle}
-                />
-              )
-            }
-            hideReadReceipts={hideActivity}
-            showDeveloperTools={showDeveloperTools}
-            memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
-            accessibleTagColors={accessiblePowerTagColors}
-            legacyUsernameColor={legacyUsernameColor || direct}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          >
-            <EncryptedContent mEvent={mEvent}>
-              {() => {
-                if (mEvent.isRedacted()) return <RedactedContent />;
-                if (mEvent.getType() === MessageEvent.Sticker)
-                  return (
-                    <MSticker
-                      content={mEvent.getContent()}
-                      renderImageContent={(props) => (
-                        <ImageContent
-                          {...props}
-                          autoPlay={mediaAutoLoad}
-                          renderImage={(p) => <Image {...p} loading="lazy" />}
-                          renderViewer={(p) => <ImageViewer {...p} />}
-                        />
-                      )}
-                    />
-                  );
-                if (mEvent.getType() === MessageEvent.RoomMessage) {
-                  const editedEvent = getEditedEvent(mEventId, mEvent, timelineSet);
-                  const getContent = (() =>
-                    editedEvent?.getContent()['m.new_content'] ??
-                    mEvent.getContent()) as GetContentCallback;
-
-                  const senderId = mEvent.getSender() ?? '';
-                  const senderDisplayName =
-                    getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
-                  return (
-                    <RenderMessageContent
-                      displayName={senderDisplayName}
-                      msgType={mEvent.getContent().msgtype ?? ''}
-                      ts={mEvent.getTs()}
-                      edited={!!editedEvent}
-                      getContent={getContent}
-                      mediaAutoLoad={mediaAutoLoad}
-                      urlPreview={showUrlPreview}
-                      htmlReactParserOptions={htmlReactParserOptions}
-                      linkifyOpts={linkifyOpts}
-                      outlineAttachment={messageLayout === MessageLayout.Bubble}
-                    />
-                  );
-                }
-                if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
-                  return (
-                    <Text>
-                      <MessageNotDecryptedContent />
-                    </Text>
-                  );
-                return (
-                  <Text>
-                    <MessageUnsupportedContent />
-                  </Text>
-                );
-              }}
-            </EncryptedContent>
-          </Message>
-        );
-      },
-      [MessageEvent.Sticker]: (mEventId, mEvent, item, timelineSet, collapse) => {
-        const reactionRelations = getEventReactions(timelineSet, mEventId);
-        const reactions = reactionRelations && reactionRelations.getSortedAnnotationsByKey();
-        const hasReactions = reactions && reactions.length > 0;
-        const highlighted = focusItem?.index === item && focusItem.highlight;
-
-        return (
-          <Message
-            key={mEvent.getId()}
-            data-message-item={item}
-            data-message-id={mEventId}
-            room={room}
-            mEvent={mEvent}
-            messageSpacing={messageSpacing}
-            messageLayout={messageLayout}
-            collapse={collapse}
-            highlight={highlighted}
-            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
-            canSendReaction={canSendReaction}
-            canPinEvent={canPinEvent}
-            imagePackRooms={imagePackRooms}
-            relations={hasReactions ? reactionRelations : undefined}
-            onUserClick={handleUserClick}
-            onUsernameClick={handleUsernameClick}
-            onReplyClick={handleReplyClick}
-            onReactionToggle={handleReactionToggle}
-            reactions={
-              reactionRelations && (
-                <Reactions
-                  style={{ marginTop: config.space.S200 }}
-                  room={room}
-                  relations={reactionRelations}
-                  mEventId={mEventId}
-                  canSendReaction={canSendReaction}
-                  onReactionToggle={handleReactionToggle}
-                />
-              )
-            }
-            hideReadReceipts={hideActivity}
-            showDeveloperTools={showDeveloperTools}
-            memberPowerTag={getMemberPowerTag(mEvent.getSender() ?? '')}
-            accessibleTagColors={accessiblePowerTagColors}
-            legacyUsernameColor={legacyUsernameColor || direct}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          >
-            {mEvent.isRedacted() ? (
-              <RedactedContent reason={mEvent.getUnsigned().redacted_because?.content.reason} />
-            ) : (
-              <MSticker
-                content={mEvent.getContent()}
-                renderImageContent={(props) => (
-                  <ImageContent
-                    {...props}
-                    autoPlay={mediaAutoLoad}
-                    renderImage={(p) => <Image {...p} loading="lazy" />}
-                    renderViewer={(p) => <ImageViewer {...p} />}
-                  />
-                )}
-              />
-            )}
-          </Message>
-        );
-      },
-      [StateEvent.RoomMember]: (mEventId, mEvent, item) => {
-        const membershipChanged = isMembershipChanged(mEvent);
-        if (membershipChanged && hideMembershipEvents) return null;
-        if (!membershipChanged && hideNickAvatarEvents) return null;
-
-        const highlighted = focusItem?.index === item && focusItem.highlight;
-        const parsed = parseMemberEvent(mEvent);
-
-        const timeJSX = (
-          <Time
-            ts={mEvent.getTs()}
-            compact={messageLayout === MessageLayout.Compact}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          />
-        );
-
-        return (
-          <Event
-            key={mEvent.getId()}
-            data-message-item={item}
-            data-message-id={mEventId}
-            room={room}
-            mEvent={mEvent}
-            highlight={highlighted}
-            messageSpacing={messageSpacing}
-            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
-            hideReadReceipts={hideActivity}
-            showDeveloperTools={showDeveloperTools}
-          >
-            <EventContent
-              messageLayout={messageLayout}
-              time={timeJSX}
-              iconSrc={parsed.icon}
-              content={
-                <Box grow="Yes" direction="Column">
-                  <Text size="T300" priority="300">
-                    {parsed.body}
-                  </Text>
-                </Box>
-              }
-            />
-          </Event>
-        );
-      },
-      [StateEvent.RoomName]: (mEventId, mEvent, item) => {
-        const highlighted = focusItem?.index === item && focusItem.highlight;
-        const senderId = mEvent.getSender() ?? '';
-        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
-
-        const timeJSX = (
-          <Time
-            ts={mEvent.getTs()}
-            compact={messageLayout === MessageLayout.Compact}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          />
-        );
-
-        return (
-          <Event
-            key={mEvent.getId()}
-            data-message-item={item}
-            data-message-id={mEventId}
-            room={room}
-            mEvent={mEvent}
-            highlight={highlighted}
-            messageSpacing={messageSpacing}
-            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
-            hideReadReceipts={hideActivity}
-            showDeveloperTools={showDeveloperTools}
-          >
-            <EventContent
-              messageLayout={messageLayout}
-              time={timeJSX}
-              iconSrc={Icons.Hash}
-              content={
-                <Box grow="Yes" direction="Column">
-                  <Text size="T300" priority="300">
-                    <b>{senderName}</b>
-                    {t('Organisms.RoomCommon.changed_room_name')}
-                  </Text>
-                </Box>
-              }
-            />
-          </Event>
-        );
-      },
-      [StateEvent.RoomTopic]: (mEventId, mEvent, item) => {
-        const highlighted = focusItem?.index === item && focusItem.highlight;
-        const senderId = mEvent.getSender() ?? '';
-        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
-
-        const timeJSX = (
-          <Time
-            ts={mEvent.getTs()}
-            compact={messageLayout === MessageLayout.Compact}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          />
-        );
-
-        return (
-          <Event
-            key={mEvent.getId()}
-            data-message-item={item}
-            data-message-id={mEventId}
-            room={room}
-            mEvent={mEvent}
-            highlight={highlighted}
-            messageSpacing={messageSpacing}
-            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
-            hideReadReceipts={hideActivity}
-            showDeveloperTools={showDeveloperTools}
-          >
-            <EventContent
-              messageLayout={messageLayout}
-              time={timeJSX}
-              iconSrc={Icons.Hash}
-              content={
-                <Box grow="Yes" direction="Column">
-                  <Text size="T300" priority="300">
-                    <b>{senderName}</b>
-                    {' changed room topic'}
-                  </Text>
-                </Box>
-              }
-            />
-          </Event>
-        );
-      },
-      [StateEvent.RoomAvatar]: (mEventId, mEvent, item) => {
-        const highlighted = focusItem?.index === item && focusItem.highlight;
-        const senderId = mEvent.getSender() ?? '';
-        const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
-
-        const timeJSX = (
-          <Time
-            ts={mEvent.getTs()}
-            compact={messageLayout === MessageLayout.Compact}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          />
-        );
-
-        return (
-          <Event
-            key={mEvent.getId()}
-            data-message-item={item}
-            data-message-id={mEventId}
-            room={room}
-            mEvent={mEvent}
-            highlight={highlighted}
-            messageSpacing={messageSpacing}
-            canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
-            hideReadReceipts={hideActivity}
-            showDeveloperTools={showDeveloperTools}
-          >
-            <EventContent
-              messageLayout={messageLayout}
-              time={timeJSX}
-              iconSrc={Icons.Hash}
-              content={
-                <Box grow="Yes" direction="Column">
-                  <Text size="T300" priority="300">
-                    <b>{senderName}</b>
-                    {' changed room avatar'}
-                  </Text>
-                </Box>
-              }
-            />
-          </Event>
-        );
-      },
-    },
-    (mEventId, mEvent, item) => {
-      if (!showHiddenEvents) return null;
-      const highlighted = focusItem?.index === item && focusItem.highlight;
-      const senderId = mEvent.getSender() ?? '';
-      const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
-
-      const timeJSX = (
-        <Time
-          ts={mEvent.getTs()}
-          compact={messageLayout === MessageLayout.Compact}
-          hour24Clock={hour24Clock}
-          dateFormatString={dateFormatString}
-        />
-      );
-
-      return (
-        <Event
-          key={mEvent.getId()}
-          data-message-item={item}
-          data-message-id={mEventId}
-          room={room}
-          mEvent={mEvent}
-          highlight={highlighted}
-          messageSpacing={messageSpacing}
-          canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
-          hideReadReceipts={hideActivity}
-          showDeveloperTools={showDeveloperTools}
-        >
-          <EventContent
-            messageLayout={messageLayout}
-            time={timeJSX}
-            iconSrc={Icons.Code}
+          </EncryptedMessageEvent>
+        ) : (
+          <RenderMessageContent
+            displayName={membersAPI.getName(event.sender)}
+            eventType={event.type}
+            ts={event.origin_server_ts}
+            edited={!!editedEvent}
             content={
-              <Box grow="Yes" direction="Column">
-                <Text size="T300" priority="300">
-                  <b>{senderName}</b>
-                  {' sent '}
-                  <code className={customHtmlCss.Code}>{mEvent.getType()}</code>
-                  {' state event'}
-                </Text>
-              </Box>
+              editedEvent
+                ? rContent.newContent(editedEvent.content) ?? editedEvent.content
+                : event.content
             }
+            mediaAutoLoad={mediaAutoLoad}
+            urlPreview={showUrlPreview}
+            htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
+            outlineAttachment={messageLayout === MessageLayout.Bubble}
+            redacted={redacted.has(event.event_id)}
           />
-        </Event>
-      );
-    },
-    (mEventId, mEvent, item) => {
-      if (!showHiddenEvents) return null;
-      if (Object.keys(mEvent.getContent()).length === 0) return null;
-      if (mEvent.getRelation()) return null;
-      if (mEvent.isRedaction()) return null;
+        )}
+        {reactionJSX}
+        {threadTimeline && (
+          <ThreadSelectorContainer>
+            <ThreadSelector
+              thread={threadTimeline}
+              hour24Clock={hour24Clock}
+              dateFormatString={dateFormatString}
+              outlined={messageLayout === MessageLayout.Bubble}
+              getMemberName={membersAPI.getName}
+              onClick={handleOpenThread}
+            />
+          </ThreadSelectorContainer>
+        )}
+      </Message>
+    );
+  };
 
-      const highlighted = focusItem?.index === item && focusItem.highlight;
-      const senderId = mEvent.getSender() ?? '';
-      const senderName = getMemberDisplayName(room, senderId) || getMxIdLocalPart(senderId);
-
-      const timeJSX = (
-        <Time
-          ts={mEvent.getTs()}
-          compact={messageLayout === MessageLayout.Compact}
-          hour24Clock={hour24Clock}
-          dateFormatString={dateFormatString}
-        />
-      );
-
-      return (
-        <Event
-          key={mEvent.getId()}
-          data-message-item={item}
-          data-message-id={mEventId}
-          room={room}
-          mEvent={mEvent}
-          highlight={highlighted}
-          messageSpacing={messageSpacing}
-          canDelete={canRedact || mEvent.getSender() === mx.getUserId()}
-          hideReadReceipts={hideActivity}
-          showDeveloperTools={showDeveloperTools}
-        >
-          <EventContent
-            messageLayout={messageLayout}
-            time={timeJSX}
-            iconSrc={Icons.Code}
-            content={
-              <Box grow="Yes" direction="Column">
-                <Text size="T300" priority="300">
-                  <b>{senderName}</b>
-                  {' sent '}
-                  <code className={customHtmlCss.Code}>{mEvent.getType()}</code>
-                  {' event'}
-                </Text>
-              </Box>
-            }
-          />
-        </Event>
-      );
-    }
-  );
-
-  let prevEvent: MatrixEvent | undefined;
+  let prevEvent: MessageEventWithoutRoomId | undefined;
   let isPrevRendered = false;
   let newDivider = false;
   let dayDivider = false;
   const eventRenderer = (item: number) => {
-    const [eventTimeline, baseIndex] = getTimelineAndBaseIndex(timeline.linkedTimelines, item);
-    if (!eventTimeline) return null;
-    const timelineSet = eventTimeline?.getTimelineSet();
-    const mEvent = getTimelineEvent(eventTimeline, getTimelineRelativeIndex(item, baseIndex));
-    const mEventId = mEvent?.getId();
+    const event = events[item];
 
-    if (!mEvent || !mEventId) return null;
+    if (!event) return null;
 
-    const eventSender = mEvent.getSender();
-    if (eventSender && ignoredUsersSet.has(eventSender)) {
+    if (event.sender && ignoredUsersSet.has(event.sender)) {
       return null;
     }
-    if (mEvent.isRedacted() && !showHiddenEvents) {
+    if (redacted.has(event.event_id) && !showHiddenEvents) {
       return null;
     }
 
     if (!newDivider && readUptoEventIdRef.current) {
-      newDivider = prevEvent?.getId() === readUptoEventIdRef.current;
+      newDivider = prevEvent?.event_id === readUptoEventIdRef.current;
     }
     if (!dayDivider) {
-      dayDivider = prevEvent ? !inSameDay(prevEvent.getTs(), mEvent.getTs()) : false;
+      dayDivider = prevEvent
+        ? !inSameDay(prevEvent.origin_server_ts, event.origin_server_ts)
+        : false;
     }
 
     const collapsed =
       isPrevRendered &&
       !dayDivider &&
-      (!newDivider || eventSender === mx.getUserId()) &&
+      (!newDivider || event.sender === ct.session.userId) &&
       prevEvent !== undefined &&
-      prevEvent.getSender() === eventSender &&
-      prevEvent.getType() === mEvent.getType() &&
-      minuteDifference(prevEvent.getTs(), mEvent.getTs()) < 2;
+      prevEvent.sender === event.sender &&
+      prevEvent.type === event.type &&
+      minuteDifference(prevEvent.origin_server_ts, event.origin_server_ts) < 2 &&
+      !getThreadId(prevEvent) &&
+      !getReplyId(event.content);
 
-    const eventJSX = reactionOrEditEvent(mEvent)
-      ? null
-      : renderMatrixEvent(
-          mEvent.getType(),
-          typeof mEvent.getStateKey() === 'string',
-          mEventId,
-          mEvent,
-          item,
-          timelineSet,
-          collapsed
-        );
-    prevEvent = mEvent;
+    const eventJSX = renderMatrixEvent(event, item, collapsed);
+    prevEvent = event;
     isPrevRendered = !!eventJSX;
 
     const newDividerJSX =
-      newDivider && eventJSX && eventSender !== mx.getUserId() ? (
-        <MessageBase space={messageSpacing}>
-          <TimelineDivider style={{ color: color.Success.Main }} variant="Inherit">
-            <Badge as="span" size="500" variant="Success" fill="Solid" radii="300">
-              <Text size="L400">New Messages</Text>
-            </Badge>
-          </TimelineDivider>
-        </MessageBase>
+      newDivider && eventJSX && event.sender !== ct.session.userId ? (
+        <NewMessageDivider messageSpacing={messageSpacing} />
       ) : null;
 
     const dayDividerJSX =
       dayDivider && eventJSX ? (
-        <MessageBase space={messageSpacing}>
-          <TimelineDivider variant="Surface">
-            <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
-              <Text size="L400">
-                {(() => {
-                  if (today(mEvent.getTs())) return 'Today';
-                  if (yesterday(mEvent.getTs())) return 'Yesterday';
-                  return timeDayMonthYear(mEvent.getTs());
-                })()}
-              </Text>
-            </Badge>
-          </TimelineDivider>
-        </MessageBase>
+        <DayDivider ts={event.origin_server_ts} messageSpacing={messageSpacing} />
+      ) : null;
+
+    const replyEventId = getReplyId(event.content);
+
+    const replyJSX =
+      replyEventId && !getThreadId(event) ? (
+        <Reply
+          roomId={roomId}
+          eventId={replyEventId}
+          onClick={handleOpenReply}
+          getMemberPowerTag={getMemberPowerTag}
+          accessibleTagColors={accessiblePowerTagColors}
+          legacyUsernameColor={legacyUsernameColor || direct}
+          redacted={redacted.has(replyEventId)}
+          getMemberName={membersAPI.getName}
+          timeline={timeline}
+          htmlReactParserOptions={htmlReactParserOptions}
+          linkifyOpts={linkifyOpts}
+          hour24Clock={hour24Clock}
+          dateFormatString={dateFormatString}
+          messageLayout={messageLayout}
+          messageSpacing={messageSpacing}
+          mediaAutoLoad={mediaAutoLoad}
+        />
       ) : null;
 
     if (eventJSX && (newDividerJSX || dayDividerJSX)) {
@@ -1651,9 +579,19 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
       if (dayDividerJSX) dayDivider = false;
 
       return (
-        <React.Fragment key={mEventId}>
+        <React.Fragment key={event.event_id}>
           {newDividerJSX}
           {dayDividerJSX}
+          {replyJSX}
+          {eventJSX}
+        </React.Fragment>
+      );
+    }
+
+    if (replyJSX) {
+      return (
+        <React.Fragment key={event.event_id}>
+          {replyJSX}
           {eventJSX}
         </React.Fragment>
       );
@@ -1664,7 +602,7 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
 
   return (
     <Box grow="Yes" style={{ position: 'relative' }}>
-      {unreadInfo?.readUptoEventId && !unreadInfo?.inLiveTimeline && (
+      {/* {unreadInfo?.readUptoEventId && !unreadInfo?.inLiveTimeline && (
         <TimelineFloat position="Top">
           <Chip
             variant="Primary"
@@ -1686,14 +624,14 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
             <Text size="L400">Mark as Read</Text>
           </Chip>
         </TimelineFloat>
-      )}
+      )} */}
       <Scroll ref={scrollRef} visibility="Hover">
         <Box
           direction="Column"
           justifyContent="End"
           style={{ minHeight: '100%', padding: `${config.space.S600} 0` }}
         >
-          {!canPaginateBack && rangeAtStart && getItems().length > 0 && (
+          {!!messageBatch.prev.end && rangeAtStart && (
             <div
               style={{
                 padding: `${config.space.S700} ${config.space.S400} ${config.space.S600} ${
@@ -1701,90 +639,59 @@ export function RoomTimeline({ room, eventId, roomInputRef, editor }: RoomTimeli
                 }`,
               }}
             >
-              <RoomIntro room={room} />
+              <RoomIntro name={getRoomName(roomId) ?? 'Unknown'} avatar={getRoomAvatar(roomId)} />
             </div>
           )}
-          {(canPaginateBack || !rangeAtStart) &&
-            (messageLayout === MessageLayout.Compact ? (
-              <>
-                <MessageBase>
-                  <CompactPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase>
-                  <CompactPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase>
-                  <CompactPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase>
-                  <CompactPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase ref={observeBackAnchor}>
-                  <CompactPlaceholder key={getItems().length} />
-                </MessageBase>
-              </>
-            ) : (
-              <>
-                <MessageBase>
-                  <DefaultPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase>
-                  <DefaultPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase ref={observeBackAnchor}>
-                  <DefaultPlaceholder key={getItems().length} />
-                </MessageBase>
-              </>
-            ))}
-
+          {(!messageBatch.prev.end || !rangeAtStart) && (
+            <PlaceholderList
+              ref={observeBackAnchor}
+              count={5}
+              Placeholder={
+                messageLayout === MessageLayout.Compact ? CompactPlaceholder : DefaultPlaceholder
+              }
+            />
+          )}
           {getItems().map(eventRenderer)}
+          {(!messageBatch.next.end || !rangeAtEnd) && (
+            <PlaceholderList
+              ref={observeFrontAnchor}
+              count={5}
+              Placeholder={
+                messageLayout === MessageLayout.Compact ? CompactPlaceholder : DefaultPlaceholder
+              }
+            />
+          )}
 
-          {(!liveTimelineLinked || !rangeAtEnd) &&
-            (messageLayout === MessageLayout.Compact ? (
-              <>
-                <MessageBase ref={observeFrontAnchor}>
-                  <CompactPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase>
-                  <CompactPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase>
-                  <CompactPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase>
-                  <CompactPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase>
-                  <CompactPlaceholder key={getItems().length} />
-                </MessageBase>
-              </>
-            ) : (
-              <>
-                <MessageBase ref={observeFrontAnchor}>
-                  <DefaultPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase>
-                  <DefaultPlaceholder key={getItems().length} />
-                </MessageBase>
-                <MessageBase>
-                  <DefaultPlaceholder key={getItems().length} />
-                </MessageBase>
-              </>
-            ))}
+          {rangeAtEnd && messageBatch.next.end && (
+            <>
+              <OutboxView
+                senders={localEventSenders}
+                messageBatch={messageBatch}
+                membersAPI={membersAPI}
+                redacted={redacted}
+                messageLayout={messageLayout}
+                messageSpacing={messageSpacing}
+                onUserClick={handleUserClick}
+                onUsernameClick={handleUsernameClick}
+                getMemberPowerTag={getMemberPowerTag}
+                accessibleTagColors={accessiblePowerTagColors}
+                legacyUsernameColor={legacyUsernameColor || direct}
+                mediaAutoLoad={mediaAutoLoad}
+                urlPreview={showUrlPreview}
+                hour24Clock={hour24Clock}
+                dateFormatString={dateFormatString}
+                htmlReactParserOptions={htmlReactParserOptions}
+                linkifyOpts={linkifyOpts}
+              />
+              <RoomViewTyping />
+            </>
+          )}
           <span ref={atBottomAnchorRef} />
         </Box>
       </Scroll>
       {!atBottom && (
         <TimelineFloat position="Bottom">
-          <Chip
-            variant="SurfaceVariant"
-            radii="Pill"
-            outlined
-            before={<Icon size="50" src={Icons.ArrowBottom} />}
-            onClick={handleJumpToLatest}
-          >
-            <Text size="L400">Jump to Latest</Text>
-          </Chip>
+          <JumpToLatestButton getScrollElement={getScrollElement} />
         </TimelineFloat>
       )}
     </Box>
diff --git a/src/app/features/room/RoomTombstone.tsx b/src/app/features/room/RoomTombstone.tsx
index 24f0b80e..6649d7e9 100644
--- a/src/app/features/room/RoomTombstone.tsx
+++ b/src/app/features/room/RoomTombstone.tsx
@@ -1,33 +1,50 @@
 import React, { useCallback } from 'react';
 import { Box, Button, Spinner, Text, color } from 'folds';
-
+import { postJoin, PostJoinOK } from 'neurone/lib/api/matrix/client/v3/join';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import * as css from './RoomTombstone.css';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { Membership } from '../../../types/matrix/room';
+import { StateEventType } from '../../../types/matrix/room';
 import { RoomInputPlaceholder } from './RoomInputPlaceholder';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { getViaServers } from '../../plugins/via-servers';
+import { useClient } from '../../hooks/useClient';
+import { useRoomStateEvent } from '../../hooks/storage/useRoomStateEvent';
+import { useAllJoinedRoomsSet } from '../../hooks/useGetRoom';
+import { getMxIdServer } from '../../utils/matrix';
 
-type RoomTombstoneProps = { roomId: string; body?: string; replacementRoomId: string };
-export function RoomTombstone({ roomId, body, replacementRoomId }: RoomTombstoneProps) {
-  const mx = useMatrixClient();
+type RoomTombstoneProps = { roomId: string; replacementRoomId: string };
+export function RoomTombstone({ roomId, replacementRoomId }: RoomTombstoneProps) {
+  const ct = useClient();
   const { navigateRoom } = useRoomNavigate();
+  const joinedRooms = useAllJoinedRoomsSet();
+  const tombstoneEventResult = useRoomStateEvent(roomId, StateEventType.RoomTombstone, '');
+  const tombstoneEvent = tombstoneEventResult.value;
+  const { content } = tombstoneEvent?.event ?? {};
+  const body =
+    content && 'body' in content && typeof content.body === 'string'
+      ? content.body.trim()
+      : undefined;
 
-  const [joinState, handleJoin] = useAsyncCallback(
-    useCallback(() => {
-      const currentRoom = mx.getRoom(roomId);
-      const via = currentRoom ? getViaServers(currentRoom) : [];
-      return mx.joinRoom(replacementRoomId, {
-        viaServers: via,
-      });
-    }, [mx, roomId, replacementRoomId])
+  const [joinState, handleJoin] = useAsyncCallback<string, Error, []>(
+    useCallback(async () => {
+      const sender = tombstoneEvent?.event.sender;
+      const senderServer = sender ? getMxIdServer(sender) : undefined;
+      const via = senderServer ? [senderServer] : undefined;
+      const response = await ct.requestAuthJSON(
+        postJoin({
+          pathParams: { roomIdOrAlias: replacementRoomId },
+          searchParams: { server_name: via, via },
+        })
+      );
+      const [err, result] = await parseMatrixResp<PostJoinOK>(response);
+      if (err) throw new Error(printMatrixError(err));
+      return result.room_id;
+    }, [ct, replacementRoomId, tombstoneEvent])
   );
-  const replacementRoom = mx.getRoom(replacementRoomId);
 
   const handleOpen = () => {
-    if (replacementRoom) navigateRoom(replacementRoom.roomId);
-    if (joinState.status === AsyncStatus.Success) navigateRoom(joinState.data.roomId);
+    if (joinedRooms.has(replacementRoomId)) navigateRoom(replacementRoomId);
+    if (joinState.status === AsyncStatus.Success) navigateRoom(joinState.data);
   };
 
   return (
@@ -36,13 +53,12 @@ export function RoomTombstone({ roomId, body, replacementRoomId }: RoomTombstone
         <Text size="T400">{body || 'This room has been replaced and is no longer active.'}</Text>
         {joinState.status === AsyncStatus.Error && (
           <Text style={{ color: color.Critical.Main }} size="T200">
-            {(joinState.error as any)?.message ?? 'Failed to join replacement room!'}
+            {joinState.error.message ?? 'Failed to join replacement room!'}
           </Text>
         )}
       </Box>
       <Box shrink="No">
-        {replacementRoom?.getMyMembership() === Membership.Join ||
-        joinState.status === AsyncStatus.Success ? (
+        {joinedRooms.has(replacementRoomId) || joinState.status === AsyncStatus.Success ? (
           <Button onClick={handleOpen} size="300" variant="Success" fill="Solid" radii="300">
             <Text size="B300">Open New Room</Text>
           </Button>
diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 0f837594..4d7c40d2 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -1,16 +1,11 @@
 import React, { useCallback, useRef } from 'react';
 import { Box, Text, config } from 'folds';
-import { EventType, Room } from 'matrix-js-sdk';
 import { ReactEditor } from 'slate-react';
 import { isKeyHotkey } from 'is-hotkey';
-import { useStateEvent } from '../../hooks/useStateEvent';
-import { StateEvent } from '../../../types/matrix/room';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useEditor } from '../../components/editor';
 import { RoomInputPlaceholder } from './RoomInputPlaceholder';
 import { RoomTimeline } from './RoomTimeline';
-import { RoomViewTyping } from './RoomViewTyping';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
@@ -22,6 +17,12 @@ import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useRoom } from '../../hooks/useRoom';
+import { useObservableValue } from '../../hooks/useObservableValue';
+import { useClient } from '../../hooks/useClient';
+import { MessageEvent } from '../../../types/matrix/room';
+import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { Timeline } from '../../../client/room';
 
 const FN_KEYS_REGEX = /^F\d+$/;
 const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
@@ -56,23 +57,25 @@ const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
   return true;
 };
 
-export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
+export function RoomView({ eventId, timeline }: { eventId?: string; timeline: Timeline }) {
   const roomInputRef = useRef<HTMLDivElement>(null);
   const roomViewRef = useRef<HTMLDivElement>(null);
 
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
-  const { roomId } = room;
+  const roomId = useRoom();
   const editor = useEditor();
+  const ct = useClient();
+  const { memberEventsResult } = useRoomMembersAPI();
 
-  const mx = useMatrixClient();
+  const roomToReplacement = useObservableValue(ct.roomToReplacement);
+  const replacementRoom = roomToReplacement.get(roomId);
 
-  const tombstoneEvent = useStateEvent(room, StateEvent.RoomTombstone);
+  const creators = useRoomCreators(roomId);
   const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(room);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const canMessage = permissions.event(EventType.RoomMessage, mx.getSafeUserId());
+  const canMessage = permissions.event(MessageEvent.RoomMessage, ct.session.userId);
 
   useKeyDown(
     window,
@@ -95,33 +98,24 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
     <Page ref={roomViewRef}>
       <RoomViewHeader />
       <Box grow="Yes" direction="Column">
-        <RoomTimeline
-          key={roomId}
-          room={room}
-          eventId={eventId}
-          roomInputRef={roomInputRef}
-          editor={editor}
-        />
-        <RoomViewTyping room={room} />
+        {timeline && (
+          <RoomTimeline
+            key={roomId}
+            eventId={eventId}
+            roomInputRef={roomInputRef}
+            editor={editor}
+            timeline={timeline}
+          />
+        )}
       </Box>
       <Box shrink="No" direction="Column">
         <div style={{ padding: `0 ${config.space.S400}` }}>
-          {tombstoneEvent ? (
-            <RoomTombstone
-              roomId={roomId}
-              body={tombstoneEvent.getContent().body}
-              replacementRoomId={tombstoneEvent.getContent().replacement_room}
-            />
+          {replacementRoom ? (
+            <RoomTombstone roomId={roomId} replacementRoomId={replacementRoom} />
           ) : (
             <>
               {canMessage && (
-                <RoomInput
-                  room={room}
-                  editor={editor}
-                  roomId={roomId}
-                  fileDropContainerRef={roomViewRef}
-                  ref={roomInputRef}
-                />
+                <RoomInput editor={editor} fileDropContainerRef={roomViewRef} ref={roomInputRef} />
               )}
               {!canMessage && (
                 <RoomInputPlaceholder
@@ -135,7 +129,7 @@ export function RoomView({ room, eventId }: { room: Room; eventId?: string }) {
             </>
           )}
         </div>
-        {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing room={room} />}
+        {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing />}
       </Box>
     </Page>
   );
diff --git a/src/app/features/room/RoomViewFollowing.tsx b/src/app/features/room/RoomViewFollowing.tsx
index 5a96e6ad..8a5b17ca 100644
--- a/src/app/features/room/RoomViewFollowing.tsx
+++ b/src/app/features/room/RoomViewFollowing.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useMemo, useState } from 'react';
 import {
   Box,
   Icon,
@@ -11,135 +11,142 @@ import {
   as,
   config,
 } from 'folds';
-import { Room } from 'matrix-js-sdk';
+import { ObservableValue } from 'neurone/lib/utils/observable';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
-
-import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
 import * as css from './RoomViewFollowing.css';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { useRoomLatestRenderedEvent } from '../../hooks/useRoomLatestRenderedEvent';
-import { useRoomEventReaders } from '../../hooks/useRoomEventReaders';
 import { EventReaders } from '../../components/event-readers';
 import { stopPropagation } from '../../utils/keyboard';
+import { useClient } from '../../hooks/useClient';
+import { useObservableValue, useObservableValuePromise } from '../../hooks/useObservableValue';
+import { useRoom } from '../../hooks/useRoom';
+import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
 
 export function RoomViewFollowingPlaceholder() {
   return <div className={css.RoomViewFollowingPlaceholder} />;
 }
 
-export type RoomViewFollowingProps = {
-  room: Room;
-};
-export const RoomViewFollowing = as<'div', RoomViewFollowingProps>(
-  ({ className, room, ...props }, ref) => {
-    const mx = useMatrixClient();
-    const [open, setOpen] = useState(false);
-    const latestEvent = useRoomLatestRenderedEvent(room);
-    const latestEventReaders = useRoomEventReaders(room, latestEvent?.getId());
-    const names = latestEventReaders
-      .filter((readerId) => readerId !== mx.getUserId())
-      .map(
-        (readerId) => getMemberDisplayName(room, readerId) ?? getMxIdLocalPart(readerId) ?? readerId
-      );
+export const RoomViewFollowing = as<'div'>(({ className, ...props }, ref) => {
+  const [open, setOpen] = useState(false);
+  const ct = useClient();
+  const roomId = useRoom();
+  const membersAPI = useRoomMembersAPI();
 
-    const eventId = latestEvent?.getId();
+  const roomToLatestEvent = useObservableValue(ct.roomToLatestEvent);
+  const latestEvent = roomToLatestEvent.get(roomId);
+  const eventId = latestEvent?.event_id;
 
-    return (
-      <>
-        {eventId && (
-          <Overlay open={open} backdrop={<OverlayBackdrop />}>
-            <OverlayCenter>
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setOpen(false),
-                  clickOutsideDeactivates: true,
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Modal variant="Surface" size="300">
-                  <EventReaders room={room} eventId={eventId} requestClose={() => setOpen(false)} />
-                </Modal>
-              </FocusTrap>
-            </OverlayCenter>
-          </Overlay>
+  const receiptsResult = useObservableValuePromise(
+    useMemo(() => {
+      if (!eventId) return Promise.resolve(new ObservableValue(undefined, ''));
+      return ct.storage.readReceipt.observableRead.queryIndex('eventId', eventId);
+    }, [ct, eventId])
+  );
+  const receipts = receiptsResult.value;
+
+  const names = useMemo(
+    () =>
+      receipts
+        ?.map((receipt) => receipt.userId)
+        .filter((readerId) => readerId !== ct.session.userId)
+        .map((readerId) => membersAPI.getName(readerId)) ?? [],
+    [ct, receipts, membersAPI]
+  );
+
+  return (
+    <>
+      {eventId && (
+        <Overlay open={open} backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setOpen(false),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal variant="Surface" size="300">
+                <EventReaders eventId={eventId} requestClose={() => setOpen(false)} />
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+      <Box
+        as={names.length > 0 ? 'button' : 'div'}
+        onClick={names.length > 0 ? () => setOpen(true) : undefined}
+        className={classNames(css.RoomViewFollowing({ clickable: names.length > 0 }), className)}
+        alignItems="Center"
+        justifyContent="End"
+        gap="200"
+        {...props}
+        ref={ref}
+      >
+        {names.length > 0 && (
+          <>
+            <Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.CheckTwice} />
+            <Text size="T300" truncate>
+              {names.length === 1 && (
+                <>
+                  <b>{names[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' is following the conversation.'}
+                  </Text>
+                </>
+              )}
+              {names.length === 2 && (
+                <>
+                  <b>{names[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' and '}
+                  </Text>
+                  <b>{names[1]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' are following the conversation.'}
+                  </Text>
+                </>
+              )}
+              {names.length === 3 && (
+                <>
+                  <b>{names[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {', '}
+                  </Text>
+                  <b>{names[1]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' and '}
+                  </Text>
+                  <b>{names[2]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' are following the conversation.'}
+                  </Text>
+                </>
+              )}
+              {names.length > 3 && (
+                <>
+                  <b>{names[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {', '}
+                  </Text>
+                  <b>{names[1]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {', '}
+                  </Text>
+                  <b>{names[2]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' and '}
+                  </Text>
+                  <b>{names.length - 3} others</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' are following the conversation.'}
+                  </Text>
+                </>
+              )}
+            </Text>
+          </>
         )}
-        <Box
-          as={names.length > 0 ? 'button' : 'div'}
-          onClick={names.length > 0 ? () => setOpen(true) : undefined}
-          className={classNames(css.RoomViewFollowing({ clickable: names.length > 0 }), className)}
-          alignItems="Center"
-          justifyContent="End"
-          gap="200"
-          {...props}
-          ref={ref}
-        >
-          {names.length > 0 && (
-            <>
-              <Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.CheckTwice} />
-              <Text size="T300" truncate>
-                {names.length === 1 && (
-                  <>
-                    <b>{names[0]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' is following the conversation.'}
-                    </Text>
-                  </>
-                )}
-                {names.length === 2 && (
-                  <>
-                    <b>{names[0]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' and '}
-                    </Text>
-                    <b>{names[1]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' are following the conversation.'}
-                    </Text>
-                  </>
-                )}
-                {names.length === 3 && (
-                  <>
-                    <b>{names[0]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {', '}
-                    </Text>
-                    <b>{names[1]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' and '}
-                    </Text>
-                    <b>{names[2]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' are following the conversation.'}
-                    </Text>
-                  </>
-                )}
-                {names.length > 3 && (
-                  <>
-                    <b>{names[0]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {', '}
-                    </Text>
-                    <b>{names[1]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {', '}
-                    </Text>
-                    <b>{names[2]}</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' and '}
-                    </Text>
-                    <b>{names.length - 3} others</b>
-                    <Text as="span" size="Inherit" priority="300">
-                      {' are following the conversation.'}
-                    </Text>
-                  </>
-                )}
-              </Text>
-            </>
-          )}
-        </Box>
-      </>
-    );
-  }
-);
+      </Box>
+    </>
+  );
+});
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 9b4bfd23..8e83b106 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -23,32 +23,20 @@ import {
   Spinner,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
-import { JoinRule, Room } from 'matrix-js-sdk';
-import { useAtomValue } from 'jotai';
-
-import { useStateEvent } from '../../hooks/useStateEvent';
 import { PageHeader } from '../../components/page';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { RoomTopicViewer } from '../../components/room-topic-viewer';
-import { StateEvent } from '../../../types/matrix/room';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoom } from '../../hooks/useRoom';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
-import { getCanonicalAliasOrRoomId, isRoomAlias, mxcUrlToHttp } from '../../utils/matrix';
 import { _SearchPathSearchParams } from '../../pages/paths';
 import * as css from './RoomViewHeader.css';
-import { useRoomUnread } from '../../state/hooks/unread';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
-import { markAsRead } from '../../utils/notifications';
-import { roomToUnreadAtom } from '../../state/room/roomToUnread';
 import { copyToClipboard } from '../../utils/dom';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
-import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
-import { mDirectAtom } from '../../state/mDirectList';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { stopPropagation } from '../../utils/keyboard';
 import { getMatrixToRoom } from '../../plugins/matrix-to';
@@ -69,28 +57,43 @@ import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { useClient } from '../../hooks/useClient';
+import { useObservableValue } from '../../hooks/useObservableValue';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { useRoomTopic } from '../../hooks/storage/useRoomTopic';
+import {
+  useRoomNotifications,
+  useRoomTotalNotifications,
+} from '../../state/hooks/roomNotifications';
+import { roomToNotificationsAtom } from '../../state/room/roomToNotifications';
 
 type RoomMenuProps = {
-  room: Room;
   requestClose: () => void;
 };
-const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose }, ref) => {
-  const mx = useMatrixClient();
+const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ requestClose }, ref) => {
+  const ct = useClient();
+  const roomId = useRoom();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
+
+  const roomNotifications = useRoomNotifications(roomId, roomToNotificationsAtom);
+  const notifications = useRoomTotalNotifications(roomNotifications);
+
   const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(room);
+  const creators = useRoomCreators(roomId);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const canInvite = permissions.action('invite', mx.getSafeUserId());
+  const canInvite = permissions.action('invite', ct.session.userId);
   const notificationPreferences = useRoomsNotificationPreferencesContext();
-  const notificationMode = getRoomNotificationMode(notificationPreferences, room.roomId);
+  const notificationMode = getRoomNotificationMode(notificationPreferences, roomId);
   const { navigateRoom } = useRoomNavigate();
 
   const [invitePrompt, setInvitePrompt] = useState(false);
 
   const handleMarkAsRead = () => {
-    markAsRead(mx, room.roomId, hideActivity);
+    // markAsRead(mx, room.roomId, hideActivity);
     requestClose();
   };
 
@@ -99,16 +102,16 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
   };
 
   const handleCopyLink = () => {
-    const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-    copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
+    const alias = ct.roomToAlias.read.get(roomId);
+    const viaServers = alias ? undefined : getViaServers(creators, powerLevels);
+    copyToClipboard(getMatrixToRoom(alias ?? roomId, viaServers));
     requestClose();
   };
 
   const openSettings = useOpenRoomSettings();
-  const parentSpace = useSpaceOptionally();
+  const parentSpaceId = useSpaceOptionally();
   const handleOpenSettings = () => {
-    openSettings(room.roomId, parentSpace?.roomId);
+    openSettings(roomId, parentSpaceId);
     requestClose();
   };
 
@@ -116,7 +119,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
     <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
       {invitePrompt && (
         <InviteUserPrompt
-          room={room}
+          roomId={roomId}
           requestClose={() => {
             setInvitePrompt(false);
             requestClose();
@@ -129,13 +132,13 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
           size="300"
           after={<Icon size="100" src={Icons.CheckTwice} />}
           radii="300"
-          disabled={!unread}
+          disabled={!notifications || notifications.count === 0}
         >
           <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
             Mark as Read
           </Text>
         </MenuItem>
-        <RoomNotificationModeSwitcher roomId={room.roomId} value={notificationMode}>
+        <RoomNotificationModeSwitcher roomId={roomId} value={notificationMode}>
           {(handleOpen, opened, changing) => (
             <MenuItem
               size="300"
@@ -211,7 +214,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
                 <JumpToTime
                   onSubmit={(eventId) => {
                     setPromptJump(false);
-                    navigateRoom(room.roomId, eventId);
+                    navigateRoom(roomId, eventId);
                     requestClose();
                   }}
                   onCancel={() => setPromptJump(false)}
@@ -241,7 +244,7 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
               </MenuItem>
               {promptLeave && (
                 <LeaveRoomPrompt
-                  roomId={room.roomId}
+                  roomId={roomId}
                   onDone={requestClose}
                   onCancel={() => setPromptLeave(false)}
                 />
@@ -256,33 +259,40 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ room, requestClose
 
 export function RoomViewHeader() {
   const navigate = useNavigate();
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const screenSize = useScreenSizeContext();
-  const room = useRoom();
-  const space = useSpaceOptionally();
+  const roomId = useRoom();
+  const spaceId = useSpaceOptionally();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [pinMenuAnchor, setPinMenuAnchor] = useState<RectCords>();
-  const mDirects = useAtomValue(mDirectAtom);
+  const encryptedRooms = useObservableValue(ct.encryptedRooms);
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
 
-  const pinnedEvents = useRoomPinnedEvents(room);
-  const encryptionEvent = useStateEvent(room, StateEvent.RoomEncryption);
-  const ecryptedRoom = !!encryptionEvent;
-  const avatarMxc = useRoomAvatar(room, mDirects.has(room.roomId));
-  const name = useRoomName(room);
-  const topic = useRoomTopic(room);
+  const pinnedEvents = useRoomPinnedEvents(roomId);
+  const [getRoomHeroes, roomToHeroMemberResult] = useRoomHeroes(roomId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMemberResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMemberResult.value);
+
+  const avatarMxc = getRoomAvatar(roomId);
+  const name = getRoomName(roomId) ?? 'Unknown';
+  const topic = useRoomTopic(roomId);
   const avatarUrl = avatarMxc
-    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
   const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
 
   const handleSearchClick = () => {
     const searchParams: _SearchPathSearchParams = {
-      rooms: room.roomId,
+      rooms: roomId,
     };
-    const path = space
-      ? getSpaceSearchPath(getCanonicalAliasOrRoomId(mx, space.roomId))
+    const path = spaceId
+      ? getSpaceSearchPath(ct.roomToAlias.read.get(spaceId) ?? spaceId)
       : getHomeSearchPath();
     navigate(withSearchParam(path, searchParams));
   };
@@ -313,15 +323,11 @@ export function RoomViewHeader() {
           {screenSize !== ScreenSize.Mobile && (
             <Avatar size="300">
               <RoomAvatar
-                roomId={room.roomId}
+                roomId={roomId}
                 src={avatarUrl}
                 alt={name}
                 renderFallback={() => (
-                  <RoomIcon
-                    size="200"
-                    joinRule={room.getJoinRule() ?? JoinRule.Restricted}
-                    filled
-                  />
+                  <RoomIcon size="200" joinRule={roomToJoinRule.get(roomId)} filled />
                 )}
               />
             </Avatar>
@@ -370,7 +376,7 @@ export function RoomViewHeader() {
           </Box>
         </Box>
         <Box shrink="No">
-          {!ecryptedRoom && (
+          {!encryptedRooms.has(roomId) && (
             <TooltipProvider
               position="Bottom"
               offset={4}
@@ -439,7 +445,7 @@ export function RoomViewHeader() {
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <RoomPinMenu room={room} requestClose={() => setPinMenuAnchor(undefined)} />
+                <RoomPinMenu requestClose={() => setPinMenuAnchor(undefined)} />
               </FocusTrap>
             }
           />
@@ -492,7 +498,7 @@ export function RoomViewHeader() {
                   escapeDeactivates: stopPropagation,
                 }}
               >
-                <RoomMenu room={room} requestClose={() => setMenuAnchor(undefined)} />
+                <RoomMenu requestClose={() => setMenuAnchor(undefined)} />
               </FocusTrap>
             }
           />
diff --git a/src/app/features/room/RoomViewTyping.css.ts b/src/app/features/room/RoomViewTyping.css.ts
index 5c90a178..8d4872a2 100644
--- a/src/app/features/room/RoomViewTyping.css.ts
+++ b/src/app/features/room/RoomViewTyping.css.ts
@@ -13,12 +13,11 @@ const SlideUpAnime = keyframes({
 export const RoomViewTyping = style([
   DefaultReset,
   {
-    padding: `0 ${config.space.S500}`,
+    padding: `0 0 0 ${config.space.S500}`,
     width: '100%',
-    backgroundColor: color.Surface.Container,
     color: color.Surface.OnContainer,
     position: 'absolute',
-    bottom: 0,
+    bottom: `calc(-1 * ${config.space.S600})`,
     animation: `${SlideUpAnime} 100ms ease-in-out`,
   },
 ]);
diff --git a/src/app/features/room/RoomViewTyping.tsx b/src/app/features/room/RoomViewTyping.tsx
index 1142a3a8..9e3f3713 100644
--- a/src/app/features/room/RoomViewTyping.tsx
+++ b/src/app/features/room/RoomViewTyping.tsx
@@ -1,121 +1,115 @@
 import React from 'react';
 import { Box, Icon, IconButton, Icons, Text, as } from 'folds';
-import { Room } from 'matrix-js-sdk';
 import classNames from 'classnames';
 import { useSetAtom } from 'jotai';
 import { roomIdToTypingMembersAtom } from '../../state/typingMembers';
 import { TypingIndicator } from '../../components/typing-indicator';
-import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
 import * as css from './RoomViewTyping.css';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useRoomTypingMember } from '../../hooks/useRoomTypingMembers';
+import { useRoom } from '../../hooks/useRoom';
+import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { useClient } from '../../hooks/useClient';
 
-export type RoomViewTypingProps = {
-  room: Room;
-};
-export const RoomViewTyping = as<'div', RoomViewTypingProps>(
-  ({ className, room, ...props }, ref) => {
-    const setTypingMembers = useSetAtom(roomIdToTypingMembersAtom);
-    const mx = useMatrixClient();
-    const typingMembers = useRoomTypingMember(room.roomId);
+export const RoomViewTyping = as<'div'>(({ className, ...props }, ref) => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const membersAPI = useRoomMembersAPI();
 
-    const typingNames = typingMembers
-      .filter((receipt) => receipt.userId !== mx.getUserId())
-      .map(
-        (receipt) => getMemberDisplayName(room, receipt.userId) ?? getMxIdLocalPart(receipt.userId)
-      )
-      .reverse();
+  const setTypingMembers = useSetAtom(roomIdToTypingMembersAtom);
+  const typingMembers = useRoomTypingMember(roomId);
 
-    if (typingNames.length === 0) {
-      return null;
-    }
+  const typingNames = typingMembers
+    .filter((userId) => userId !== ct.session.userId)
+    .map((userId) => membersAPI.getName(userId))
+    .reverse();
 
-    const handleDropAll = () => {
-      // some homeserver does not timeout typing status
-      // we have given option so user can drop their typing status
-      typingMembers.forEach((receipt) =>
-        setTypingMembers({
-          type: 'DELETE',
-          roomId: room.roomId,
-          userId: receipt.userId,
-        })
-      );
-    };
-
-    return (
-      <div style={{ position: 'relative' }}>
-        <Box
-          className={classNames(css.RoomViewTyping, className)}
-          alignItems="Center"
-          gap="400"
-          {...props}
-          ref={ref}
-        >
-          <TypingIndicator />
-          <Text className={css.TypingText} size="T300" truncate>
-            {typingNames.length === 1 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' is typing...'}
-                </Text>
-              </>
-            )}
-            {typingNames.length === 2 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' and '}
-                </Text>
-                <b>{typingNames[1]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' are typing...'}
-                </Text>
-              </>
-            )}
-            {typingNames.length === 3 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {', '}
-                </Text>
-                <b>{typingNames[1]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' and '}
-                </Text>
-                <b>{typingNames[2]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' are typing...'}
-                </Text>
-              </>
-            )}
-            {typingNames.length > 3 && (
-              <>
-                <b>{typingNames[0]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {', '}
-                </Text>
-                <b>{typingNames[1]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {', '}
-                </Text>
-                <b>{typingNames[2]}</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' and '}
-                </Text>
-                <b>{typingNames.length - 3} others</b>
-                <Text as="span" size="Inherit" priority="300">
-                  {' are typing...'}
-                </Text>
-              </>
-            )}
-          </Text>
-          <IconButton title="Drop Typing Status" size="300" radii="Pill" onClick={handleDropAll}>
-            <Icon size="50" src={Icons.Cross} />
-          </IconButton>
-        </Box>
-      </div>
-    );
+  if (typingNames.length === 0) {
+    return null;
   }
-);
+
+  const handleDropAll = () => {
+    setTypingMembers(new Map());
+  };
+
+  return (
+    <div style={{ position: 'relative' }}>
+      <Box
+        className={classNames(css.RoomViewTyping, className)}
+        alignItems="Center"
+        gap="400"
+        {...props}
+        ref={ref}
+      >
+        <TypingIndicator />
+        <Text className={css.TypingText} size="T300" truncate>
+          {/* {typingNames.length === 0 && <b>No one is typing...</b>} */}
+          {typingNames.length === 1 && (
+            <>
+              <b>{typingNames[0]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' is typing...'}
+              </Text>
+            </>
+          )}
+          {typingNames.length === 2 && (
+            <>
+              <b>{typingNames[0]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' and '}
+              </Text>
+              <b>{typingNames[1]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' are typing...'}
+              </Text>
+            </>
+          )}
+          {typingNames.length === 3 && (
+            <>
+              <b>{typingNames[0]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {', '}
+              </Text>
+              <b>{typingNames[1]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' and '}
+              </Text>
+              <b>{typingNames[2]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' are typing...'}
+              </Text>
+            </>
+          )}
+          {typingNames.length > 3 && (
+            <>
+              <b>{typingNames[0]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {', '}
+              </Text>
+              <b>{typingNames[1]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {', '}
+              </Text>
+              <b>{typingNames[2]}</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' and '}
+              </Text>
+              <b>{typingNames.length - 3} others</b>
+              <Text as="span" size="Inherit" priority="300">
+                {' are typing...'}
+              </Text>
+            </>
+          )}
+        </Text>
+        <IconButton
+          title="Drop Typing Status"
+          size="300"
+          fill="None"
+          radii="Pill"
+          onClick={handleDropAll}
+        >
+          <Icon size="50" src={Icons.Cross} />
+        </IconButton>
+      </Box>
+    </div>
+  );
+});
diff --git a/src/app/features/room/components/JumpToLatestButton.tsx b/src/app/features/room/components/JumpToLatestButton.tsx
new file mode 100644
index 00000000..c53e6880
--- /dev/null
+++ b/src/app/features/room/components/JumpToLatestButton.tsx
@@ -0,0 +1,39 @@
+import React, { useCallback } from 'react';
+import { Chip, Icon, Icons, Spinner, Text } from 'folds';
+import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { scrollToBottom } from '../../../utils/dom';
+import { useTimelineView } from '../hooks/useTimeline';
+
+export function JumpToLatestButton({
+  getScrollElement,
+}: {
+  getScrollElement: () => HTMLDivElement | null;
+}) {
+  const timeline = useTimelineView();
+
+  const [jumpState, jumpToBottom] = useAsyncCallback(
+    useCallback(async () => {
+      await timeline.jumpToLatest();
+      const scrollEl = getScrollElement();
+      if (scrollEl) scrollToBottom(scrollEl, 'instant');
+    }, [timeline, getScrollElement])
+  );
+
+  return (
+    <Chip
+      variant="SurfaceVariant"
+      radii="Pill"
+      outlined
+      onClick={jumpToBottom}
+      before={
+        jumpState.status === AsyncStatus.Loading ? (
+          <Spinner size="50" variant="Secondary" />
+        ) : (
+          <Icon size="50" src={Icons.ArrowBottom} />
+        )
+      }
+    >
+      <Text size="L400">Jump to Latest</Text>
+    </Chip>
+  );
+}
diff --git a/src/app/features/room/components/TimelineDivider.tsx b/src/app/features/room/components/TimelineDivider.tsx
new file mode 100644
index 00000000..f2e0c923
--- /dev/null
+++ b/src/app/features/room/components/TimelineDivider.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import { as, Badge, Box, color, ContainerColor, Line, Text } from 'folds';
+import { MessageBase } from '../../../components/message';
+import { timeDayMonthYear, today, yesterday } from '../../../utils/time';
+import { MessageSpacing } from '../../../state/settings';
+
+export const TimelineDivider = as<'div', { variant?: ContainerColor | 'Inherit' }>(
+  ({ variant, children, ...props }, ref) => (
+    <Box gap="100" justifyContent="Center" alignItems="Center" {...props} ref={ref}>
+      <Line style={{ flexGrow: 1 }} variant={variant} size="300" />
+      {children}
+      <Line style={{ flexGrow: 1 }} variant={variant} size="300" />
+    </Box>
+  )
+);
+
+export function DayDivider({ messageSpacing, ts }: { messageSpacing: MessageSpacing; ts: number }) {
+  return (
+    <MessageBase space={messageSpacing}>
+      <TimelineDivider variant="Surface">
+        <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
+          <Text size="L400">
+            {(() => {
+              if (today(ts)) return 'Today';
+              if (yesterday(ts)) return 'Yesterday';
+              return timeDayMonthYear(ts);
+            })()}
+          </Text>
+        </Badge>
+      </TimelineDivider>
+    </MessageBase>
+  );
+}
+
+export function NewMessageDivider({ messageSpacing }: { messageSpacing: MessageSpacing }) {
+  return (
+    <MessageBase space={messageSpacing}>
+      <TimelineDivider style={{ color: color.Success.Main }} variant="Inherit">
+        <Badge as="span" size="500" variant="Success" fill="Solid" radii="300">
+          <Text size="L400">New Messages</Text>
+        </Badge>
+      </TimelineDivider>
+    </MessageBase>
+  );
+}
diff --git a/src/app/features/room/components/TimelineFloat.tsx b/src/app/features/room/components/TimelineFloat.tsx
new file mode 100644
index 00000000..c39c1de6
--- /dev/null
+++ b/src/app/features/room/components/TimelineFloat.tsx
@@ -0,0 +1,17 @@
+import React from 'react';
+import { as, Box } from 'folds';
+import classNames from 'classnames';
+import * as css from './styles.css';
+
+export const TimelineFloat = as<'div', css.TimelineFloatVariants>(
+  ({ position, className, ...props }, ref) => (
+    <Box
+      className={classNames(css.TimelineFloat({ position }), className)}
+      justifyContent="Center"
+      alignItems="Center"
+      gap="200"
+      {...props}
+      ref={ref}
+    />
+  )
+);
diff --git a/src/app/features/room/components/index.ts b/src/app/features/room/components/index.ts
new file mode 100644
index 00000000..2d58db04
--- /dev/null
+++ b/src/app/features/room/components/index.ts
@@ -0,0 +1,3 @@
+export * from './TimelineDivider';
+export * from './TimelineFloat';
+export * from './JumpToLatestButton';
diff --git a/src/app/features/room/RoomTimeline.css.ts b/src/app/features/room/components/styles.css.ts
similarity index 100%
rename from src/app/features/room/RoomTimeline.css.ts
rename to src/app/features/room/components/styles.css.ts
diff --git a/src/app/features/room/hooks/useEnsureRoomEncryptionSession.ts b/src/app/features/room/hooks/useEnsureRoomEncryptionSession.ts
new file mode 100644
index 00000000..793b142f
--- /dev/null
+++ b/src/app/features/room/hooks/useEnsureRoomEncryptionSession.ts
@@ -0,0 +1,75 @@
+import { useCallback } from 'react';
+import {
+  EncryptionSettings,
+  HistoryVisibility,
+  RoomEncryptionSettings,
+} from 'neurone/lib/crypto/machine';
+import { ObjectReader } from 'neurone/lib/utils';
+import { useClient } from '../../../hooks/useClient';
+import { useRoom } from '../../../hooks/useRoom';
+import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
+
+export function buildEncryptionSettings(
+  historyVisibility: HistoryVisibility,
+  roomSettings: RoomEncryptionSettings | undefined,
+  encryptionEventContent: object | undefined
+): EncryptionSettings {
+  const rotationPeriodMs = ObjectReader.number(encryptionEventContent, 'rotation_period_ms');
+
+  const rotationPeriodMsgs = ObjectReader.number(encryptionEventContent, 'rotation_period_msgs');
+
+  const rotationMilliseconds = roomSettings?.sessionRotationPeriodMs ?? rotationPeriodMs;
+
+  return {
+    algorithm: 'm.megolm.v1.aes-sha2',
+    historyVisibility,
+    encryptStateEvents: roomSettings?.encryptStateEvents,
+    // EncryptionSettings expects microseconds.
+    rotationPeriod: rotationMilliseconds === undefined ? undefined : rotationMilliseconds * 1_000,
+    rotationPeriodMessages: roomSettings?.sessionRotationPeriodMessages ?? rotationPeriodMsgs,
+    sharingStrategy: roomSettings?.onlyAllowTrustedDevices ? 'only-trusted-devices' : 'all-devices',
+  };
+}
+
+export const useEnsureRoomEncryptionSession = () => {
+  const ct = useClient();
+  const roomId = useRoom();
+
+  const { memberEventsResult, getMembership } = useRoomMembersAPI();
+
+  const prepareEncryptionSession = useCallback(async () => {
+    if (!ct.encryptedRooms.read.has(roomId)) {
+      return;
+    }
+    const historyVisibility = ct.roomToHistoryVisibility.read.get(roomId) ?? 'shared';
+    const encryptForInvited = historyVisibility !== 'joined';
+
+    // TODO: make sure all members are loaded.
+    const targetMembers = memberEventsResult.value
+      ?.map((e) => e.userId)
+      .filter((userId) => {
+        const membership = getMembership(userId);
+        return membership === 'join' || (membership === 'invite' && encryptForInvited);
+      });
+
+    if (!targetMembers) return;
+
+    await ct.machine.userTracker.track(targetMembers);
+    await ct.machine.outgoingRequests.processAll();
+    await ct.machine.outgoingRequests.claimKeys(targetMembers);
+
+    const roomSettings = await ct.machine.roomEncryption.getSettings(roomId);
+    const encryptionEventContent = ct.state.join.encryption.read.find((ev) => ev.roomId === roomId)
+      ?.event.content;
+
+    const encryptionSettings: EncryptionSettings = buildEncryptionSettings(
+      historyVisibility,
+      roomSettings,
+      encryptionEventContent
+    );
+
+    await ct.machine.roomKeys.shareRoomKey(roomId, targetMembers, encryptionSettings);
+  }, [ct, roomId, memberEventsResult, getMembership]);
+
+  return prepareEncryptionSession;
+};
diff --git a/src/app/features/room/hooks/useSendMessage.ts b/src/app/features/room/hooks/useSendMessage.ts
new file mode 100644
index 00000000..5672dfb8
--- /dev/null
+++ b/src/app/features/room/hooks/useSendMessage.ts
@@ -0,0 +1,276 @@
+import { useCallback } from 'react';
+import { Editor } from 'slate';
+import {
+  customHtmlEqualsPlainText,
+  getBeginCommand,
+  getMentions,
+  resetEditor,
+  resetEditorHistory,
+  toMatrixCustomHTML,
+  toPlainText,
+  trimCommand,
+  trimCustomHtml,
+} from '../../../components/editor';
+import { settingsAtom } from '../../../state/settings';
+import { useSetting } from '../../../state/hooks/settings';
+import { MessageEvent } from '../../../../types/matrix/room';
+import { Command, CommandRecord, SHRUG, TABLEFLIP, UNFLIP } from '../../../hooks/useCommands';
+import { useClient } from '../../../hooks/useClient';
+import { getMentionContent } from '../../../utils/room';
+import { useRoom } from '../../../hooks/useRoom';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { getImageInfo } from '../../../utils/matrix';
+import { getImageUrlBlob, loadImageElement } from '../../../utils/dom';
+import { UploadItem } from '../../../state/room/roomInputDrafts';
+import { Upload, UploadSuccess } from '../../../state/upload';
+import { fulfilledPromiseSettledResult } from '../../../utils/common';
+import {
+  getAudioMsgContent,
+  getFileMsgContent,
+  getImageMsgContent,
+  getVideoMsgContent,
+} from '../msgContent';
+import {
+  MsgType,
+  MessageContent,
+  RelationType,
+  StickerContent,
+} from '../../../../types/matrix/common';
+import { useEnsureRoomEncryptionSession } from './useEnsureRoomEncryptionSession';
+import { LocalMessage } from '../../../../client/room/local-event';
+import { useTimelineView } from './useTimeline';
+
+const useSendLocalMessage = () => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const prepareEncryptionSession = useEnsureRoomEncryptionSession();
+  const timeline = useTimelineView();
+
+  const sendLocalMessage = useCallback(
+    async (localMessage: LocalMessage) => {
+      let wireMessage = localMessage.clone();
+
+      if (ct.encryptedRooms.read.has(roomId)) {
+        await prepareEncryptionSession();
+        const encStr = await ct.machine.roomEncryption.encryptMessageEvent(
+          roomId,
+          localMessage.type,
+          localMessage.content
+        );
+        const encContent = JSON.parse(encStr);
+
+        wireMessage = new LocalMessage(roomId, MessageEvent.RoomMessageEncrypted, encContent);
+      }
+
+      const txnId = ct.getTxnId();
+
+      await timeline.sendMessage(localMessage, wireMessage, txnId);
+    },
+    [ct, roomId, prepareEncryptionSession, timeline]
+  );
+
+  return sendLocalMessage;
+};
+
+export type ReplyToData = {
+  userId: string;
+  eventId: string;
+  ping: boolean;
+};
+
+export type SendMessageCallback = (replyTo?: ReplyToData) => void;
+
+export const useSendMessage = (
+  editor: Editor,
+  commands: CommandRecord,
+  threadId?: string
+): SendMessageCallback => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
+
+  const sendLocalMessage = useSendLocalMessage();
+
+  const sendMessage: SendMessageCallback = useCallback(
+    async (replyTo) => {
+      const commandName = getBeginCommand(editor);
+      let plainText = toPlainText(editor.children, isMarkdown).trim();
+      let customHtml = trimCustomHtml(
+        toMatrixCustomHTML(editor.children, {
+          allowTextFormatting: true,
+          allowBlockMarkdown: isMarkdown,
+          allowInlineMarkdown: isMarkdown,
+        })
+      );
+      let msgType: MsgType = MsgType.Text;
+
+      if (commandName) {
+        plainText = trimCommand(commandName, plainText);
+        customHtml = trimCommand(commandName, customHtml);
+      }
+      if (commandName === Command.Me) {
+        msgType = MsgType.Emote;
+      } else if (commandName === Command.Notice) {
+        msgType = MsgType.Notice;
+      } else if (commandName === Command.Shrug) {
+        plainText = `${SHRUG} ${plainText}`;
+        customHtml = `${SHRUG} ${customHtml}`;
+      } else if (commandName === Command.TableFlip) {
+        plainText = `${TABLEFLIP} ${plainText}`;
+        customHtml = `${TABLEFLIP} ${customHtml}`;
+      } else if (commandName === Command.UnFlip) {
+        plainText = `${UNFLIP} ${plainText}`;
+        customHtml = `${UNFLIP} ${customHtml}`;
+      } else if (commandName) {
+        const commandContent = commands[commandName as Command];
+        if (commandContent) {
+          commandContent.exe(plainText);
+        }
+        resetEditor(editor);
+        resetEditorHistory(editor);
+        return;
+      }
+
+      if (plainText === '') {
+        return;
+      }
+
+      const body = plainText;
+      const formattedBody = customHtml;
+      const mentionData = getMentions(ct, editor);
+
+      const content: MessageContent = {
+        msgtype: msgType,
+        body,
+      };
+
+      if (replyTo && replyTo.userId !== ct.session.userId && replyTo.ping) {
+        mentionData.users.add(replyTo.userId);
+      }
+
+      const mMentions = getMentionContent(Array.from(mentionData.users), mentionData.room);
+      content['m.mentions'] = mMentions;
+
+      if (replyTo || !customHtmlEqualsPlainText(formattedBody, body)) {
+        content.format = 'org.matrix.custom.html';
+        content.formatted_body = formattedBody;
+      }
+      if (replyTo) {
+        content['m.relates_to'] = {
+          'm.in_reply_to': {
+            event_id: replyTo.eventId,
+          },
+        };
+      }
+      if (threadId) {
+        content['m.relates_to'] = {
+          ...content['m.relates_to'],
+          event_id: threadId,
+          rel_type: RelationType.Thread,
+        };
+        if (!replyTo) {
+          // this should be the latest threaded message event_id
+          // but we will always keep it to root. The intention is
+          // so user always see this message in response to original
+          // thread root message as they are not in response to the latest
+          // message from thread
+          content['m.relates_to']['m.in_reply_to'] = { event_id: threadId };
+          content['m.relates_to'].is_falling_back = true;
+        }
+      }
+
+      const localMessage = new LocalMessage(roomId, MessageEvent.RoomMessage, content);
+      sendLocalMessage(localMessage);
+
+      resetEditor(editor);
+      resetEditorHistory(editor);
+    },
+    [ct, roomId, editor, isMarkdown, commands, threadId, sendLocalMessage]
+  );
+
+  return sendMessage;
+};
+
+export const useSendStickerMessage = (threadId?: string) => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const useAuthentication = useMediaAuthentication();
+
+  const sendLocalMessage = useSendLocalMessage();
+
+  const sendSticker = async (mxc: string, shortcode: string, label: string) => {
+    const stickerUrl = mxcToHttp(ct.session.baseUrl, mxc, useAuthentication).url();
+    if (!stickerUrl) return;
+
+    const info = await getImageInfo(
+      await loadImageElement(stickerUrl),
+      await getImageUrlBlob(stickerUrl)
+    );
+    const content: StickerContent = {
+      body: label,
+      url: mxc,
+      info,
+    };
+    if (threadId) {
+      content['m.relates_to'] = {
+        event_id: threadId,
+        rel_type: RelationType.Thread,
+        'm.in_reply_to': { event_id: threadId },
+        is_falling_back: true,
+      };
+    }
+
+    const localMessage = new LocalMessage(roomId, MessageEvent.Sticker, content);
+    sendLocalMessage(localMessage);
+  };
+
+  return sendSticker;
+};
+
+export const useSendUploadMessage = (
+  dropUploads: (uploads: Upload[]) => void,
+  threadId?: string
+) => {
+  const ct = useClient();
+  const roomId = useRoom();
+
+  const sendLocalMessage = useSendLocalMessage();
+
+  const sendUpload = async (uploadItems: UploadItem[], uploads: UploadSuccess[]) => {
+    const contentsPromises = uploads.map(async (upload) => {
+      const fileItem = uploadItems.find((f) => f.file === upload.file);
+      if (!fileItem) throw new Error('Broken upload');
+
+      if (fileItem.file.type.startsWith('image')) {
+        return getImageMsgContent(ct, fileItem, upload.mxc);
+      }
+      if (fileItem.file.type.startsWith('video')) {
+        return getVideoMsgContent(ct, fileItem, upload.mxc);
+      }
+      if (fileItem.file.type.startsWith('audio')) {
+        return getAudioMsgContent(fileItem, upload.mxc);
+      }
+      return getFileMsgContent(fileItem, upload.mxc);
+    });
+    dropUploads(uploads);
+    const contents = fulfilledPromiseSettledResult(await Promise.allSettled(contentsPromises));
+
+    contents.forEach((c) => {
+      const content = { ...c };
+      if (threadId) {
+        content['m.relates_to'] = {
+          event_id: threadId,
+          rel_type: RelationType.Thread,
+          'm.in_reply_to': { event_id: threadId },
+          is_falling_back: true,
+        };
+      }
+
+      const localMessage = new LocalMessage(roomId, MessageEvent.RoomMessage, content);
+      sendLocalMessage(localMessage);
+    });
+  };
+
+  return sendUpload;
+};
diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
new file mode 100644
index 00000000..2c95205a
--- /dev/null
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -0,0 +1,284 @@
+import {
+  createContext,
+  MouseEventHandler,
+  RefObject,
+  useCallback,
+  useContext,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useAtom } from 'jotai';
+import { Editor } from 'slate';
+import { ReactEditor } from 'slate-react';
+import { scrollToBottom } from '../../../utils/dom';
+import { MessageBatch } from '../../../../client/room/messages';
+import { getResizeObserverEntry, useResizeObserver } from '../../../hooks/useResizeObserver';
+import {
+  getIntersectionObserverEntry,
+  useIntersectionObserver,
+} from '../../../hooks/useIntersectionObserver';
+import { useDebounce } from '../../../hooks/useDebounce';
+import { TimelineView } from '../../../../client/room';
+import {
+  composerToReplyDraftAtom,
+  getComposerId,
+  ReplyDraft,
+} from '../../../state/room/roomInputDrafts';
+import { useRoom } from '../../../hooks/useRoom';
+import { useOpenUserRoomProfile } from '../../../state/hooks/userRoomProfile';
+import { useSpaceOptionally } from '../../../hooks/useSpace';
+import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
+import { useClient } from '../../../hooks/useClient';
+import { createMentionElement, moveCursor } from '../../../components/editor';
+
+const TimelineViewContext = createContext<TimelineView | null>(null);
+export const TimelineViewProvider = TimelineViewContext.Provider;
+
+export const useTimelineView = (): TimelineView => {
+  const timelineView = useContext(TimelineViewContext);
+  if (!timelineView) {
+    throw new Error('TimelineView is not provided!');
+  }
+
+  return timelineView;
+};
+
+export const useTimelinePrefetch = (timeline: TimelineView, limit: number) => {
+  useEffect(
+    () =>
+      timeline.range.info.subscribe((info) => {
+        if (info.start <= limit) {
+          requestAnimationFrame(() => timeline.paginateBackward(limit));
+        }
+        if (info.end >= Math.max(timeline.batch.read.size - limit, 0)) {
+          requestAnimationFrame(() => timeline.paginateForward(limit));
+        }
+      }),
+    [timeline, limit]
+  );
+};
+
+export const useTimelinePaginate = (timeline: TimelineView, limit: number) =>
+  useCallback(
+    (back: boolean) => {
+      if (back) {
+        timeline.paginateBackward(limit);
+        return;
+      }
+      timeline.paginateForward(limit);
+    },
+    [timeline, limit]
+  );
+
+export const useTimelineScrollRestore = (
+  timeline: TimelineView,
+  scrollRef: RefObject<HTMLDivElement>
+) => {
+  useLayoutEffect(() => {
+    const scrollEl = scrollRef.current;
+    if (scrollEl) {
+      const scrollTop = timeline.range.scrollTopCache;
+      if (scrollTop) {
+        scrollEl.scrollTo({ top: scrollTop, behavior: 'instant' });
+      } else {
+        scrollToBottom(scrollEl);
+      }
+    }
+    return () => {
+      if (!scrollEl) return;
+      // eslint-disable-next-line no-param-reassign
+      timeline.range.scrollTopCache = scrollEl.scrollTop;
+    };
+  }, [timeline, scrollRef]);
+};
+
+/**
+ * When room loads and timeline does not hav any message
+ * scrolls to bottom after message appears.
+ */
+export const useRestoreScrollToBottom = (
+  scrollRef: RefObject<HTMLDivElement>,
+  msgBatch: MessageBatch
+) => {
+  const prevSize = useRef<number>();
+
+  useEffect(() => {
+    const pSize = prevSize.current;
+    prevSize.current = msgBatch.size;
+
+    const scrollElement = scrollRef.current;
+    if (pSize === 0 && msgBatch.next.end && scrollElement) {
+      requestAnimationFrame(() => {
+        scrollToBottom(scrollElement, 'instant');
+      });
+    }
+  }, [msgBatch, scrollRef]);
+};
+
+export const useEditorResizeStickBottom = (
+  getScrollElement: () => HTMLElement | null,
+  getEditorElement: () => HTMLElement | null,
+  atBottom: boolean
+) => {
+  const atBottomRef = useRef(atBottom);
+  atBottomRef.current = atBottom;
+
+  useResizeObserver(
+    useMemo(() => {
+      let mounted = false;
+      return (entries) => {
+        if (!mounted) {
+          // skip initial mounting call
+          mounted = true;
+          return;
+        }
+        const editorEl = getEditorElement();
+        if (!editorEl) return;
+        const editorBaseEntry = getResizeObserverEntry(editorEl, entries);
+        const scrollElement = getScrollElement();
+        if (!editorBaseEntry || !scrollElement) return;
+
+        if (atBottomRef.current) {
+          scrollToBottom(scrollElement);
+        }
+      };
+    }, [getScrollElement, getEditorElement, atBottomRef]),
+    getEditorElement
+  );
+};
+
+export const useAtBottomToggle = (
+  getScrollElement: () => HTMLElement | null,
+  atLiveEnd: boolean,
+  onBottom?: (bottom: boolean) => void
+): [boolean, RefObject<HTMLElement>] => {
+  const atBottomAnchorRef = useRef<HTMLElement>(null);
+  const [atBottom, setAtBottom] = useState<boolean>(true);
+
+  const debounceSetAtBottom = useDebounce(
+    useCallback(
+      (entry: IntersectionObserverEntry) => {
+        if (!entry.isIntersecting) {
+          setAtBottom(false);
+          onBottom?.(false);
+        }
+      },
+      [onBottom]
+    ),
+    { wait: 1000 }
+  );
+  useIntersectionObserver(
+    useCallback(
+      (entries) => {
+        const target = atBottomAnchorRef.current;
+        if (!target) return;
+        const targetEntry = getIntersectionObserverEntry(target, entries);
+        if (targetEntry) debounceSetAtBottom(targetEntry);
+        if (targetEntry?.isIntersecting && atLiveEnd) {
+          setAtBottom(true);
+          onBottom?.(true);
+        }
+      },
+      [debounceSetAtBottom, atLiveEnd, onBottom]
+    ),
+    useCallback(
+      () => ({
+        root: getScrollElement(),
+        rootMargin: '100px',
+      }),
+      [getScrollElement]
+    ),
+    useCallback(() => atBottomAnchorRef.current, [])
+  );
+
+  return [atBottom, atBottomAnchorRef];
+};
+
+export const useReplyClickHandler = (
+  timeline: TimelineView,
+  editor: Editor,
+  threadId?: string
+): [ReplyDraft | undefined, MouseEventHandler<HTMLButtonElement>] => {
+  const roomId = useRoom();
+  const [replyDraft, setReplyDraft] = useAtom(
+    composerToReplyDraftAtom(getComposerId(roomId, threadId))
+  );
+
+  const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    (evt) => {
+      const replyId = evt.currentTarget.getAttribute('data-event-id');
+      if (!replyId) {
+        console.warn('Button should have "data-event-id" attribute!');
+        return;
+      }
+      const senderId = timeline.batch.read.messages.get(replyId)?.sender;
+      if (!senderId) return;
+
+      if (senderId) {
+        setReplyDraft({
+          userId: senderId,
+          eventId: replyId,
+        });
+        setTimeout(() => ReactEditor.focus(editor), 100);
+      }
+    },
+    [setReplyDraft, editor, timeline]
+  );
+
+  return [replyDraft, handleReplyClick];
+};
+
+export const useUserClickHandler = () => {
+  const roomId = useRoom();
+  const spaceId = useSpaceOptionally();
+
+  const openUserRoomProfile = useOpenUserRoomProfile();
+
+  const handleUserClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    (evt) => {
+      evt.preventDefault();
+      evt.stopPropagation();
+      const userId = evt.currentTarget.getAttribute('data-user-id');
+      if (!userId) {
+        console.warn('Button should have "data-user-id" attribute!');
+        return;
+      }
+      openUserRoomProfile(roomId, spaceId, userId, evt.currentTarget.getBoundingClientRect());
+    },
+    [roomId, spaceId, openUserRoomProfile]
+  );
+
+  return handleUserClick;
+};
+
+export const useUsernameClickHandler = (editor: Editor) => {
+  const ct = useClient();
+  const membersAPI = useRoomMembersAPI();
+
+  const handleUsernameClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    (evt) => {
+      evt.preventDefault();
+      const userId = evt.currentTarget.getAttribute('data-user-id');
+      if (!userId) {
+        console.warn('Button should have "data-user-id" attribute!');
+        return;
+      }
+      const name = membersAPI.getName(userId);
+      editor.insertNode(
+        createMentionElement(
+          userId,
+          name.startsWith('@') ? name : `@${name}`,
+          userId === ct.session.userId
+        )
+      );
+      ReactEditor.focus(editor);
+      moveCursor(editor);
+    },
+    [ct, membersAPI, editor]
+  );
+
+  return handleUsernameClick;
+};
diff --git a/src/app/features/room/hooks/useUploadItemPicker.ts b/src/app/features/room/hooks/useUploadItemPicker.ts
new file mode 100644
index 00000000..b40f3fa2
--- /dev/null
+++ b/src/app/features/room/hooks/useUploadItemPicker.ts
@@ -0,0 +1,62 @@
+import { RefObject, useCallback } from 'react';
+import { useFileDropZone } from '../../../hooks/useFileDrop';
+import { useFilePasteHandler } from '../../../hooks/useFilePasteHandler';
+import { useFilePicker } from '../../../hooks/useFilePicker';
+import { safeFile } from '../../../utils/mimeTypes';
+import { UploadItem } from '../../../state/room/roomInputDrafts';
+import { useRoom } from '../../../hooks/useRoom';
+import { fulfilledPromiseSettledResult } from '../../../utils/common';
+import { encryptFile } from '../../../utils/matrix';
+import { useClient } from '../../../hooks/useClient';
+
+export const useUploadItemPicker = (
+  dropAreaRef: RefObject<HTMLElement>,
+  onPick: (uploadItems: UploadItem[]) => void
+) => {
+  const ct = useClient();
+  const roomId = useRoom();
+
+  const handleFiles = useCallback(
+    async (files: File[]) => {
+      const safeFiles = files.map(safeFile);
+      const uploadItems: UploadItem[] = [];
+
+      if (ct.encryptedRooms.read.has(roomId)) {
+        const encryptFiles = fulfilledPromiseSettledResult(
+          await Promise.allSettled(safeFiles.map((f) => encryptFile(f)))
+        );
+        encryptFiles.forEach((ef) =>
+          uploadItems.push({
+            ...ef,
+            metadata: {
+              markedAsSpoiler: false,
+            },
+          })
+        );
+      } else {
+        safeFiles.forEach((f) =>
+          uploadItems.push({
+            file: f,
+            originalFile: f,
+            encInfo: undefined,
+            metadata: {
+              markedAsSpoiler: false,
+            },
+          })
+        );
+      }
+      onPick(uploadItems);
+    },
+    [roomId, ct, onPick]
+  );
+
+  const pickFile = useFilePicker(handleFiles, true);
+  const handlePaste = useFilePasteHandler(handleFiles);
+  const dropZoneVisible = useFileDropZone(dropAreaRef, handleFiles);
+
+  return {
+    pickFile,
+    handlePaste,
+    dropZoneVisible,
+  };
+};
diff --git a/src/app/features/room/hooks/useUploadItems.ts b/src/app/features/room/hooks/useUploadItems.ts
new file mode 100644
index 00000000..4c9400cd
--- /dev/null
+++ b/src/app/features/room/hooks/useUploadItems.ts
@@ -0,0 +1,69 @@
+import { useAtom } from 'jotai';
+import { useCallback } from 'react';
+import {
+  composerToUploadItemsAtom,
+  getComposerId,
+  roomUploadContentToUploadAtom,
+  UploadItem,
+  UploadMetadata,
+} from '../../../state/room/roomInputDrafts';
+import { useRoom } from '../../../hooks/useRoom';
+import { UploadContent } from '../../../utils/matrix';
+import { Upload, UploadStatus } from '../../../state/upload';
+
+export const useUploadItems = (threadId?: string) => {
+  const roomId = useRoom();
+  const [uploadItems, setUploadItems] = useAtom(
+    composerToUploadItemsAtom(getComposerId(roomId, threadId))
+  );
+
+  const updateUploadMetadata = useCallback(
+    (item: UploadItem, metadata: UploadMetadata) => {
+      setUploadItems({
+        type: 'REPLACE',
+        item,
+        replacement: { ...item, metadata },
+      });
+    },
+    [setUploadItems]
+  );
+
+  const removeUploadItem = useCallback(
+    (fileOrFiles: UploadContent | UploadContent[]) => {
+      const files = Array.isArray(fileOrFiles) ? fileOrFiles : [fileOrFiles];
+      setUploadItems({
+        type: 'DELETE',
+        item: uploadItems.filter((i) => files.find((f) => f === i.file)),
+      });
+      files.forEach((f) => roomUploadContentToUploadAtom.remove(f));
+    },
+    [uploadItems, setUploadItems]
+  );
+
+  const addUploadItems = useCallback(
+    (items: UploadItem[]) => {
+      setUploadItems({
+        type: 'PUT',
+        item: items,
+      });
+    },
+    [setUploadItems]
+  );
+
+  const dropUploads = (uploads: Upload[]) => {
+    uploads.forEach((upload) => {
+      if (upload.status === UploadStatus.Loading) {
+        upload.abortController.abort();
+      }
+    });
+    removeUploadItem(uploads.map((upload) => upload.file));
+  };
+
+  return {
+    uploadItems,
+    addUploadItems,
+    removeUploadItem,
+    updateUploadMetadata,
+    dropUploads,
+  };
+};
diff --git a/src/app/features/room/hooks/useUploadsAtom.ts b/src/app/features/room/hooks/useUploadsAtom.ts
new file mode 100644
index 00000000..4f0d02a1
--- /dev/null
+++ b/src/app/features/room/hooks/useUploadsAtom.ts
@@ -0,0 +1,16 @@
+import { useMemo } from 'react';
+import { roomUploadContentToUploadAtom, UploadItem } from '../../../state/room/roomInputDrafts';
+import { createUploadsAtom } from '../../../state/upload';
+
+export const useUploadsAtom = (uploadItems: UploadItem[]) => {
+  const uploadsAtom = useMemo(
+    () =>
+      createUploadsAtom(
+        roomUploadContentToUploadAtom,
+        uploadItems.map((f) => f.file)
+      ),
+    [uploadItems]
+  );
+
+  return uploadsAtom;
+};
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 9324e1c2..0eaa5445 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -2,6 +2,7 @@ import {
   Avatar,
   Box,
   Button,
+  Chip,
   Dialog,
   Header,
   Icon,
@@ -32,14 +33,19 @@ import React, {
 } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { useHover, useFocusWithin } from 'react-aria';
-import { MatrixEvent, Room } from 'matrix-js-sdk';
-import { Relations } from 'matrix-js-sdk/lib/models/relations';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import {
+  postReportEventId,
+  putRedact,
+  putStateEvent,
+} from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import classNames from 'classnames';
-import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
 import {
   AvatarBase,
   BubbleLayout,
   CompactLayout,
+  EventContent,
   MessageBase,
   ModernLayout,
   Time,
@@ -48,18 +54,12 @@ import {
 } from '../../../components/message';
 import {
   canEditEvent,
-  getEventEdits,
-  getMemberAvatarMxc,
-  getMemberDisplayName,
+  fallbackReply,
+  getReactionGroups,
+  getReplyId,
+  getThreadId,
 } from '../../../utils/room';
-import {
-  getCanonicalAliasOrRoomId,
-  getMxIdLocalPart,
-  isRoomAlias,
-  mxcUrlToHttp,
-} from '../../../utils/matrix';
 import { MessageLayout, MessageSpacing } from '../../../state/settings';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
 import * as css from './styles.css';
 import { EventReaders } from '../../../components/event-readers';
@@ -75,10 +75,17 @@ import { getMatrixToRoomEvent } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
-import { MemberPowerTag, StateEvent } from '../../../../types/matrix/room';
+import { MemberPowerTag, StateEventType } from '../../../../types/matrix/room';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
+import { useClient } from '../../../hooks/useClient';
+import { useRoom } from '../../../hooks/useRoom';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { ReactionContent } from '../../../../types/matrix/common';
+import { RoomMembersAPI } from '../../../hooks/useRoomMembers';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 
 export type ReactionHandler = (keyOrMxc: string, shortcode: string) => void;
 
@@ -87,10 +94,10 @@ type MessageQuickReactionsProps = {
 };
 export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
   ({ onReaction, ...props }, ref) => {
-    const mx = useMatrixClient();
-    const recentEmojis = useRecentEmoji(mx, 4);
+    const recentEmojisResult = useRecentEmoji(4);
+    const recentEmojis = recentEmojisResult.value;
 
-    if (recentEmojis.length === 0) return <span />;
+    if (recentEmojis && recentEmojis.length === 0) return <span />;
     return (
       <>
         <Box
@@ -101,7 +108,7 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
           {...props}
           ref={ref}
         >
-          {recentEmojis.map((emoji) => (
+          {recentEmojis?.map((emoji) => (
             <IconButton
               key={emoji.unicode}
               className={css.MessageQuickReaction}
@@ -125,11 +132,10 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
 export const MessageAllReactionItem = as<
   'button',
   {
-    room: Room;
-    relations: Relations;
+    reactionEvents: MessageEventWithoutRoomId<ReactionContent>[];
     onClose?: () => void;
   }
->(({ room, relations, onClose, ...props }, ref) => {
+>(({ reactionEvents, onClose, ...props }, ref) => {
   const [open, setOpen] = useState(false);
 
   const handleClose = () => {
@@ -158,8 +164,7 @@ export const MessageAllReactionItem = as<
           >
             <Modal variant="Surface" size="300">
               <ReactionViewer
-                room={room}
-                relations={relations}
+                reactions={getReactionGroups(reactionEvents)}
                 requestClose={() => setOpen(false)}
               />
             </Modal>
@@ -186,11 +191,10 @@ export const MessageAllReactionItem = as<
 export const MessageReadReceiptItem = as<
   'button',
   {
-    room: Room;
     eventId: string;
     onClose?: () => void;
   }
->(({ room, eventId, onClose, ...props }, ref) => {
+>(({ eventId, onClose, ...props }, ref) => {
   const [open, setOpen] = useState(false);
 
   const handleClose = () => {
@@ -211,7 +215,7 @@ export const MessageReadReceiptItem = as<
             }}
           >
             <Modal variant="Surface" size="300">
-              <EventReaders room={room} eventId={eventId} requestClose={handleClose} />
+              <EventReaders eventId={eventId} requestClose={handleClose} />
             </Modal>
           </FocusTrap>
         </OverlayCenter>
@@ -236,36 +240,26 @@ export const MessageReadReceiptItem = as<
 export const MessageSourceCodeItem = as<
   'button',
   {
-    room: Room;
-    mEvent: MatrixEvent;
+    event: MessageEventWithoutRoomId;
     onClose?: () => void;
   }
->(({ room, mEvent, onClose, ...props }, ref) => {
+>(({ event, onClose, ...props }, ref) => {
+  const ct = useClient();
+  const roomId = useRoom();
   const [open, setOpen] = useState(false);
 
-  const getContent = (evt: MatrixEvent) =>
-    evt.isEncrypted()
-      ? {
-          [`<== DECRYPTED_EVENT ==>`]: evt.getEffectiveEvent(),
-          [`<== ORIGINAL_EVENT ==>`]: evt.event,
-        }
-      : evt.event;
-
   const getText = (): string => {
-    const evtId = mEvent.getId()!;
-    const evtTimeline = room.getTimelineForEvent(evtId);
-    const edits =
-      evtTimeline &&
-      getEventEdits(evtTimeline.getTimelineSet(), evtId, mEvent.getType())?.getRelations();
+    const timeline = ct.roomToTimeline.read.get(roomId);
+    const editEvents = timeline?.relations.edits.eventToRelations.read.get(event.event_id);
 
-    if (!edits) return JSON.stringify(getContent(mEvent), null, 2);
+    if (!editEvents) return JSON.stringify(event, null, 2);
 
     const content: Record<string, unknown> = {
-      '<== MAIN_EVENT ==>': getContent(mEvent),
+      '<== MAIN_EVENT ==>': event,
     };
 
-    edits.forEach((editEvt, index) => {
-      content[`<== REPLACEMENT_EVENT_${index + 1} ==>`] = getContent(editEvt);
+    editEvents?.forEach((evt, index) => {
+      content[`<== REPLACEMENT_EVENT_${index + 1} ==>`] = evt;
     });
 
     return JSON.stringify(content, null, 2);
@@ -319,19 +313,20 @@ export const MessageSourceCodeItem = as<
 export const MessageCopyLinkItem = as<
   'button',
   {
-    room: Room;
-    mEvent: MatrixEvent;
+    eventId: string;
     onClose?: () => void;
   }
->(({ room, mEvent, onClose, ...props }, ref) => {
-  const mx = useMatrixClient();
+>(({ eventId, onClose, ...props }, ref) => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const creators = useRoomCreators(roomId);
+  const powerLevels = usePowerLevelsContext();
 
   const handleCopy = () => {
-    const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-    const eventId = mEvent.getId();
-    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
+    const alias = ct.roomToAlias.read.get(roomId);
+    const viaServers = alias ? undefined : getViaServers(creators, powerLevels);
     if (!eventId) return;
-    copyToClipboard(getMatrixToRoomEvent(roomIdOrAlias, eventId, viaServers));
+    copyToClipboard(getMatrixToRoomEvent(alias ?? roomId, eventId, viaServers));
     onClose?.();
   };
 
@@ -354,24 +349,28 @@ export const MessageCopyLinkItem = as<
 export const MessagePinItem = as<
   'button',
   {
-    room: Room;
-    mEvent: MatrixEvent;
+    eventId: string;
     onClose?: () => void;
   }
->(({ room, mEvent, onClose, ...props }, ref) => {
-  const mx = useMatrixClient();
-  const pinnedEvents = useRoomPinnedEvents(room);
-  const isPinned = pinnedEvents.includes(mEvent.getId() ?? '');
+>(({ eventId, onClose, ...props }, ref) => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const pinnedEvents = useRoomPinnedEvents(roomId);
+  const isPinned = pinnedEvents.includes(eventId);
 
   const handlePin = () => {
-    const eventId = mEvent.getId();
-    const pinContent: RoomPinnedEventsEventContent = {
+    const pinContent = {
       pinned: Array.from(pinnedEvents).filter((id) => id !== eventId),
     };
     if (!isPinned && eventId) {
       pinContent.pinned.push(eventId);
     }
-    mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents as any, pinContent);
+    ct.requestAuthJSON(
+      putStateEvent({
+        pathParams: { roomId, eventType: StateEventType.RoomPinnedEvents, stateKey: '' },
+        body: pinContent,
+      })
+    );
     onClose?.();
   };
 
@@ -394,25 +393,37 @@ export const MessagePinItem = as<
 export const MessageDeleteItem = as<
   'button',
   {
-    room: Room;
-    mEvent: MatrixEvent;
+    eventId: string;
     onClose?: () => void;
   }
->(({ room, mEvent, onClose, ...props }, ref) => {
-  const mx = useMatrixClient();
+>(({ eventId, onClose, ...props }, ref) => {
+  const ct = useClient();
+  const roomId = useRoom();
   const [open, setOpen] = useState(false);
 
   const [deleteState, deleteMessage] = useAsyncCallback(
     useCallback(
-      (eventId: string, reason?: string) =>
-        mx.redactEvent(room.roomId, eventId, undefined, reason ? { reason } : undefined),
-      [mx, room]
+      async (reason?: string) => {
+        const resp = await ct.requestAuthJSON(
+          putRedact({
+            pathParams: { roomId, eventId, txnId: ct.getTxnId() },
+            body: {
+              reason,
+            },
+          })
+        );
+
+        const [err] = await parseMatrixResp(resp);
+        if (err) {
+          throw new Error(printMatrixError(err));
+        }
+      },
+      [ct, roomId, eventId]
     )
   );
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
     evt.preventDefault();
-    const eventId = mEvent.getId();
     if (
       !eventId ||
       deleteState.status === AsyncStatus.Loading ||
@@ -422,7 +433,7 @@ export const MessageDeleteItem = as<
     const target = evt.target as HTMLFormElement | undefined;
     const reasonInput = target?.reasonInput as HTMLInputElement | undefined;
     const reason = reasonInput && reasonInput.value.trim();
-    deleteMessage(eventId, reason);
+    deleteMessage(reason);
   };
 
   const handleClose = () => {
@@ -523,25 +534,37 @@ export const MessageDeleteItem = as<
 export const MessageReportItem = as<
   'button',
   {
-    room: Room;
-    mEvent: MatrixEvent;
+    eventId: string;
     onClose?: () => void;
   }
->(({ room, mEvent, onClose, ...props }, ref) => {
-  const mx = useMatrixClient();
+>(({ eventId, onClose, ...props }, ref) => {
+  const ct = useClient();
+  const roomId = useRoom();
   const [open, setOpen] = useState(false);
 
   const [reportState, reportMessage] = useAsyncCallback(
     useCallback(
-      (eventId: string, score: number, reason: string) =>
-        mx.reportEvent(room.roomId, eventId, score, reason),
-      [mx, room]
+      async (score: number, reason: string) => {
+        const resp = await ct.requestAuthJSON(
+          postReportEventId({
+            pathParams: { roomId, eventId },
+            body: {
+              reason,
+              score,
+            },
+          })
+        );
+        const [err] = await parseMatrixResp(resp);
+        if (err) {
+          throw new Error(printMatrixError(err));
+        }
+      },
+      [ct, roomId, eventId]
     )
   );
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
     evt.preventDefault();
-    const eventId = mEvent.getId();
     if (
       !eventId ||
       reportState.status === AsyncStatus.Loading ||
@@ -552,7 +575,7 @@ export const MessageReportItem = as<
     const reasonInput = target?.reasonInput as HTMLInputElement | undefined;
     const reason = reasonInput && reasonInput.value.trim();
     if (reasonInput) reasonInput.value = '';
-    reportMessage(eventId, reason ? -100 : -50, reason || 'No reason provided');
+    reportMessage(reason ? -100 : -50, reason || 'No reason provided');
   };
 
   const handleClose = () => {
@@ -654,19 +677,169 @@ export const MessageReportItem = as<
   );
 });
 
+export function MessageAvatar({
+  userId,
+  displayName,
+  avatarUrl,
+  onUserClick,
+  bubbleLayout,
+}: {
+  userId: string;
+  displayName: string;
+  avatarUrl?: string;
+  onUserClick?: MouseEventHandler<HTMLButtonElement>;
+  bubbleLayout?: boolean;
+}) {
+  const ct = useClient();
+  const useAuthentication = useMediaAuthentication();
+
+  return (
+    <AvatarBase className={bubbleLayout ? css.BubbleAvatarBase : undefined}>
+      <Avatar
+        className={css.MessageAvatar}
+        as="button"
+        size="300"
+        data-user-id={userId}
+        onClick={onUserClick}
+      >
+        <UserAvatar
+          userId={userId}
+          src={
+            avatarUrl
+              ? mxcToHttp(ct.session.baseUrl, avatarUrl, useAuthentication).thumbnail({
+                  width: 48,
+                  height: 48,
+                  method: 'crop',
+                })
+              : undefined
+          }
+          alt={displayName}
+          renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+        />
+      </Avatar>
+    </AvatarBase>
+  );
+}
+
+export function MessageUsername({
+  userId,
+  displayName,
+  onUserClick,
+  onUsernameClick,
+  messageLayout,
+  memberPowerTag,
+  accessibleTagColors,
+  legacyUsernameColor,
+}: {
+  userId: string;
+  displayName: string;
+  onUserClick?: MouseEventHandler<HTMLButtonElement>;
+  onUsernameClick?: MouseEventHandler<HTMLButtonElement>;
+  messageLayout: MessageLayout;
+  memberPowerTag?: MemberPowerTag;
+  accessibleTagColors?: Map<string, string>;
+  legacyUsernameColor?: boolean;
+}) {
+  const ct = useClient();
+  const useAuthentication = useMediaAuthentication();
+
+  const tagColor = memberPowerTag?.color
+    ? accessibleTagColors?.get(memberPowerTag.color)
+    : undefined;
+
+  const tagIconSrc = memberPowerTag?.icon
+    ? getPowerTagIconSrc(ct, useAuthentication, memberPowerTag.icon)
+    : undefined;
+
+  const usernameColor = legacyUsernameColor ? colorMXID(userId) : tagColor;
+
+  return (
+    <Box alignItems="Center" gap="200">
+      <Username
+        as="button"
+        style={{ color: usernameColor }}
+        data-user-id={userId}
+        onContextMenu={onUserClick}
+        onClick={onUsernameClick}
+      >
+        <Text as="span" size={messageLayout === MessageLayout.Bubble ? 'T300' : 'T400'} truncate>
+          <UsernameBold>{displayName}</UsernameBold>
+        </Text>
+      </Username>
+      {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+    </Box>
+  );
+}
+
+type MessageLayoutProps = {
+  avatar?: ReactNode;
+  username?: ReactNode;
+  time?: ReactNode;
+  collapse: boolean;
+  messageLayout: MessageLayout;
+  onContextMenu?: MouseEventHandler<HTMLDivElement>;
+  children: ReactNode;
+};
+export function RenderMessageLayout({
+  collapse,
+  messageLayout,
+  avatar,
+  username,
+  time,
+  onContextMenu,
+  children,
+}: MessageLayoutProps) {
+  const headerJSX = !collapse && (
+    <Box
+      gap="300"
+      direction={messageLayout === MessageLayout.Compact ? 'RowReverse' : 'Row'}
+      justifyContent="SpaceBetween"
+      alignItems="Baseline"
+      grow="Yes"
+    >
+      {username}
+      <Box shrink="No" gap="100">
+        {time}
+      </Box>
+    </Box>
+  );
+
+  return (
+    <>
+      {messageLayout === MessageLayout.Compact && (
+        <CompactLayout before={headerJSX} onContextMenu={onContextMenu}>
+          {children}
+        </CompactLayout>
+      )}
+      {messageLayout === MessageLayout.Bubble && (
+        <BubbleLayout before={avatar} header={headerJSX} onContextMenu={onContextMenu}>
+          {children}
+        </BubbleLayout>
+      )}
+      {messageLayout !== MessageLayout.Compact && messageLayout !== MessageLayout.Bubble && (
+        <ModernLayout before={avatar} onContextMenu={onContextMenu}>
+          {headerJSX}
+          {children}
+        </ModernLayout>
+      )}
+    </>
+  );
+}
+
 export type MessageProps = {
-  room: Room;
-  mEvent: MatrixEvent;
+  event: MessageEventWithoutRoomId;
   collapse: boolean;
   highlight: boolean;
+  selected?: boolean;
   edit?: boolean;
   canDelete?: boolean;
   canSendReaction?: boolean;
   canPinEvent?: boolean;
-  imagePackRooms?: Room[];
-  relations?: Relations;
+  imagePackRooms?: string[];
+  reactionEvents?: MessageEventWithoutRoomId<ReactionContent>[];
   messageLayout: MessageLayout;
   messageSpacing: MessageSpacing;
+  membersAPI: RoomMembersAPI;
   onUserClick: MouseEventHandler<HTMLButtonElement>;
   onUsernameClick: MouseEventHandler<HTMLButtonElement>;
   onReplyClick: (
@@ -676,7 +849,7 @@ export type MessageProps = {
   onEditId?: (eventId?: string) => void;
   onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
   reply?: ReactNode;
-  reactions?: ReactNode;
+  redacted?: boolean;
   hideReadReceipts?: boolean;
   showDeveloperTools?: boolean;
   memberPowerTag?: MemberPowerTag;
@@ -689,25 +862,26 @@ export const Message = as<'div', MessageProps>(
   (
     {
       className,
-      room,
-      mEvent,
+      event,
       collapse,
       highlight,
+      selected,
       edit,
       canDelete,
       canSendReaction,
       canPinEvent,
       imagePackRooms,
-      relations,
+      reactionEvents,
       messageLayout,
       messageSpacing,
+      membersAPI,
       onUserClick,
       onUsernameClick,
       onReplyClick,
       onReactionToggle,
       onEditId,
       reply,
-      reactions,
+      redacted,
       hideReadReceipts,
       showDeveloperTools,
       memberPowerTag,
@@ -720,9 +894,9 @@ export const Message = as<'div', MessageProps>(
     },
     ref
   ) => {
-    const mx = useMatrixClient();
-    const useAuthentication = useMediaAuthentication();
-    const senderId = mEvent.getSender() ?? '';
+    const ct = useClient();
+    const roomId = useRoom();
+    const senderId = event.sender;
 
     const [hover, setHover] = useState(false);
     const { hoverProps } = useHover({ onHoverChange: setHover });
@@ -730,110 +904,25 @@ export const Message = as<'div', MessageProps>(
     const [menuAnchor, setMenuAnchor] = useState<RectCords>();
     const [emojiBoardAnchor, setEmojiBoardAnchor] = useState<RectCords>();
 
-    const senderDisplayName =
-      getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId;
-    const senderAvatarMxc = getMemberAvatarMxc(room, senderId);
-
-    const tagColor = memberPowerTag?.color
-      ? accessibleTagColors?.get(memberPowerTag.color)
-      : undefined;
-    const tagIconSrc = memberPowerTag?.icon
-      ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
-      : undefined;
-
-    const usernameColor = legacyUsernameColor ? colorMXID(senderId) : tagColor;
-
-    const headerJSX = !collapse && (
-      <Box
-        gap="300"
-        direction={messageLayout === MessageLayout.Compact ? 'RowReverse' : 'Row'}
-        justifyContent="SpaceBetween"
-        alignItems="Baseline"
-        grow="Yes"
-      >
-        <Box alignItems="Center" gap="200">
-          <Username
-            as="button"
-            style={{ color: usernameColor }}
-            data-user-id={senderId}
-            onContextMenu={onUserClick}
-            onClick={onUsernameClick}
-          >
-            <Text
-              as="span"
-              size={messageLayout === MessageLayout.Bubble ? 'T300' : 'T400'}
-              truncate
-            >
-              <UsernameBold>{senderDisplayName}</UsernameBold>
-            </Text>
-          </Username>
-          {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
-        </Box>
-        <Box shrink="No" gap="100">
-          {messageLayout === MessageLayout.Modern && hover && (
-            <>
-              <Text as="span" size="T200" priority="300">
-                {senderId}
-              </Text>
-              <Text as="span" size="T200" priority="300">
-                |
-              </Text>
-            </>
-          )}
-          <Time
-            ts={mEvent.getTs()}
-            compact={messageLayout === MessageLayout.Compact}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          />
-        </Box>
-      </Box>
-    );
-
-    const avatarJSX = !collapse && messageLayout !== MessageLayout.Compact && (
-      <AvatarBase
-        className={messageLayout === MessageLayout.Bubble ? css.BubbleAvatarBase : undefined}
-      >
-        <Avatar
-          className={css.MessageAvatar}
-          as="button"
-          size="300"
-          data-user-id={senderId}
-          onClick={onUserClick}
-        >
-          <UserAvatar
-            userId={senderId}
-            src={
-              senderAvatarMxc
-                ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ?? undefined
-                : undefined
-            }
-            alt={senderDisplayName}
-            renderFallback={() => <Icon size="200" src={Icons.User} filled />}
-          />
-        </Avatar>
-      </AvatarBase>
-    );
+    const senderDisplayName = membersAPI.getName(senderId);
+    const senderAvatarMxc = membersAPI.getAvatar(senderId);
 
     const msgContentJSX = (
       <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }}>
-        {reply}
         {edit && onEditId ? (
           <MessageEditor
             style={{
               maxWidth: '100%',
               width: '100vw',
             }}
-            roomId={room.roomId}
-            room={room}
-            mEvent={mEvent}
+            roomId={roomId}
+            event={event}
             imagePackRooms={imagePackRooms}
             onCancel={() => onEditId()}
           />
         ) : (
           children
         )}
-        {reactions}
       </Box>
     );
 
@@ -874,8 +963,6 @@ export const Message = as<'div', MessageProps>(
       }, 100);
     };
 
-    const isThreadedMessage = mEvent.threadRootId !== undefined;
-
     return (
       <MessageBase
         className={classNames(css.MessageBase, className, {
@@ -883,9 +970,9 @@ export const Message = as<'div', MessageProps>(
         })}
         tabIndex={0}
         space={messageSpacing}
-        collapse={collapse}
+        collapse={collapse || (!!getReplyId(event.content) && !fallbackReply(event.content))}
         highlight={highlight}
-        selected={!!menuAnchor || !!emojiBoardAnchor}
+        selected={!!selected || !!menuAnchor || !!emojiBoardAnchor}
         {...props}
         {...hoverProps}
         {...focusWithinProps}
@@ -907,11 +994,11 @@ export const Message = as<'div', MessageProps>(
                         returnFocusOnDeactivate={false}
                         allowTextCustomEmoji
                         onEmojiSelect={(key) => {
-                          onReactionToggle(mEvent.getId()!, key);
+                          onReactionToggle(event.event_id, key);
                           setEmojiBoardAnchor(undefined);
                         }}
                         onCustomEmojiSelect={(mxc, shortcode) => {
-                          onReactionToggle(mEvent.getId()!, mxc, shortcode);
+                          onReactionToggle(event.event_id, mxc, shortcode);
                           setEmojiBoardAnchor(undefined);
                         }}
                         requestClose={() => {
@@ -933,17 +1020,17 @@ export const Message = as<'div', MessageProps>(
                 )}
                 <IconButton
                   onClick={onReplyClick}
-                  data-event-id={mEvent.getId()}
+                  data-event-id={event.event_id}
                   variant="SurfaceVariant"
                   size="300"
                   radii="300"
                 >
-                  <Icon src={Icons.ReplyArrow} size="100" />
+                  <Icon src={Icons.BlockQuote} size="100" />
                 </IconButton>
-                {!isThreadedMessage && (
+                {!getThreadId(event) && (
                   <IconButton
                     onClick={(ev) => onReplyClick(ev, true)}
-                    data-event-id={mEvent.getId()}
+                    data-event-id={event.event_id}
                     variant="SurfaceVariant"
                     size="300"
                     radii="300"
@@ -951,9 +1038,9 @@ export const Message = as<'div', MessageProps>(
                     <Icon src={Icons.ThreadPlus} size="100" />
                   </IconButton>
                 )}
-                {canEditEvent(mx, mEvent) && onEditId && (
+                {canEditEvent(ct, event) && onEditId && (
                   <IconButton
-                    onClick={() => onEditId(mEvent.getId())}
+                    onClick={() => onEditId(event.event_id)}
                     variant="SurfaceVariant"
                     size="300"
                     radii="300"
@@ -981,7 +1068,7 @@ export const Message = as<'div', MessageProps>(
                         {canSendReaction && (
                           <MessageQuickReactions
                             onReaction={(key, shortcode) => {
-                              onReactionToggle(mEvent.getId()!, key, shortcode);
+                              onReactionToggle(event.event_id, key, shortcode);
                               closeMenu();
                             }}
                           />
@@ -1004,18 +1091,17 @@ export const Message = as<'div', MessageProps>(
                               </Text>
                             </MenuItem>
                           )}
-                          {relations && (
+                          {reactionEvents && (
                             <MessageAllReactionItem
-                              room={room}
-                              relations={relations}
+                              reactionEvents={reactionEvents}
                               onClose={closeMenu}
                             />
                           )}
                           <MenuItem
                             size="300"
-                            after={<Icon size="100" src={Icons.ReplyArrow} />}
+                            after={<Icon size="100" src={Icons.BlockQuote} />}
                             radii="300"
-                            data-event-id={mEvent.getId()}
+                            data-event-id={event.event_id}
                             onClick={(evt: any) => {
                               onReplyClick(evt);
                               closeMenu();
@@ -1027,15 +1113,15 @@ export const Message = as<'div', MessageProps>(
                               size="T300"
                               truncate
                             >
-                              Reply
+                              Quote
                             </Text>
                           </MenuItem>
-                          {!isThreadedMessage && (
+                          {!getThreadId(event) && (
                             <MenuItem
                               size="300"
                               after={<Icon src={Icons.ThreadPlus} size="100" />}
                               radii="300"
-                              data-event-id={mEvent.getId()}
+                              data-event-id={event.event_id}
                               onClick={(evt: any) => {
                                 onReplyClick(evt, true);
                                 closeMenu();
@@ -1051,14 +1137,14 @@ export const Message = as<'div', MessageProps>(
                               </Text>
                             </MenuItem>
                           )}
-                          {canEditEvent(mx, mEvent) && onEditId && (
+                          {canEditEvent(ct, event) && onEditId && (
                             <MenuItem
                               size="300"
                               after={<Icon size="100" src={Icons.Pencil} />}
                               radii="300"
-                              data-event-id={mEvent.getId()}
+                              data-event-id={event.event_id}
                               onClick={() => {
-                                onEditId(mEvent.getId());
+                                onEditId(event.event_id);
                                 closeMenu();
                               }}
                             >
@@ -1073,42 +1159,25 @@ export const Message = as<'div', MessageProps>(
                             </MenuItem>
                           )}
                           {!hideReadReceipts && (
-                            <MessageReadReceiptItem
-                              room={room}
-                              eventId={mEvent.getId() ?? ''}
-                              onClose={closeMenu}
-                            />
+                            <MessageReadReceiptItem eventId={event.event_id} onClose={closeMenu} />
                           )}
                           {showDeveloperTools && (
-                            <MessageSourceCodeItem
-                              room={room}
-                              mEvent={mEvent}
-                              onClose={closeMenu}
-                            />
+                            <MessageSourceCodeItem event={event} onClose={closeMenu} />
                           )}
-                          <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                          <MessageCopyLinkItem eventId={event.event_id} onClose={closeMenu} />
                           {canPinEvent && (
-                            <MessagePinItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                            <MessagePinItem eventId={event.event_id} onClose={closeMenu} />
                           )}
                         </Box>
-                        {((!mEvent.isRedacted() && canDelete) ||
-                          mEvent.getSender() !== mx.getUserId()) && (
+                        {((!redacted && canDelete) || event.sender !== ct.session.userId) && (
                           <>
                             <Line size="300" />
                             <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
-                              {!mEvent.isRedacted() && canDelete && (
-                                <MessageDeleteItem
-                                  room={room}
-                                  mEvent={mEvent}
-                                  onClose={closeMenu}
-                                />
+                              {!redacted && canDelete && (
+                                <MessageDeleteItem eventId={event.event_id} onClose={closeMenu} />
                               )}
-                              {mEvent.getSender() !== mx.getUserId() && (
-                                <MessageReportItem
-                                  room={room}
-                                  mEvent={mEvent}
-                                  onClose={closeMenu}
-                                />
+                              {event.sender !== ct.session.userId && (
+                                <MessageReportItem eventId={event.event_id} onClose={closeMenu} />
                               )}
                             </Box>
                           </>
@@ -1131,32 +1200,60 @@ export const Message = as<'div', MessageProps>(
             </Menu>
           </div>
         )}
-        {messageLayout === MessageLayout.Compact && (
-          <CompactLayout before={headerJSX} onContextMenu={handleContextMenu}>
-            {msgContentJSX}
-          </CompactLayout>
-        )}
-        {messageLayout === MessageLayout.Bubble && (
-          <BubbleLayout before={avatarJSX} header={headerJSX} onContextMenu={handleContextMenu}>
-            {msgContentJSX}
-          </BubbleLayout>
-        )}
-        {messageLayout !== MessageLayout.Compact && messageLayout !== MessageLayout.Bubble && (
-          <ModernLayout before={avatarJSX} onContextMenu={handleContextMenu}>
-            {headerJSX}
-            {msgContentJSX}
-          </ModernLayout>
-        )}
+
+        {reply}
+
+        <RenderMessageLayout
+          avatar={
+            !collapse &&
+            messageLayout !== MessageLayout.Compact && (
+              <MessageAvatar
+                userId={senderId}
+                displayName={senderDisplayName}
+                avatarUrl={senderAvatarMxc}
+                onUserClick={onUserClick}
+                bubbleLayout={messageLayout === MessageLayout.Bubble}
+              />
+            )
+          }
+          username={
+            !collapse && (
+              <MessageUsername
+                userId={senderId}
+                displayName={senderDisplayName}
+                onUserClick={onUserClick}
+                onUsernameClick={onUsernameClick}
+                messageLayout={messageLayout}
+                memberPowerTag={memberPowerTag}
+                accessibleTagColors={accessibleTagColors}
+                legacyUsernameColor={legacyUsernameColor}
+              />
+            )
+          }
+          time={
+            <Time
+              ts={event.origin_server_ts}
+              compact={messageLayout === MessageLayout.Compact}
+              hour24Clock={hour24Clock}
+              dateFormatString={dateFormatString}
+            />
+          }
+          collapse={collapse}
+          messageLayout={messageLayout}
+          onContextMenu={handleContextMenu}
+        >
+          {msgContentJSX}
+        </RenderMessageLayout>
       </MessageBase>
     );
   }
 );
 
 export type EventProps = {
-  room: Room;
-  mEvent: MatrixEvent;
+  event: MessageEventWithoutRoomId;
   highlight: boolean;
   canDelete?: boolean;
+  redacted?: boolean;
   messageSpacing: MessageSpacing;
   hideReadReceipts?: boolean;
   showDeveloperTools?: boolean;
@@ -1165,10 +1262,10 @@ export const Event = as<'div', EventProps>(
   (
     {
       className,
-      room,
-      mEvent,
+      event,
       highlight,
       canDelete,
+      redacted,
       messageSpacing,
       hideReadReceipts,
       showDeveloperTools,
@@ -1177,12 +1274,11 @@ export const Event = as<'div', EventProps>(
     },
     ref
   ) => {
-    const mx = useMatrixClient();
+    const ct = useClient();
     const [hover, setHover] = useState(false);
     const { hoverProps } = useHover({ onHoverChange: setHover });
     const { focusWithinProps } = useFocusWithin({ onFocusWithinChange: setHover });
     const [menuAnchor, setMenuAnchor] = useState<RectCords>();
-    const stateEvent = typeof mEvent.getStateKey() === 'string';
 
     const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
       if (evt.altKey || !window.getSelection()?.isCollapsed) return;
@@ -1242,39 +1338,22 @@ export const Event = as<'div', EventProps>(
                       <Menu {...props} ref={ref}>
                         <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
                           {!hideReadReceipts && (
-                            <MessageReadReceiptItem
-                              room={room}
-                              eventId={mEvent.getId() ?? ''}
-                              onClose={closeMenu}
-                            />
+                            <MessageReadReceiptItem eventId={event.event_id} onClose={closeMenu} />
                           )}
                           {showDeveloperTools && (
-                            <MessageSourceCodeItem
-                              room={room}
-                              mEvent={mEvent}
-                              onClose={closeMenu}
-                            />
+                            <MessageSourceCodeItem event={event} onClose={closeMenu} />
                           )}
-                          <MessageCopyLinkItem room={room} mEvent={mEvent} onClose={closeMenu} />
+                          <MessageCopyLinkItem eventId={event.event_id} onClose={closeMenu} />
                         </Box>
-                        {((!mEvent.isRedacted() && canDelete && !stateEvent) ||
-                          (mEvent.getSender() !== mx.getUserId() && !stateEvent)) && (
+                        {((!redacted && canDelete) || event.sender !== ct.session.userId) && (
                           <>
                             <Line size="300" />
                             <Box direction="Column" gap="100" className={css.MessageMenuGroup}>
-                              {!mEvent.isRedacted() && canDelete && (
-                                <MessageDeleteItem
-                                  room={room}
-                                  mEvent={mEvent}
-                                  onClose={closeMenu}
-                                />
+                              {!redacted && canDelete && (
+                                <MessageDeleteItem eventId={event.event_id} onClose={closeMenu} />
                               )}
-                              {mEvent.getSender() !== mx.getUserId() && (
-                                <MessageReportItem
-                                  room={room}
-                                  mEvent={mEvent}
-                                  onClose={closeMenu}
-                                />
+                              {event.sender !== ct.session.userId && (
+                                <MessageReportItem eventId={event.event_id} onClose={closeMenu} />
                               )}
                             </Box>
                           </>
@@ -1302,3 +1381,67 @@ export const Event = as<'div', EventProps>(
     );
   }
 );
+
+export function ThreadEvents({
+  users,
+  ts,
+  messageLayout,
+  hour24Clock,
+  dateFormatString,
+  messageSpacing,
+  count,
+  onClick,
+}: {
+  users: string[];
+  ts: number;
+  messageLayout: MessageLayout;
+  hour24Clock: boolean;
+  dateFormatString: string;
+  messageSpacing: MessageSpacing;
+  count: number;
+  onClick?: () => void;
+}) {
+  return (
+    <MessageBase className={css.MessageBase} space={messageSpacing} autoCollapse>
+      <EventContent
+        messageLayout={messageLayout}
+        time={
+          <Time
+            ts={ts}
+            compact={messageLayout === MessageLayout.Compact}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+          />
+        }
+        iconSrc={Icons.Thread}
+        content={
+          <Text size="T300" priority="400">
+            {users.length === 1 && <b>{users[0]}</b>}
+            {users.length === 2 && (
+              <>
+                <b>{users[0]}</b>, <b>{users[1]}</b>
+              </>
+            )}
+            {users.length > 2 && (
+              <>
+                <b>{users[0]}</b>, <b>{users[1]}</b>, <b>+{users.length - 2} others</b>
+              </>
+            )}{' '}
+            replied in thread.{' '}
+            <Chip
+              onClick={() => onClick?.()}
+              style={{ flexShrink: 0 }}
+              radii="Pill"
+              variant="Primary"
+              fill="None"
+            >
+              <Text as="span" size="L400">
+                {count} {count === 1 ? 'Reply' : 'Replies'}
+              </Text>
+            </Chip>
+          </Text>
+        }
+      />
+    </MessageBase>
+  );
+}
diff --git a/src/app/features/room/message/MessageEditor.tsx b/src/app/features/room/message/MessageEditor.tsx
index 9a7567aa..339931c6 100644
--- a/src/app/features/room/message/MessageEditor.tsx
+++ b/src/app/features/room/message/MessageEditor.tsx
@@ -21,7 +21,7 @@ import {
 } from 'folds';
 import { Editor, Transforms } from 'slate';
 import { ReactEditor } from 'slate-react';
-import { IContent, IMentions, MatrixEvent, RelationType, Room } from 'matrix-js-sdk';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { isKeyHotkey } from 'is-hotkey';
 import {
   AUTOCOMPLETE_PREFIXES,
@@ -50,21 +50,21 @@ import { settingsAtom } from '../../../state/settings';
 import { UseStateProvider } from '../../../components/UseStateProvider';
 import { EmojiBoard } from '../../../components/emoji-board';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { getEditedEvent, getMentionContent, trimReplyFromFormattedBody } from '../../../utils/room';
 import { mobileOrTablet } from '../../../utils/user-agent';
 import { useComposingCheck } from '../../../hooks/useComposingCheck';
+import { useClient } from '../../../hooks/useClient';
+import { MentionsContent, MessageContent, RelationType } from '../../../../types/matrix/common';
 
 type MessageEditorProps = {
   roomId: string;
-  room: Room;
-  mEvent: MatrixEvent;
-  imagePackRooms?: Room[];
+  event: MessageEventWithoutRoomId;
+  imagePackRooms?: string[];
   onCancel: () => void;
 };
 export const MessageEditor = as<'div', MessageEditorProps>(
-  ({ room, roomId, mEvent, imagePackRooms, onCancel, ...props }, ref) => {
-    const mx = useMatrixClient();
+  ({ roomId, event, imagePackRooms, onCancel, ...props }, ref) => {
+    const ct = useClient();
     const editor = useEditor();
     const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
     const [globalToolbar] = useSetting(settingsAtom, 'editorToolbar');
@@ -78,9 +78,9 @@ export const MessageEditor = as<'div', MessageEditorProps>(
     const getPrevBodyAndFormattedBody = useCallback((): [
       string | undefined,
       string | undefined,
-      IMentions | undefined
+      MentionsContent | undefined
     ] => {
-      const evtId = mEvent.getId()!;
+      const evtId = event.event_id;
       const evtTimeline = room.getTimelineForEvent(evtId);
       const editedEvent =
         evtTimeline && getEditedEvent(evtId, mEvent, evtTimeline.getTimelineSet());
@@ -95,7 +95,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
         typeof customHtml === 'string' ? customHtml : undefined,
         mMentions,
       ];
-    }, [room, mEvent]);
+    }, [roomId, event]);
 
     const [saveState, save] = useAsyncCallback(
       useCallback(async () => {
@@ -124,12 +124,13 @@ export const MessageEditor = as<'div', MessageEditorProps>(
           }
         }
 
-        const newContent: IContent = {
-          msgtype: mEvent.getContent().msgtype,
+        const prevContent = event.content as MessageContent;
+        const newContent: MessageContent = {
+          msgtype: prevContent.msgtype,
           body: plainText,
         };
 
-        const mentionData = getMentions(mx, roomId, editor);
+        const mentionData = getMentions(ct, editor);
 
         prevMentions?.user_ids?.forEach((prevMentionId) => {
           mentionData.users.add(prevMentionId);
@@ -143,18 +144,20 @@ export const MessageEditor = as<'div', MessageEditorProps>(
           newContent.formatted_body = customHtml;
         }
 
-        const content: IContent = {
+        const content: MessageContent = {
           ...newContent,
           body: `* ${plainText}`,
           'm.new_content': newContent,
           'm.relates_to': {
-            event_id: mEvent.getId(),
+            event_id: event.event_id,
             rel_type: RelationType.Replace,
           },
         };
 
-        return mx.sendMessage(roomId, content);
-      }, [mx, editor, roomId, mEvent, isMarkdown, getPrevBodyAndFormattedBody])
+        // TODO: send message
+        // return mx.sendMessage(roomId, content);
+        return Promise.resolve();
+      }, [ct, editor, event, isMarkdown, getPrevBodyAndFormattedBody])
     );
 
     const handleSave = useCallback(() => {
@@ -241,7 +244,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
         )}
         {autocompleteQuery?.prefix === AutocompletePrefix.UserMention && (
           <UserMentionAutocomplete
-            room={room}
+            roomId={roomId}
             editor={editor}
             query={autocompleteQuery}
             requestClose={handleCloseAutocomplete}
diff --git a/src/app/features/room/message/Reactions.tsx b/src/app/features/room/message/Reactions.tsx
index f0f308bb..b01068cd 100644
--- a/src/app/features/room/message/Reactions.tsx
+++ b/src/app/features/room/message/Reactions.tsx
@@ -1,4 +1,5 @@
-import React, { MouseEventHandler, useCallback, useState } from 'react';
+import React, { MouseEventHandler, useMemo, useState } from 'react';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import {
   Box,
   Modal,
@@ -12,35 +13,27 @@ import {
   toRem,
 } from 'folds';
 import classNames from 'classnames';
-import { Room } from 'matrix-js-sdk';
-import { type Relations } from 'matrix-js-sdk/lib/models/relations';
 import FocusTrap from 'focus-trap-react';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { factoryEventSentBy } from '../../../utils/matrix';
 import { Reaction, ReactionTooltipMsg } from '../../../components/message';
-import { useRelations } from '../../../hooks/useRelations';
 import * as css from './styles.css';
 import { ReactionViewer } from '../reaction-viewer';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { ReactionContent } from '../../../../types/matrix/common';
+import { useClient } from '../../../hooks/useClient';
+import { getReactionGroups } from '../../../utils/room';
 
 export type ReactionsProps = {
-  room: Room;
-  mEventId: string;
+  eventId: string;
   canSendReaction?: boolean;
-  relations: Relations;
+  reactions: MessageEventWithoutRoomId<ReactionContent>[];
   onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
 };
 export const Reactions = as<'div', ReactionsProps>(
-  ({ className, room, relations, mEventId, canSendReaction, onReactionToggle, ...props }, ref) => {
-    const mx = useMatrixClient();
+  ({ className, reactions, eventId, canSendReaction, onReactionToggle, ...props }, ref) => {
+    const ct = useClient();
     const useAuthentication = useMediaAuthentication();
     const [viewer, setViewer] = useState<boolean | string>(false);
-    const myUserId = mx.getUserId();
-    const reactions = useRelations(
-      relations,
-      useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
-    );
 
     const handleViewReaction: MouseEventHandler<HTMLButtonElement> = (evt) => {
       evt.stopPropagation();
@@ -50,6 +43,8 @@ export const Reactions = as<'div', ReactionsProps>(
       else setViewer(key);
     };
 
+    const reactionGroups = useMemo(() => getReactionGroups(reactions), [reactions]);
+
     return (
       <Box
         className={classNames(css.ReactionsContainer, className)}
@@ -58,20 +53,21 @@ export const Reactions = as<'div', ReactionsProps>(
         {...props}
         ref={ref}
       >
-        {reactions.map(([key, events]) => {
-          const rEvents = Array.from(events);
-          if (rEvents.length === 0 || typeof key !== 'string') return null;
-          const myREvent = myUserId ? rEvents.find(factoryEventSentBy(myUserId)) : undefined;
-          const isPressed = !!myREvent?.getRelation();
+        {reactionGroups.map((reaction) => {
+          const isPressed = reaction.users.has(ct.session.userId);
 
           return (
             <TooltipProvider
-              key={key}
+              key={reaction.key}
               position="Top"
               tooltip={
                 <Tooltip style={{ maxWidth: toRem(200) }}>
                   <Text className={css.ReactionsTooltipText} size="T300">
-                    <ReactionTooltipMsg room={room} reaction={key} events={rEvents} />
+                    <ReactionTooltipMsg
+                      shortcode={reaction.shortcode}
+                      reaction={reaction.key}
+                      users={Array.from(reaction.users)}
+                    />
                   </Text>
                 </Tooltip>
               }
@@ -79,13 +75,15 @@ export const Reactions = as<'div', ReactionsProps>(
               {(targetRef) => (
                 <Reaction
                   ref={targetRef}
-                  data-reaction-key={key}
+                  data-reaction-key={reaction.key}
                   aria-pressed={isPressed}
-                  key={key}
-                  mx={mx}
-                  reaction={key}
-                  count={events.size}
-                  onClick={canSendReaction ? () => onReactionToggle(mEventId, key) : undefined}
+                  key={reaction.key}
+                  ct={ct}
+                  reaction={reaction.key}
+                  count={reaction.users.size}
+                  onClick={
+                    canSendReaction ? () => onReactionToggle(eventId, reaction.key) : undefined
+                  }
                   onContextMenu={handleViewReaction}
                   aria-disabled={!canSendReaction}
                   useAuthentication={useAuthentication}
@@ -114,9 +112,8 @@ export const Reactions = as<'div', ReactionsProps>(
               >
                 <Modal variant="Surface" size="300">
                   <ReactionViewer
-                    room={room}
                     initialKey={typeof viewer === 'string' ? viewer : undefined}
-                    relations={relations}
+                    reactions={reactionGroups}
                     requestClose={() => setViewer(false)}
                   />
                 </Modal>
diff --git a/src/app/features/room/message/thread-selector/ThreadSelector.tsx b/src/app/features/room/message/thread-selector/ThreadSelector.tsx
new file mode 100644
index 00000000..41bbc9b0
--- /dev/null
+++ b/src/app/features/room/message/thread-selector/ThreadSelector.tsx
@@ -0,0 +1,75 @@
+import { Box, Icon, Icons, Line, Text } from 'folds';
+import React, { ReactNode } from 'react';
+import classNames from 'classnames';
+import * as css from './styles.css';
+import { Time } from '../../../../components/message';
+import { ThreadTimeline } from '../../../../../client/room/ThreadTimeline';
+import { useObservableValue } from '../../../../hooks/useObservableValue';
+import { GetRoomMemberNameCallback } from '../../../../hooks/useRoomMembers';
+
+export function ThreadSelectorContainer({ children }: { children: ReactNode }) {
+  return <Box className={css.ThreadSelectorContainer}>{children}</Box>;
+}
+
+type ThreadSelectorProps = {
+  thread: ThreadTimeline;
+  outlined?: boolean;
+  hour24Clock: boolean;
+  dateFormatString: string;
+  getMemberName: GetRoomMemberNameCallback;
+  onClick?: (threadId: string) => void;
+};
+
+export function ThreadSelector({
+  thread,
+  outlined,
+  hour24Clock,
+  dateFormatString,
+  getMemberName,
+  onClick,
+}: ThreadSelectorProps) {
+  const meta = useObservableValue(thread.meta);
+  const latestEvent = meta?.latestEvent;
+
+  return (
+    <Box
+      as="button"
+      type="button"
+      className={classNames(css.ThreadSelector, outlined && css.ThreadSectorOutlined)}
+      alignItems="Center"
+      gap="300"
+      onClick={() => onClick?.(thread.threadId)}
+    >
+      <Box className={css.ThreadRepliesCount} shrink="No" alignItems="Center" gap="200">
+        <Icon size="100" src={Icons.Thread} filled />
+        <Text size="L400">
+          {meta?.count ?? `+${thread.liveMessages.read.size || 1}`}{' '}
+          {meta?.count === 1 ? 'Reply' : 'Replies'}
+        </Text>
+      </Box>
+      {latestEvent && (
+        <>
+          <Line
+            className={css.ThreadSelectorDivider}
+            direction="Vertical"
+            variant="SurfaceVariant"
+          />
+          <Box gap="200" alignItems="Inherit">
+            <Text size="T200" truncate>
+              <span>Last reply by </span>
+              <b>{getMemberName(latestEvent.sender)}</b>
+              <span> — </span>
+              <Time
+                hour24Clock={hour24Clock}
+                dateFormatString={dateFormatString}
+                ts={latestEvent.origin_server_ts}
+                inheritPriority
+              />
+            </Text>
+            <Icon size="100" src={Icons.ChevronRight} />
+          </Box>
+        </>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/features/room/message/thread-selector/index.ts b/src/app/features/room/message/thread-selector/index.ts
new file mode 100644
index 00000000..2dfa5d9e
--- /dev/null
+++ b/src/app/features/room/message/thread-selector/index.ts
@@ -0,0 +1 @@
+export * from './ThreadSelector';
diff --git a/src/app/features/room/message/thread-selector/styles.css.ts b/src/app/features/room/message/thread-selector/styles.css.ts
new file mode 100644
index 00000000..e0e3d68c
--- /dev/null
+++ b/src/app/features/room/message/thread-selector/styles.css.ts
@@ -0,0 +1,38 @@
+import { style } from '@vanilla-extract/css';
+import { color, config, FocusOutline, toRem } from 'folds';
+import { ContainerColor } from '../../../../styles/ContainerColor.css';
+
+export const ThreadSelectorContainer = style({
+  marginTop: config.space.S200,
+});
+
+export const ThreadSelector = style([
+  ContainerColor({ variant: 'SurfaceVariant' }),
+  {
+    padding: config.space.S200,
+    borderRadius: config.radii.R400,
+    cursor: 'pointer',
+
+    selectors: {
+      '&:hover, &:focus-visible': {
+        backgroundColor: color.SurfaceVariant.ContainerHover,
+      },
+      '&:active': {
+        backgroundColor: color.SurfaceVariant.ContainerActive,
+      },
+    },
+  },
+  FocusOutline,
+]);
+
+export const ThreadSectorOutlined = style({
+  borderWidth: config.borderWidth.B300,
+});
+
+export const ThreadSelectorDivider = style({
+  height: toRem(16),
+});
+
+export const ThreadRepliesCount = style({
+  color: color.Primary.Main,
+});
diff --git a/src/app/features/room/msgContent.ts b/src/app/features/room/msgContent.ts
index 5b7cd145..48a10113 100644
--- a/src/app/features/room/msgContent.ts
+++ b/src/app/features/room/msgContent.ts
@@ -1,9 +1,14 @@
-import { IContent, MatrixClient, MsgType } from 'matrix-js-sdk';
 import to from 'await-to-js';
+import { postUpload, PostUploadOK } from 'neurone/lib/api/matrix/media/v3/upload';
 import {
+  IAudioContent,
+  IFileContent,
+  IImageContent,
   IThumbnailContent,
+  IVideoContent,
   MATRIX_BLUR_HASH_PROPERTY_NAME,
   MATRIX_SPOILER_PROPERTY_NAME,
+  MsgType,
 } from '../../../types/matrix/common';
 import {
   getImageFileUrl,
@@ -14,12 +19,14 @@ import {
   loadVideoElement,
 } from '../../utils/dom';
 import { encryptFile, getImageInfo, getThumbnailContent, getVideoInfo } from '../../utils/matrix';
-import { TUploadItem } from '../../state/room/roomInputDrafts';
+import { UploadItem } from '../../state/room/roomInputDrafts';
 import { encodeBlurHash } from '../../utils/blurHash';
 import { scaleYDimension } from '../../utils/common';
+import { ClientContext } from '../../../client/context';
+import { getAuthUploadRequest } from '../../../client/request';
 
 const generateThumbnailContent = async (
-  mx: MatrixClient,
+  ct: ClientContext,
   img: HTMLImageElement | HTMLVideoElement,
   dimensions: [number, number],
   encrypt: boolean
@@ -30,7 +37,8 @@ const generateThumbnailContent = async (
   const thumbnailFile = encThumbData?.file ?? thumbnail;
   if (!thumbnailFile) throw new Error('Can not create thumbnail!');
 
-  const data = await mx.uploadContent(thumbnailFile);
+  const request = getAuthUploadRequest<PostUploadOK>(ct.session.baseUrl, ct.session.accessToken);
+  const [, data] = await request(postUpload({ body: thumbnailFile }));
   const thumbMxc = data?.content_uri;
   if (!thumbMxc) throw new Error('Failed when uploading thumbnail!');
   const thumbnailContent = getThumbnailContent({
@@ -44,15 +52,15 @@ const generateThumbnailContent = async (
 };
 
 export const getImageMsgContent = async (
-  mx: MatrixClient,
-  item: TUploadItem,
+  ct: ClientContext,
+  item: UploadItem,
   mxc: string
-): Promise<IContent> => {
+): Promise<IImageContent> => {
   const { file, originalFile, encInfo, metadata } = item;
   const [imgError, imgEl] = await to(loadImageElement(getImageFileUrl(originalFile)));
   if (imgError) console.warn(imgError);
 
-  const content: IContent = {
+  const content: IImageContent = {
     msgtype: MsgType.Image,
     filename: file.name,
     body: file.name,
@@ -78,16 +86,16 @@ export const getImageMsgContent = async (
 };
 
 export const getVideoMsgContent = async (
-  mx: MatrixClient,
-  item: TUploadItem,
+  ct: ClientContext,
+  item: UploadItem,
   mxc: string
-): Promise<IContent> => {
+): Promise<IVideoContent> => {
   const { file, originalFile, encInfo, metadata } = item;
 
   const [videoError, videoEl] = await to(loadVideoElement(getVideoFileUrl(originalFile)));
   if (videoError) console.warn(videoError);
 
-  const content: IContent = {
+  const content: IVideoContent = {
     msgtype: MsgType.Video,
     filename: file.name,
     body: file.name,
@@ -96,7 +104,7 @@ export const getVideoMsgContent = async (
   if (videoEl) {
     const [thumbError, thumbContent] = await to(
       generateThumbnailContent(
-        mx,
+        ct,
         videoEl,
         getThumbnailDimensions(videoEl.videoWidth, videoEl.videoHeight),
         !!encInfo
@@ -126,9 +134,9 @@ export const getVideoMsgContent = async (
   return content;
 };
 
-export const getAudioMsgContent = (item: TUploadItem, mxc: string): IContent => {
+export const getAudioMsgContent = (item: UploadItem, mxc: string): IAudioContent => {
   const { file, encInfo } = item;
-  const content: IContent = {
+  const content: IAudioContent = {
     msgtype: MsgType.Audio,
     filename: file.name,
     body: file.name,
@@ -148,9 +156,9 @@ export const getAudioMsgContent = (item: TUploadItem, mxc: string): IContent =>
   return content;
 };
 
-export const getFileMsgContent = (item: TUploadItem, mxc: string): IContent => {
+export const getFileMsgContent = (item: UploadItem, mxc: string): IFileContent => {
   const { file, encInfo } = item;
-  const content: IContent = {
+  const content: IFileContent = {
     msgtype: MsgType.File,
     body: file.name,
     filename: file.name,
diff --git a/src/app/features/room/reaction-viewer/ReactionViewer.tsx b/src/app/features/room/reaction-viewer/ReactionViewer.tsx
index 6c686bc5..8af2186d 100644
--- a/src/app/features/room/reaction-viewer/ReactionViewer.tsx
+++ b/src/app/features/room/reaction-viewer/ReactionViewer.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useState } from 'react';
 import classNames from 'classnames';
 import {
   Avatar,
@@ -14,13 +14,8 @@ import {
   as,
   config,
 } from 'folds';
-import { MatrixEvent, Room, RoomMember } from 'matrix-js-sdk';
-import { Relations } from 'matrix-js-sdk/lib/models/relations';
-import { getMemberDisplayName } from '../../../utils/room';
-import { eventWithShortcode, getMxIdLocalPart } from '../../../utils/matrix';
+import { ReactionGroup } from '../../../utils/room';
 import * as css from './ReactionViewer.css';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { useRelations } from '../../../hooks/useRelations';
 import { Reaction } from '../../../components/message';
 import { getHexcodeForEmoji, getShortcodeFor } from '../../../plugins/emoji';
 import { UserAvatar } from '../../../components/user-avatar';
@@ -28,44 +23,28 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useOpenUserRoomProfile } from '../../../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from '../../../hooks/useSpace';
 import { getMouseEventCords } from '../../../utils/dom';
+import { useClient } from '../../../hooks/useClient';
+import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { useRoom } from '../../../hooks/useRoom';
 
 export type ReactionViewerProps = {
-  room: Room;
   initialKey?: string;
-  relations: Relations;
+  reactions: ReactionGroup[];
   requestClose: () => void;
 };
 export const ReactionViewer = as<'div', ReactionViewerProps>(
-  ({ className, room, initialKey, relations, requestClose, ...props }, ref) => {
-    const mx = useMatrixClient();
+  ({ className, initialKey, reactions, requestClose, ...props }, ref) => {
+    const ct = useClient();
     const useAuthentication = useMediaAuthentication();
-    const reactions = useRelations(
-      relations,
-      useCallback((rel) => [...(rel.getSortedAnnotationsByKey() ?? [])], [])
-    );
-    const space = useSpaceOptionally();
+    const roomId = useRoom();
+    const spaceId = useSpaceOptionally();
     const openProfile = useOpenUserRoomProfile();
+    const membersAPI = useRoomMembersAPI();
 
-    const [selectedKey, setSelectedKey] = useState<string>(() => {
-      if (initialKey) return initialKey;
-      const defaultReaction = reactions.find((reaction) => typeof reaction[0] === 'string');
-      return defaultReaction ? defaultReaction[0] : '';
-    });
-
-    const getName = (member: RoomMember) =>
-      getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
-
-    const getReactionsForKey = (key: string): MatrixEvent[] => {
-      const reactSet = reactions.find(([k]) => k === key)?.[1];
-      if (!reactSet) return [];
-      return Array.from(reactSet);
-    };
-
-    const selectedReactions = getReactionsForKey(selectedKey);
-    const selectedShortcode =
-      selectedReactions.find(eventWithShortcode)?.getContent().shortcode ??
-      getShortcodeFor(getHexcodeForEmoji(selectedKey)) ??
-      selectedKey;
+    const [selectedReaction, setSelectedReaction] = useState<ReactionGroup | undefined>(() =>
+      reactions.find((r) => (initialKey ? r.key === initialKey : r))
+    );
 
     return (
       <Box
@@ -77,20 +56,17 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
         <Box shrink="No" className={css.Sidebar}>
           <Scroll visibility="Hover" hideTrack size="300">
             <Box className={css.SidebarContent} direction="Column" gap="200">
-              {reactions.map(([key, evts]) => {
-                if (typeof key !== 'string') return null;
-                return (
-                  <Reaction
-                    key={key}
-                    mx={mx}
-                    reaction={key}
-                    count={evts.size}
-                    aria-selected={key === selectedKey}
-                    onClick={() => setSelectedKey(key)}
-                    useAuthentication={useAuthentication}
-                  />
-                );
-              })}
+              {reactions.map((reaction) => (
+                <Reaction
+                  key={reaction.key}
+                  ct={ct}
+                  reaction={reaction.key}
+                  count={reaction.users.size}
+                  aria-selected={reaction.key === selectedReaction?.key}
+                  onClick={() => setSelectedReaction(reaction)}
+                  useAuthentication={useAuthentication}
+                />
+              ))}
             </Box>
           </Scroll>
         </Box>
@@ -98,7 +74,17 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
         <Box grow="Yes" direction="Column">
           <Header className={css.Header} variant="Surface" size="600">
             <Box grow="Yes">
-              <Text size="H3" truncate>{`Reacted with :${selectedShortcode}:`}</Text>
+              {selectedReaction ? (
+                <Text size="H3" truncate>{`Reacted with :${
+                  selectedReaction.shortcode ??
+                  getShortcodeFor(getHexcodeForEmoji(selectedReaction.key)) ??
+                  selectedReaction.key
+                }:`}</Text>
+              ) : (
+                <Text size="H3" truncate>
+                  Reactions
+                </Text>
+              )}
             </Box>
             <IconButton size="300" onClick={requestClose}>
               <Icon src={Icons.Cross} />
@@ -108,58 +94,51 @@ export const ReactionViewer = as<'div', ReactionViewerProps>(
           <Box grow="Yes">
             <Scroll visibility="Hover" hideTrack size="300">
               <Box className={css.Content} direction="Column">
-                {selectedReactions.map((mEvent) => {
-                  const senderId = mEvent.getSender();
-                  if (!senderId) return null;
-                  const member = room.getMember(senderId);
-                  const name = (member ? getName(member) : getMxIdLocalPart(senderId)) ?? senderId;
+                {selectedReaction &&
+                  Array.from(selectedReaction.users).map((userId) => {
+                    const name = membersAPI.getName(userId);
+                    const avatarMxcUrl = membersAPI.getAvatar(userId);
+                    const avatarUrl = avatarMxcUrl
+                      ? mxcToHttp(ct.session.baseUrl, avatarMxcUrl, useAuthentication).thumbnail({
+                          width: 96,
+                          height: 96,
+                          method: 'crop',
+                        })
+                      : undefined;
 
-                  const avatarMxcUrl = member?.getMxcAvatarUrl();
-                  const avatarUrl = avatarMxcUrl
-                    ? mx.mxcUrlToHttp(
-                        avatarMxcUrl,
-                        100,
-                        100,
-                        'crop',
-                        undefined,
-                        false,
-                        useAuthentication
-                      )
-                    : undefined;
-
-                  return (
-                    <MenuItem
-                      key={senderId}
-                      style={{ padding: `0 ${config.space.S200}` }}
-                      radii="400"
-                      onClick={(event) => {
-                        openProfile(
-                          room.roomId,
-                          space?.roomId,
-                          senderId,
-                          getMouseEventCords(event.nativeEvent),
-                          'Bottom'
-                        );
-                      }}
-                      before={
-                        <Avatar size="200">
-                          <UserAvatar
-                            userId={senderId}
-                            src={avatarUrl ?? undefined}
-                            alt={name}
-                            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-                          />
-                        </Avatar>
-                      }
-                    >
-                      <Box grow="Yes">
-                        <Text size="T400" truncate>
-                          {name}
-                        </Text>
-                      </Box>
-                    </MenuItem>
-                  );
-                })}
+                    return (
+                      <MenuItem
+                        key={userId}
+                        style={{ padding: `0 ${config.space.S200}` }}
+                        radii="400"
+                        onClick={(event) => {
+                          openProfile(
+                            roomId,
+                            spaceId,
+                            userId,
+                            getMouseEventCords(event.nativeEvent),
+                            'Bottom'
+                          );
+                        }}
+                        before={
+                          <Avatar size="200">
+                            <UserAvatar
+                              userId={userId}
+                              src={avatarUrl ?? undefined}
+                              alt={name}
+                              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                            />
+                          </Avatar>
+                        }
+                      >
+                        <Box grow="Yes">
+                          <Text size="T400" truncate>
+                            {name}
+                          </Text>
+                        </Box>
+                      </MenuItem>
+                    );
+                  })}
               </Box>
             </Scroll>
           </Box>
diff --git a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
index 9986849f..0939f0d5 100644
--- a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
+++ b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
@@ -49,7 +49,12 @@ import {
   getMemberDisplayName,
   getStateEvent,
 } from '../../../utils/room';
-import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/matrix/room';
+import {
+  GetContentCallback,
+  MessageEvent,
+  StateEvent,
+  StateEventType,
+} from '../../../../types/matrix/room';
 import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
 import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
 import {
@@ -76,7 +81,7 @@ import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
 import { useTheme } from '../../../hooks/useTheme';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
-import { useIsDirectRoom } from '../../../hooks/useRoom';
+import { useIsDirectRoom, useRoom } from '../../../hooks/useRoom';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 import {
@@ -86,6 +91,7 @@ import {
   useGetMemberPowerTag,
 } from '../../../hooks/useMemberPowerTag';
 import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
+import { useClient } from '../../../hooks/useClient';
 
 type PinnedMessageProps = {
   room: Room;
@@ -244,302 +250,292 @@ function PinnedMessage({
 }
 
 type RoomPinMenuProps = {
-  room: Room;
   requestClose: () => void;
 };
-export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(
-  ({ room, requestClose }, ref) => {
-    const mx = useMatrixClient();
-    const userId = mx.getUserId()!;
-    const powerLevels = usePowerLevelsContext();
-    const creators = useRoomCreators(room);
+export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(({ requestClose }, ref) => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const { userId } = ct.session;
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(roomId);
 
-    const permissions = useRoomPermissions(creators, powerLevels);
-    const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, userId);
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const canPinEvent = permissions.stateEvent(StateEventType.RoomPinnedEvents, userId);
 
-    const creatorsTag = useRoomCreatorsTag();
-    const powerLevelTags = usePowerLevelTags(room, powerLevels);
-    const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const creatorsTag = useRoomCreatorsTag();
+  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
 
-    const theme = useTheme();
-    const accessibleTagColors = useAccessiblePowerTagColors(
-      theme.kind,
-      creatorsTag,
-      powerLevelTags
-    );
+  const theme = useTheme();
+  const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);
 
-    const pinnedEvents = useRoomPinnedEvents(room);
-    const sortedPinnedEvent = useMemo(() => Array.from(pinnedEvents).reverse(), [pinnedEvents]);
-    const useAuthentication = useMediaAuthentication();
-    const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
-    const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const pinnedEvents = useRoomPinnedEvents(roomId);
+  const sortedPinnedEvent = useMemo(() => Array.from(pinnedEvents).reverse(), [pinnedEvents]);
+  const useAuthentication = useMediaAuthentication();
+  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
+  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
 
-    const direct = useIsDirectRoom();
-    const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+  const direct = useIsDirectRoom();
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
 
-    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-    const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
 
-    const { navigateRoom } = useRoomNavigate();
-    const scrollRef = useRef<HTMLDivElement>(null);
+  const { navigateRoom } = useRoomNavigate();
+  const scrollRef = useRef<HTMLDivElement>(null);
 
-    const virtualizer = useVirtualizer({
-      count: sortedPinnedEvent.length,
-      getScrollElement: () => scrollRef.current,
-      estimateSize: () => 75,
-      overscan: 4,
-    });
+  const virtualizer = useVirtualizer({
+    count: sortedPinnedEvent.length,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => 75,
+    overscan: 4,
+  });
 
-    const mentionClickHandler = useMentionClickHandler(room.roomId);
-    const spoilerClickHandler = useSpoilerClickHandler();
+  const mentionClickHandler = useMentionClickHandler(roomId);
+  const spoilerClickHandler = useSpoilerClickHandler();
 
-    const linkifyOpts = useMemo<LinkifyOpts>(
-      () => ({
-        ...LINKIFY_OPTS,
-        render: factoryRenderLinkifyWithMention((href) =>
-          renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
-        ),
+  const linkifyOpts = useMemo<LinkifyOpts>(
+    () => ({
+      ...LINKIFY_OPTS,
+      render: factoryRenderLinkifyWithMention((href) =>
+        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
+      ),
+    }),
+    [mx, room, mentionClickHandler]
+  );
+  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
+    () =>
+      getReactCustomHtmlParser(mx, room.roomId, {
+        linkifyOpts,
+        useAuthentication,
+        handleSpoilerClick: spoilerClickHandler,
+        handleMentionClick: mentionClickHandler,
       }),
-      [mx, room, mentionClickHandler]
-    );
-    const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
-      () =>
-        getReactCustomHtmlParser(mx, room.roomId, {
-          linkifyOpts,
-          useAuthentication,
-          handleSpoilerClick: spoilerClickHandler,
-          handleMentionClick: mentionClickHandler,
-        }),
-      [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
-    );
+    [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
+  );
 
-    const renderMatrixEvent = useMatrixEventRenderer<[MatrixEvent, string, GetContentCallback]>(
-      {
-        [MessageEvent.RoomMessage]: (event, displayName, getContent) => {
-          if (event.isRedacted()) {
-            return (
-              <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />
-            );
-          }
+  const renderMatrixEvent = useMatrixEventRenderer<[MatrixEvent, string, GetContentCallback]>(
+    {
+      [MessageEvent.RoomMessage]: (event, displayName, getContent) => {
+        if (event.isRedacted()) {
+          return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
+        }
 
+        return (
+          <RenderMessageContent
+            displayName={displayName}
+            msgType={event.getContent().msgtype ?? ''}
+            ts={event.getTs()}
+            getContent={getContent}
+            edited={!!event.replacingEvent()}
+            mediaAutoLoad={mediaAutoLoad}
+            urlPreview={urlPreview}
+            htmlReactParserOptions={htmlReactParserOptions}
+            linkifyOpts={linkifyOpts}
+            outlineAttachment
+          />
+        );
+      },
+      [MessageEvent.RoomMessageEncrypted]: (event, displayName) => {
+        const eventId = event.getId()!;
+        const evtTimeline = room.getTimelineForEvent(eventId);
+
+        const mEvent = evtTimeline?.getEvents().find((e) => e.getId() === eventId);
+
+        if (!mEvent || !evtTimeline) {
           return (
-            <RenderMessageContent
-              displayName={displayName}
-              msgType={event.getContent().msgtype ?? ''}
-              ts={event.getTs()}
-              getContent={getContent}
-              edited={!!event.replacingEvent()}
-              mediaAutoLoad={mediaAutoLoad}
-              urlPreview={urlPreview}
-              htmlReactParserOptions={htmlReactParserOptions}
-              linkifyOpts={linkifyOpts}
-              outlineAttachment
-            />
+            <Box grow="Yes" direction="Column">
+              <Text size="T400" priority="300">
+                <code className={customHtmlCss.Code}>{event.getType()}</code>
+                {' event'}
+              </Text>
+            </Box>
           );
-        },
-        [MessageEvent.RoomMessageEncrypted]: (event, displayName) => {
-          const eventId = event.getId()!;
-          const evtTimeline = room.getTimelineForEvent(eventId);
+        }
 
-          const mEvent = evtTimeline?.getEvents().find((e) => e.getId() === eventId);
+        return (
+          <EncryptedContent mEvent={mEvent}>
+            {() => {
+              if (mEvent.isRedacted()) return <RedactedContent />;
+              if (mEvent.getType() === MessageEvent.Sticker)
+                return (
+                  <MSticker
+                    content={mEvent.getContent()}
+                    renderImageContent={(props) => (
+                      <ImageContent
+                        {...props}
+                        autoPlay={mediaAutoLoad}
+                        renderImage={(p) => <Image {...p} loading="lazy" />}
+                        renderViewer={(p) => <ImageViewer {...p} />}
+                      />
+                    )}
+                  />
+                );
+              if (mEvent.getType() === MessageEvent.RoomMessage) {
+                const editedEvent = getEditedEvent(eventId, mEvent, evtTimeline.getTimelineSet());
+                const getContent = (() =>
+                  editedEvent?.getContent()['m.new_content'] ??
+                  mEvent.getContent()) as GetContentCallback;
 
-          if (!mEvent || !evtTimeline) {
-            return (
-              <Box grow="Yes" direction="Column">
-                <Text size="T400" priority="300">
-                  <code className={customHtmlCss.Code}>{event.getType()}</code>
-                  {' event'}
-                </Text>
-              </Box>
-            );
-          }
-
-          return (
-            <EncryptedContent mEvent={mEvent}>
-              {() => {
-                if (mEvent.isRedacted()) return <RedactedContent />;
-                if (mEvent.getType() === MessageEvent.Sticker)
-                  return (
-                    <MSticker
-                      content={mEvent.getContent()}
-                      renderImageContent={(props) => (
-                        <ImageContent
-                          {...props}
-                          autoPlay={mediaAutoLoad}
-                          renderImage={(p) => <Image {...p} loading="lazy" />}
-                          renderViewer={(p) => <ImageViewer {...p} />}
-                        />
-                      )}
-                    />
-                  );
-                if (mEvent.getType() === MessageEvent.RoomMessage) {
-                  const editedEvent = getEditedEvent(eventId, mEvent, evtTimeline.getTimelineSet());
-                  const getContent = (() =>
-                    editedEvent?.getContent()['m.new_content'] ??
-                    mEvent.getContent()) as GetContentCallback;
-
-                  return (
-                    <RenderMessageContent
-                      displayName={displayName}
-                      msgType={mEvent.getContent().msgtype ?? ''}
-                      ts={mEvent.getTs()}
-                      edited={!!editedEvent || !!mEvent.replacingEvent()}
-                      getContent={getContent}
-                      mediaAutoLoad={mediaAutoLoad}
-                      urlPreview={urlPreview}
-                      htmlReactParserOptions={htmlReactParserOptions}
-                      linkifyOpts={linkifyOpts}
-                    />
-                  );
-                }
-                if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
-                  return (
-                    <Text>
-                      <MessageNotDecryptedContent />
-                    </Text>
-                  );
+                return (
+                  <RenderMessageContent
+                    displayName={displayName}
+                    msgType={mEvent.getContent().msgtype ?? ''}
+                    ts={mEvent.getTs()}
+                    edited={!!editedEvent || !!mEvent.replacingEvent()}
+                    getContent={getContent}
+                    mediaAutoLoad={mediaAutoLoad}
+                    urlPreview={urlPreview}
+                    htmlReactParserOptions={htmlReactParserOptions}
+                    linkifyOpts={linkifyOpts}
+                  />
+                );
+              }
+              if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
                 return (
                   <Text>
-                    <MessageUnsupportedContent />
+                    <MessageNotDecryptedContent />
                   </Text>
                 );
-              }}
-            </EncryptedContent>
-          );
-        },
-        [MessageEvent.Sticker]: (event, displayName, getContent) => {
-          if (event.isRedacted()) {
-            return (
-              <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />
-            );
-          }
-          return (
-            <MSticker
-              content={getContent()}
-              renderImageContent={(props) => (
-                <ImageContent
-                  {...props}
-                  autoPlay={mediaAutoLoad}
-                  renderImage={(p) => <Image {...p} loading="lazy" />}
-                  renderViewer={(p) => <ImageViewer {...p} />}
-                />
-              )}
-            />
-          );
-        },
+              return (
+                <Text>
+                  <MessageUnsupportedContent />
+                </Text>
+              );
+            }}
+          </EncryptedContent>
+        );
       },
-      undefined,
-      (event) => {
+      [MessageEvent.Sticker]: (event, displayName, getContent) => {
         if (event.isRedacted()) {
           return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
         }
         return (
-          <Box grow="Yes" direction="Column">
-            <Text size="T400" priority="300">
-              <code className={customHtmlCss.Code}>{event.getType()}</code>
-              {' event'}
-            </Text>
-          </Box>
+          <MSticker
+            content={getContent()}
+            renderImageContent={(props) => (
+              <ImageContent
+                {...props}
+                autoPlay={mediaAutoLoad}
+                renderImage={(p) => <Image {...p} loading="lazy" />}
+                renderViewer={(p) => <ImageViewer {...p} />}
+              />
+            )}
+          />
         );
+      },
+    },
+    undefined,
+    (event) => {
+      if (event.isRedacted()) {
+        return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
       }
-    );
-
-    const handleOpen = (roomId: string, eventId: string) => {
-      navigateRoom(roomId, eventId);
-      requestClose();
-    };
-
-    return (
-      <Menu ref={ref} className={css.PinMenu}>
+      return (
         <Box grow="Yes" direction="Column">
-          <Header className={css.PinMenuHeader} size="500">
-            <Box grow="Yes">
-              <Text size="H5">Pinned Messages</Text>
-            </Box>
-            <Box shrink="No">
-              <IconButton size="300" onClick={requestClose} radii="300">
-                <Icon src={Icons.Cross} size="400" />
-              </IconButton>
-            </Box>
-          </Header>
-          <Box grow="Yes">
-            <Scroll ref={scrollRef} size="300" hideTrack visibility="Hover">
-              <Box className={css.PinMenuContent} direction="Column" gap="100">
-                {sortedPinnedEvent.length > 0 ? (
-                  <div
-                    style={{
-                      position: 'relative',
-                      height: virtualizer.getTotalSize(),
-                    }}
-                  >
-                    {virtualizer.getVirtualItems().map((vItem) => {
-                      const eventId = sortedPinnedEvent[vItem.index];
-                      if (!eventId) return null;
+          <Text size="T400" priority="300">
+            <code className={customHtmlCss.Code}>{event.getType()}</code>
+            {' event'}
+          </Text>
+        </Box>
+      );
+    }
+  );
 
-                      return (
-                        <VirtualTile
-                          virtualItem={vItem}
-                          style={{ paddingBottom: config.space.S200 }}
-                          ref={virtualizer.measureElement}
-                          key={vItem.index}
+  const handleOpen = (roomId: string, eventId: string) => {
+    navigateRoom(roomId, eventId);
+    requestClose();
+  };
+
+  return (
+    <Menu ref={ref} className={css.PinMenu}>
+      <Box grow="Yes" direction="Column">
+        <Header className={css.PinMenuHeader} size="500">
+          <Box grow="Yes">
+            <Text size="H5">Pinned Messages</Text>
+          </Box>
+          <Box shrink="No">
+            <IconButton size="300" onClick={requestClose} radii="300">
+              <Icon src={Icons.Cross} size="400" />
+            </IconButton>
+          </Box>
+        </Header>
+        <Box grow="Yes">
+          <Scroll ref={scrollRef} size="300" hideTrack visibility="Hover">
+            <Box className={css.PinMenuContent} direction="Column" gap="100">
+              {sortedPinnedEvent.length > 0 ? (
+                <div
+                  style={{
+                    position: 'relative',
+                    height: virtualizer.getTotalSize(),
+                  }}
+                >
+                  {virtualizer.getVirtualItems().map((vItem) => {
+                    const eventId = sortedPinnedEvent[vItem.index];
+                    if (!eventId) return null;
+
+                    return (
+                      <VirtualTile
+                        virtualItem={vItem}
+                        style={{ paddingBottom: config.space.S200 }}
+                        ref={virtualizer.measureElement}
+                        key={vItem.index}
+                      >
+                        <SequenceCard
+                          style={{ padding: config.space.S400, borderRadius: config.radii.R300 }}
+                          variant="SurfaceVariant"
+                          direction="Column"
                         >
-                          <SequenceCard
-                            style={{ padding: config.space.S400, borderRadius: config.radii.R300 }}
-                            variant="SurfaceVariant"
-                            direction="Column"
-                          >
-                            <PinnedMessage
-                              room={room}
-                              eventId={eventId}
-                              renderContent={renderMatrixEvent}
-                              onOpen={handleOpen}
-                              canPinEvent={canPinEvent}
-                              getMemberPowerTag={getMemberPowerTag}
-                              accessibleTagColors={accessibleTagColors}
-                              legacyUsernameColor={legacyUsernameColor || direct}
-                              hour24Clock={hour24Clock}
-                              dateFormatString={dateFormatString}
-                            />
-                          </SequenceCard>
-                        </VirtualTile>
-                      );
-                    })}
-                  </div>
-                ) : (
+                          <PinnedMessage
+                            room={room}
+                            eventId={eventId}
+                            renderContent={renderMatrixEvent}
+                            onOpen={handleOpen}
+                            canPinEvent={canPinEvent}
+                            getMemberPowerTag={getMemberPowerTag}
+                            accessibleTagColors={accessibleTagColors}
+                            legacyUsernameColor={legacyUsernameColor || direct}
+                            hour24Clock={hour24Clock}
+                            dateFormatString={dateFormatString}
+                          />
+                        </SequenceCard>
+                      </VirtualTile>
+                    );
+                  })}
+                </div>
+              ) : (
+                <Box
+                  className={ContainerColor({ variant: 'SurfaceVariant' })}
+                  style={{
+                    marginBottom: config.space.S200,
+                    padding: `${config.space.S700} ${config.space.S400} ${toRem(60)}`,
+                    borderRadius: config.radii.R300,
+                  }}
+                  grow="Yes"
+                  direction="Column"
+                  gap="400"
+                  justifyContent="Center"
+                  alignItems="Center"
+                >
+                  <Icon src={Icons.Pin} size="600" />
                   <Box
-                    className={ContainerColor({ variant: 'SurfaceVariant' })}
-                    style={{
-                      marginBottom: config.space.S200,
-                      padding: `${config.space.S700} ${config.space.S400} ${toRem(60)}`,
-                      borderRadius: config.radii.R300,
-                    }}
-                    grow="Yes"
+                    style={{ maxWidth: toRem(300) }}
                     direction="Column"
-                    gap="400"
-                    justifyContent="Center"
+                    gap="200"
                     alignItems="Center"
                   >
-                    <Icon src={Icons.Pin} size="600" />
-                    <Box
-                      style={{ maxWidth: toRem(300) }}
-                      direction="Column"
-                      gap="200"
-                      alignItems="Center"
-                    >
-                      <Text size="H4" align="Center">
-                        No Pinned Messages
-                      </Text>
-                      <Text size="T400" align="Center">
-                        Users with sufficient power level can pin a messages from its context menu.
-                      </Text>
-                    </Box>
+                    <Text size="H4" align="Center">
+                      No Pinned Messages
+                    </Text>
+                    <Text size="T400" align="Center">
+                      Users with sufficient power level can pin a messages from its context menu.
+                    </Text>
                   </Box>
-                )}
-              </Box>
-            </Scroll>
-          </Box>
+                </Box>
+              )}
+            </Box>
+          </Scroll>
         </Box>
-      </Menu>
-    );
-  }
-);
+      </Box>
+    </Menu>
+  );
+});
diff --git a/src/app/features/room/thread-view/ThreadView.tsx b/src/app/features/room/thread-view/ThreadView.tsx
new file mode 100644
index 00000000..69d5f2ef
--- /dev/null
+++ b/src/app/features/room/thread-view/ThreadView.tsx
@@ -0,0 +1,626 @@
+import React, {
+  forwardRef,
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import classNames from 'classnames';
+import { ReactEditor } from 'slate-react';
+import {
+  Badge,
+  Box,
+  Icon,
+  IconButton,
+  Icons,
+  Scroll,
+  Text,
+  Tooltip,
+  TooltipProvider,
+  config,
+} from 'folds';
+import { Opts as LinkifyOpts } from 'linkifyjs';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import FocusTrap from 'focus-trap-react';
+import { useVirtualPaginator } from '../../../hooks/useVirtualPaginator';
+import { useAlive } from '../../../hooks/useAlive';
+import { scrollToBottom } from '../../../utils/dom';
+import {
+  DefaultPlaceholder,
+  CompactPlaceholder,
+  MessageBase,
+  Reply,
+} from '../../../components/message';
+import {
+  factoryRenderLinkifyWithMention,
+  getReactCustomHtmlParser,
+  LINKIFY_OPTS,
+  makeMentionCustomProps,
+  renderMatrixMention,
+} from '../../../plugins/react-custom-html-parser';
+import { fallbackReply, getLatestEditEvent, getReplyId } from '../../../utils/room';
+import { useSetting } from '../../../state/hooks/settings';
+import { MessageLayout, settingsAtom } from '../../../state/settings';
+import { Reactions, Message } from '../message';
+import * as css from './styles.css';
+import { inSameDay, minuteDifference } from '../../../utils/time';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
+import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
+import { RenderMessageContent } from '../../../components/RenderMessageContent';
+import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
+import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
+import { useImagePackRooms } from '../../../hooks/useImagePackRooms';
+import { useIsDirectRoom, useRoom } from '../../../hooks/useRoom';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import {
+  useAccessiblePowerTagColors,
+  useGetMemberPowerTag,
+} from '../../../hooks/useMemberPowerTag';
+import { useTheme } from '../../../hooks/useTheme';
+import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
+import { usePowerLevelTags, usePowerLevelTagsState } from '../../../hooks/usePowerLevelTags';
+import { ThreadTimeline } from '../../../../client/room/ThreadTimeline';
+import { useObservableValue } from '../../../hooks/useObservableValue';
+import { useClient } from '../../../hooks/useClient';
+import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
+import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
+import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
+import {
+  useAtBottomToggle,
+  useEditorResizeStickBottom,
+  useReplyClickHandler,
+  useRestoreScrollToBottom,
+  useTimelinePaginate,
+  useTimelinePrefetch,
+  useTimelineScrollRestore,
+  useUserClickHandler,
+  useUsernameClickHandler,
+} from '../hooks/useTimeline';
+import { rContent } from '../../../../client/reader';
+import { Page, PageHeader } from '../../../components/page';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
+import { useEditor } from '../../../components/editor';
+import { TimelineDivider, TimelineFloat, JumpToLatestButton, DayDivider } from '../components';
+import { RoomInput } from '../RoomInput';
+import { RoomViewFollowingPlaceholder } from '../RoomViewFollowing';
+
+type PlaceholderListProps = {
+  count: number;
+  Placeholder: React.ComponentType;
+};
+
+const PlaceholderList = forwardRef<HTMLDivElement, PlaceholderListProps>(
+  ({ count, Placeholder }, ref) => (
+    <div ref={ref}>
+      {Array.from({ length: count }).map((_, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <MessageBase key={i}>
+          <Placeholder />
+        </MessageBase>
+      ))}
+    </div>
+  )
+);
+
+type ThreadViewProps = {
+  threadTimeline: ThreadTimeline;
+  requestClose: () => void;
+};
+
+const PAGINATION_LIMIT = 80;
+
+export function ThreadView({ threadTimeline, requestClose }: ThreadViewProps) {
+  const ct = useClient();
+  const roomId = useRoom();
+  const useAuthentication = useMediaAuthentication();
+  const encryptedRooms = useObservableValue(ct.encryptedRooms);
+  const screenSize = useScreenSizeContext();
+  const floating = screenSize !== ScreenSize.Desktop;
+  const editor = useEditor();
+  const roomInputRef = useRef<HTMLDivElement>(null);
+  const roomViewRef = useRef<HTMLDivElement>(null);
+
+  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
+  const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+  const direct = useIsDirectRoom();
+  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
+  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
+  const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
+  const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const ignoredUsersList = useIgnoredUsers();
+  const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
+
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(roomId);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const membersAPI = useRoomMembersAPI();
+  const creatorsTag = useRoomCreatorsTag();
+  const powerLevelTagsState = usePowerLevelTagsState(roomId);
+  const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsState.value);
+  const getMemberPowerTag = useGetMemberPowerTag(creators, powerLevels);
+
+  const theme = useTheme();
+  const accessiblePowerTagColors = useAccessiblePowerTagColors(
+    theme.kind,
+    creatorsTag,
+    powerLevelTags
+  );
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+
+  const canRedact = permissions.action('redact', ct.session.userId);
+  const canSendReaction = permissions.event(MessageEvent.Reaction, ct.session.userId);
+  const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, ct.session.userId);
+  const [editId, setEditId] = useState<string>();
+
+  const mentionClickHandler = useMentionClickHandler(roomId);
+  const spoilerClickHandler = useSpoilerClickHandler();
+  const imagePackRooms = useImagePackRooms(roomId);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollToBottomRef = useRef({
+    count: 0,
+    smooth: true,
+  });
+
+  const [focusItem, setFocusItem] = useState<
+    | {
+        index: number;
+        scrollTo: boolean;
+        highlight: boolean;
+      }
+    | undefined
+  >();
+  const alive = useAlive();
+
+  const linkifyOpts = useMemo<LinkifyOpts>(
+    () => ({
+      ...LINKIFY_OPTS,
+      render: factoryRenderLinkifyWithMention((href) =>
+        renderMatrixMention(
+          ct,
+          roomId,
+          href,
+          makeMentionCustomProps(mentionClickHandler),
+          membersAPI.getName,
+          getRoomName
+        )
+      ),
+    }),
+    [ct, roomId, mentionClickHandler, membersAPI.getName, getRoomName]
+  );
+
+  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
+    () =>
+      getReactCustomHtmlParser(ct, roomId, {
+        linkifyOpts,
+        useAuthentication,
+        handleSpoilerClick: spoilerClickHandler,
+        handleMentionClick: mentionClickHandler,
+        getMemberName: membersAPI.getName,
+        getRoomName,
+      }),
+    [
+      ct,
+      roomId,
+      linkifyOpts,
+      spoilerClickHandler,
+      mentionClickHandler,
+      useAuthentication,
+      membersAPI.getName,
+      getRoomName,
+    ]
+  );
+
+  const redacted = useObservableValue(threadTimeline.relations.redacted);
+  const reactions = useObservableValue(threadTimeline.relations.reactions.eventToRelations);
+  const edits = useObservableValue(threadTimeline.relations.edits.eventToRelations);
+  const messageBatch = useObservableValue(threadTimeline.batch);
+  const { events } = messageBatch.messages;
+
+  window.tt = threadTimeline;
+
+  const range = useObservableValue(threadTimeline.range.info);
+  const rangeAtStart = range.start === 0;
+  const rangeAtEnd = range.end === messageBatch.size;
+
+  const getScrollElement = useCallback(() => scrollRef.current, []);
+
+  useTimelinePrefetch(threadTimeline, PAGINATION_LIMIT);
+  const handlePaginate = useTimelinePaginate(threadTimeline, PAGINATION_LIMIT);
+  useTimelineScrollRestore(threadTimeline, scrollRef);
+  useRestoreScrollToBottom(scrollRef, messageBatch);
+
+  const { getItems, scrollToItem, scrollToElement, observeBackAnchor, observeFrontAnchor } =
+    useVirtualPaginator({
+      count: messageBatch.size,
+      limit: PAGINATION_LIMIT,
+      range,
+      onRangeChange: useCallback((r) => threadTimeline.range.setRange(r), [threadTimeline]),
+      getScrollElement,
+      getItemElement: useCallback(
+        (index: number) =>
+          (scrollRef.current?.querySelector(`[data-message-item="${index}"]`) as HTMLElement) ??
+          undefined,
+        []
+      ),
+      onEnd: handlePaginate,
+    });
+
+  const tryAutoMarkAsRead = useCallback(() => {
+    console.log('mark thread as read.');
+  }, []);
+
+  const [atBottom, atBottomAnchorRef] = useAtBottomToggle(
+    getScrollElement,
+    messageBatch.next.end ?? false,
+    useCallback(
+      (bottom: boolean) => {
+        if (bottom && document.hasFocus()) {
+          tryAutoMarkAsRead();
+        }
+      },
+      [tryAutoMarkAsRead]
+    )
+  );
+
+  useEditorResizeStickBottom(
+    getScrollElement,
+    useCallback(() => roomInputRef?.current ?? null, [roomInputRef]),
+    atBottom
+  );
+
+  // scroll to focused message
+  useLayoutEffect(() => {
+    if (focusItem && focusItem.scrollTo) {
+      scrollToItem(focusItem.index, {
+        behavior: 'instant',
+        align: 'center',
+        stopInView: true,
+      });
+    }
+
+    setTimeout(() => {
+      if (!alive()) return;
+      setFocusItem((currentItem) => {
+        if (currentItem === focusItem) return undefined;
+        return currentItem;
+      });
+    }, 2000);
+  }, [alive, focusItem, scrollToItem]);
+
+  // scroll to bottom of timeline
+  const scrollToBottomCount = scrollToBottomRef.current.count;
+  useLayoutEffect(() => {
+    if (scrollToBottomCount > 0) {
+      const scrollEl = scrollRef.current;
+      if (scrollEl)
+        scrollToBottom(scrollEl, scrollToBottomRef.current.smooth ? 'smooth' : 'instant');
+    }
+  }, [scrollToBottomCount]);
+
+  // scroll out of view msg editor in view.
+  useEffect(() => {
+    if (editId) {
+      const editMsgElement =
+        (scrollRef.current?.querySelector(`[data-message-id="${editId}"]`) as HTMLElement) ??
+        undefined;
+      if (editMsgElement) {
+        scrollToElement(editMsgElement, {
+          align: 'center',
+          behavior: 'smooth',
+          stopInView: true,
+        });
+      }
+    }
+  }, [scrollToElement, editId]);
+
+  const handleOpenReply: MouseEventHandler = useCallback(async (evt) => {
+    const targetId = evt.currentTarget.getAttribute('data-event-id');
+    if (!targetId) return;
+    console.log(targetId);
+  }, []);
+
+  const handleUserClick = useUserClickHandler();
+  const handleUsernameClick = useUsernameClickHandler(editor);
+  const [replyDraft, handleReplyClick] = useReplyClickHandler(
+    threadTimeline,
+    editor,
+    threadTimeline.threadId
+  );
+
+  const handleReactionToggle = useCallback((targetEventId: string) => {
+    console.log(targetEventId);
+  }, []);
+
+  const handleEdit = useCallback(
+    (editEvtId?: string) => {
+      if (editEvtId) {
+        setEditId(editEvtId);
+        return;
+      }
+      setEditId(undefined);
+      if (editor) {
+        ReactEditor.focus(editor);
+      }
+    },
+    [editor]
+  );
+
+  const renderMatrixEvent = (event: MessageEventWithoutRoomId, item: number, collapse: boolean) => {
+    const reactionEvents = reactions.get(event.event_id)?.filter((r) => !redacted.has(r.event_id));
+    const editEvents = edits.get(event.event_id);
+    const editedEvent = editEvents && getLatestEditEvent(event.sender, editEvents, redacted);
+    const highlighted = focusItem?.index === item && focusItem.highlight;
+
+    const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
+      <Reactions
+        style={{ marginTop: config.space.S200 }}
+        reactions={reactionEvents}
+        eventId={event.event_id}
+        canSendReaction={canSendReaction}
+        onReactionToggle={handleReactionToggle}
+      />
+    );
+
+    const content = editedEvent
+      ? rContent.newContent(editedEvent.content) ?? event.content
+      : event.content;
+
+    return (
+      <Message
+        key={event.event_id}
+        data-message-item={item}
+        data-message-id={event.event_id}
+        data-sender-id={event.sender}
+        event={event}
+        membersAPI={membersAPI}
+        messageSpacing={messageSpacing}
+        messageLayout={messageLayout}
+        collapse={collapse}
+        highlight={highlighted}
+        selected={replyDraft?.eventId === event.event_id}
+        edit={editId === event.event_id}
+        canDelete={canRedact || event.sender === ct.session.userId}
+        canSendReaction={canSendReaction}
+        canPinEvent={canPinEvent}
+        imagePackRooms={imagePackRooms}
+        reactionEvents={reactionEvents && reactionEvents.length > 0 ? reactionEvents : undefined}
+        onUserClick={handleUserClick}
+        onUsernameClick={handleUsernameClick}
+        onReplyClick={handleReplyClick}
+        onReactionToggle={handleReactionToggle}
+        onEditId={handleEdit}
+        redacted={redacted.has(event.event_id)}
+        hideReadReceipts={hideActivity}
+        showDeveloperTools={showDeveloperTools}
+        memberPowerTag={getMemberPowerTag(event.sender)}
+        accessibleTagColors={accessiblePowerTagColors}
+        legacyUsernameColor={legacyUsernameColor || direct}
+        hour24Clock={hour24Clock}
+        dateFormatString={dateFormatString}
+      >
+        <RenderMessageContent
+          displayName={membersAPI.getName(event.sender)}
+          eventType={event.type}
+          ts={event.origin_server_ts}
+          edited={!!editedEvent}
+          content={content}
+          mediaAutoLoad={mediaAutoLoad}
+          urlPreview={showUrlPreview}
+          htmlReactParserOptions={htmlReactParserOptions}
+          linkifyOpts={linkifyOpts}
+          outlineAttachment={messageLayout === MessageLayout.Bubble}
+          redacted={redacted.has(event.event_id)}
+        />
+        {reactionJSX}
+      </Message>
+    );
+  };
+
+  let prevEvent: MessageEventWithoutRoomId | undefined;
+  let isPrevRendered = false;
+  let dayDivider = false;
+
+  const eventRenderer = (item: number) => {
+    const event = events[item];
+
+    if (!event) return null;
+
+    if (event.sender && ignoredUsersSet.has(event.sender)) {
+      return null;
+    }
+    if (redacted.has(event.event_id) && !showHiddenEvents) {
+      return null;
+    }
+
+    if (!dayDivider) {
+      dayDivider = prevEvent
+        ? !inSameDay(prevEvent.origin_server_ts, event.origin_server_ts)
+        : false;
+    }
+
+    const collapsed =
+      isPrevRendered &&
+      !dayDivider &&
+      prevEvent !== undefined &&
+      prevEvent.sender === event.sender &&
+      prevEvent.type === event.type &&
+      minuteDifference(prevEvent.origin_server_ts, event.origin_server_ts) < 2 &&
+      !getReplyId(event.content);
+
+    const eventJSX = renderMatrixEvent(event, item, collapsed);
+    prevEvent = event;
+    isPrevRendered = !!eventJSX;
+
+    const dayDividerJSX =
+      dayDivider && eventJSX ? (
+        <DayDivider ts={event.origin_server_ts} messageSpacing={messageSpacing} />
+      ) : null;
+
+    const replyEventId = getReplyId(event.content);
+
+    const replyJSX =
+      !fallbackReply(event.content) && replyEventId ? (
+        <Reply
+          roomId={roomId}
+          eventId={replyEventId}
+          onClick={handleOpenReply}
+          getMemberPowerTag={getMemberPowerTag}
+          accessibleTagColors={accessiblePowerTagColors}
+          legacyUsernameColor={legacyUsernameColor || direct}
+          redacted={redacted.has(replyEventId)}
+          getMemberName={membersAPI.getName}
+          timeline={threadTimeline}
+          htmlReactParserOptions={htmlReactParserOptions}
+          linkifyOpts={linkifyOpts}
+          hour24Clock={hour24Clock}
+          dateFormatString={dateFormatString}
+          messageLayout={messageLayout}
+          messageSpacing={messageSpacing}
+        />
+      ) : null;
+
+    if (eventJSX && dayDividerJSX) {
+      dayDivider = false;
+
+      return (
+        <React.Fragment key={event.event_id}>
+          {dayDividerJSX}
+          {replyJSX}
+          {eventJSX}
+        </React.Fragment>
+      );
+    }
+
+    if (replyJSX) {
+      return (
+        <React.Fragment key={event.event_id}>
+          {replyJSX}
+          {eventJSX}
+        </React.Fragment>
+      );
+    }
+
+    return eventJSX;
+  };
+
+  return (
+    <FocusTrap
+      paused={!floating}
+      focusTrapOptions={{
+        initialFocus: false,
+        clickOutsideDeactivates: true,
+        onDeactivate: floating ? requestClose : undefined,
+      }}
+    >
+      <Page
+        className={classNames(css.ThreadView, {
+          [css.ThreadViewFloating]: floating,
+        })}
+      >
+        <PageHeader>
+          <Box grow="Yes" alignItems="Center" gap="200">
+            <Box grow="Yes">
+              <Text size="H5" truncate>
+                Thread
+              </Text>
+            </Box>
+            <Box shrink="No" alignItems="Center">
+              <TooltipProvider
+                position="Bottom"
+                align="End"
+                offset={4}
+                tooltip={
+                  <Tooltip>
+                    <Text>Close</Text>
+                  </Tooltip>
+                }
+              >
+                {(triggerRef) => (
+                  <IconButton ref={triggerRef} variant="Surface" onClick={requestClose}>
+                    <Icon src={Icons.Cross} />
+                  </IconButton>
+                )}
+              </TooltipProvider>
+            </Box>
+          </Box>
+        </PageHeader>
+
+        <Box grow="Yes" style={{ position: 'relative' }}>
+          <Scroll ref={scrollRef} visibility="Hover">
+            <Box
+              direction="Column"
+              justifyContent="End"
+              style={{ minHeight: '100%', padding: `${config.space.S600} 0` }}
+            >
+              {!messageBatch.prev.end || !rangeAtStart ? (
+                <PlaceholderList
+                  ref={observeBackAnchor}
+                  count={5}
+                  Placeholder={
+                    messageLayout === MessageLayout.Compact
+                      ? CompactPlaceholder
+                      : DefaultPlaceholder
+                  }
+                />
+              ) : (
+                <MessageBase space={messageSpacing}>
+                  <TimelineDivider variant="Surface">
+                    <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
+                      <Text size="L400">Replies</Text>
+                    </Badge>
+                  </TimelineDivider>
+                </MessageBase>
+              )}
+              {getItems().map(eventRenderer)}
+              {(!messageBatch.next.end || !rangeAtEnd) && (
+                <PlaceholderList
+                  ref={observeFrontAnchor}
+                  count={5}
+                  Placeholder={
+                    messageLayout === MessageLayout.Compact
+                      ? CompactPlaceholder
+                      : DefaultPlaceholder
+                  }
+                />
+              )}
+              <span ref={atBottomAnchorRef} />
+            </Box>
+            <Box shrink="No" direction="Column" style={{ padding: `0 ${config.space.S400}` }}>
+              <RoomInput
+                editor={editor}
+                fileDropContainerRef={roomViewRef}
+                ref={roomInputRef}
+                threadId={threadTimeline.threadId}
+              />
+              <RoomViewFollowingPlaceholder />
+            </Box>
+          </Scroll>
+          {!atBottom && (
+            <TimelineFloat position="Bottom">
+              <JumpToLatestButton getScrollElement={getScrollElement} />
+            </TimelineFloat>
+          )}
+        </Box>
+      </Page>
+    </FocusTrap>
+  );
+}
diff --git a/src/app/features/room/thread-view/index.ts b/src/app/features/room/thread-view/index.ts
new file mode 100644
index 00000000..6ba05aab
--- /dev/null
+++ b/src/app/features/room/thread-view/index.ts
@@ -0,0 +1 @@
+export * from './ThreadView';
diff --git a/src/app/features/room/thread-view/styles.css.ts b/src/app/features/room/thread-view/styles.css.ts
new file mode 100644
index 00000000..5709c58f
--- /dev/null
+++ b/src/app/features/room/thread-view/styles.css.ts
@@ -0,0 +1,22 @@
+import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
+
+export const ThreadView = style({
+  // width: toRem(456),
+  width: toRem(496),
+  flexShrink: 0,
+  flexGrow: 0,
+});
+
+export const ThreadViewFloating = style({
+  position: 'absolute',
+  right: 0,
+  top: 0,
+  bottom: 0,
+  zIndex: 1,
+
+  maxWidth: toRem(496),
+  flexShrink: 1,
+  width: '100vw',
+  boxShadow: config.shadow.E400,
+});
diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx
index 5e1a20f4..a4d879e8 100644
--- a/src/app/features/settings/Settings.tsx
+++ b/src/app/features/settings/Settings.tsx
@@ -20,8 +20,7 @@ import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '../../componen
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { Account } from './account';
 import { useUserProfile } from '../../hooks/useUserProfile';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
+import { getMxIdLocalPart } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { UserAvatar } from '../../components/user-avatar';
 import { nameInitials } from '../../utils/common';
@@ -33,6 +32,8 @@ import { About } from './about';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { stopPropagation } from '../../utils/keyboard';
 import { LogoutDialog } from '../../components/LogoutDialog';
+import { useClient } from '../../hooks/useClient';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 export enum SettingsPages {
   GeneralPage,
@@ -97,13 +98,17 @@ type SettingsProps = {
   requestClose: () => void;
 };
 export function Settings({ initialPage, requestClose }: SettingsProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const userId = mx.getUserId()!;
+  const { userId } = ct.session;
   const profile = useUserProfile(userId);
-  const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
-  const avatarUrl = profile.avatarUrl
-    ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
+  const displayName = profile?.displayName ?? getMxIdLocalPart(userId) ?? userId;
+  const avatarUrl = profile?.avatarUrl
+    ? mxcToHttp(ct.session.baseUrl, profile.avatarUrl, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
   const screenSize = useScreenSizeContext();
diff --git a/src/app/features/settings/account/ContactInfo.tsx b/src/app/features/settings/account/ContactInfo.tsx
index cfde7e29..6449ddd7 100644
--- a/src/app/features/settings/account/ContactInfo.tsx
+++ b/src/app/features/settings/account/ContactInfo.tsx
@@ -1,15 +1,22 @@
 import React, { useCallback, useEffect } from 'react';
 import { Box, Text, Chip } from 'folds';
+import { get3pid, Get3pidOK } from 'neurone/lib/api/matrix/client/v3/account';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useClient } from '../../../hooks/useClient';
 
 export function ContactInformation() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [threePIdsState, loadThreePIds] = useAsyncCallback(
-    useCallback(() => mx.getThreePids(), [mx])
+    useCallback(async () => {
+      const response = await ct.requestAuthJSON(get3pid({}));
+      const [err, result] = await parseMatrixResp<Get3pidOK>(response);
+      if (err) throw new Error(printMatrixError(err));
+      return result;
+    }, [ct])
   );
   const threePIds =
     threePIdsState.status === AsyncStatus.Success ? threePIdsState.data.threepids : undefined;
diff --git a/src/app/features/settings/account/IgnoredUserList.tsx b/src/app/features/settings/account/IgnoredUserList.tsx
index 98db9459..89f0c10c 100644
--- a/src/app/features/settings/account/IgnoredUserList.tsx
+++ b/src/app/features/settings/account/IgnoredUserList.tsx
@@ -1,25 +1,31 @@
 import React, { ChangeEventHandler, FormEventHandler, useCallback, useState } from 'react';
 import { Box, Button, Chip, Icon, IconButton, Icons, Input, Spinner, Text, config } from 'folds';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { isUserId } from '../../../utils/matrix';
-import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
+import { getIgnoredUsersContent, useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
 import { useAlive } from '../../../hooks/useAlive';
+import { useClient } from '../../../hooks/useClient';
+import { AccountDataType } from '../../../../types/matrix/accountData';
 
 function IgnoreUserInput({ userList }: { userList: string[] }) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [userId, setUserId] = useState<string>('');
   const alive = useAlive();
 
   const [ignoreState, ignore] = useAsyncCallback(
     useCallback(
-      async (uId: string) => {
-        await mx.setIgnoredUsers([...userList, uId]);
-      },
-      [mx, userList]
+      (uId: string) =>
+        ct.requestAuthJSON(
+          putAccountData({
+            pathParams: { userId: ct.session.userId, type: AccountDataType.IgnoredUserList },
+            body: getIgnoredUsersContent(userList.filter((id) => id !== uId).concat([uId])),
+          })
+        ),
+      [ct, userList]
     )
   );
   const ignoring = ignoreState.status === AsyncStatus.Loading;
@@ -96,11 +102,17 @@ function IgnoreUserInput({ userList }: { userList: string[] }) {
 }
 
 function IgnoredUserChip({ userId, userList }: { userId: string; userList: string[] }) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [unignoreState, unignore] = useAsyncCallback(
     useCallback(
-      () => mx.setIgnoredUsers(userList.filter((uId) => uId !== userId)),
-      [mx, userId, userList]
+      async () =>
+        ct.requestAuthJSON(
+          putAccountData({
+            pathParams: { userId: ct.session.userId, type: AccountDataType.IgnoredUserList },
+            body: getIgnoredUsersContent(userList.filter((u) => u !== userId)),
+          })
+        ),
+      [ct, userList, userId]
     )
   );
 
diff --git a/src/app/features/settings/account/MatrixId.tsx b/src/app/features/settings/account/MatrixId.tsx
index 0c06a75d..bb02510e 100644
--- a/src/app/features/settings/account/MatrixId.tsx
+++ b/src/app/features/settings/account/MatrixId.tsx
@@ -1,14 +1,14 @@
 import React from 'react';
 import { Box, Text, Chip } from 'folds';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { copyToClipboard } from '../../../utils/dom';
+import { useClient } from '../../../hooks/useClient';
 
 export function MatrixId() {
-  const mx = useMatrixClient();
-  const userId = mx.getUserId()!;
+  const ct = useClient();
+  const { userId } = ct.session;
 
   return (
     <Box direction="Column" gap="100">
diff --git a/src/app/features/settings/account/Profile.tsx b/src/app/features/settings/account/Profile.tsx
index e982a799..a29c239d 100644
--- a/src/app/features/settings/account/Profile.tsx
+++ b/src/app/features/settings/account/Profile.tsx
@@ -25,12 +25,12 @@ import {
   Spinner,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
+import { putAvatarUrl, putDisplayname } from 'neurone/lib/api/matrix/client/v3/profile';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { UserProfile, useUserProfile } from '../../../hooks/useUserProfile';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
+import { getMxIdLocalPart } from '../../../utils/matrix';
 import { UserAvatar } from '../../../components/user-avatar';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { nameInitials } from '../../../utils/common';
@@ -43,21 +43,27 @@ import { ModalWide } from '../../../styles/Modal.css';
 import { createUploadAtom, UploadSuccess } from '../../../state/upload';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { useCapabilities } from '../../../hooks/useCapabilities';
+import { useClient } from '../../../hooks/useClient';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
 
 type ProfileProps = {
-  profile: UserProfile;
+  profile?: UserProfile;
   userId: string;
 };
 function ProfileAvatar({ profile, userId }: ProfileProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const capabilities = useCapabilities();
   const [alertRemove, setAlertRemove] = useState(false);
   const disableSetAvatar = capabilities['m.set_avatar_url']?.enabled === false;
 
-  const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
-  const avatarUrl = profile.avatarUrl
-    ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
+  const defaultDisplayName = profile?.displayName ?? getMxIdLocalPart(userId) ?? userId;
+  const avatarUrl = profile?.avatarUrl
+    ? mxcToHttp(ct.session.baseUrl, profile.avatarUrl, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
   const [imageFile, setImageFile] = useState<File>();
@@ -76,14 +82,14 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
   const handleUploaded = useCallback(
     (upload: UploadSuccess) => {
       const { mxc } = upload;
-      mx.setAvatarUrl(mxc);
+      ct.requestAuthJSON(putAvatarUrl({ pathParams: { userId }, body: { avatar_url: mxc } }));
       handleRemoveUpload();
     },
-    [mx, handleRemoveUpload]
+    [ct, userId, handleRemoveUpload]
   );
 
   const handleRemoveAvatar = () => {
-    mx.setAvatarUrl('');
+    ct.requestAuthJSON(putAvatarUrl({ pathParams: { userId }, body: { avatar_url: '' } }));
     setAlertRemove(false);
   };
 
@@ -206,15 +212,19 @@ function ProfileAvatar({ profile, userId }: ProfileProps) {
 }
 
 function ProfileDisplayName({ profile, userId }: ProfileProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const capabilities = useCapabilities();
   const disableSetDisplayname = capabilities['m.set_displayname']?.enabled === false;
 
-  const defaultDisplayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
+  const defaultDisplayName = profile?.displayName ?? getMxIdLocalPart(userId) ?? userId;
   const [displayName, setDisplayName] = useState<string>(defaultDisplayName);
 
   const [changeState, changeDisplayName] = useAsyncCallback(
-    useCallback((name: string) => mx.setDisplayName(name), [mx])
+    useCallback(
+      (name: string) =>
+        ct.requestAuthJSON(putDisplayname({ pathParams: { userId }, body: { displayname: name } })),
+      [ct, userId]
+    )
   );
   const changingDisplayName = changeState.status === AsyncStatus.Loading;
 
@@ -304,8 +314,8 @@ function ProfileDisplayName({ profile, userId }: ProfileProps) {
 }
 
 export function Profile() {
-  const mx = useMatrixClient();
-  const userId = mx.getUserId()!;
+  const ct = useClient();
+  const { userId } = ct.session;
   const profile = useUserProfile(userId);
 
   return (
diff --git a/src/app/features/settings/notifications/AllMessages.tsx b/src/app/features/settings/notifications/AllMessages.tsx
index 301cb9a7..bcf3589e 100644
--- a/src/app/features/settings/notifications/AllMessages.tsx
+++ b/src/app/features/settings/notifications/AllMessages.tsx
@@ -1,8 +1,8 @@
 import React, { useCallback, useMemo } from 'react';
 import { Badge, Box, Text } from 'folds';
-import { ConditionKind, IPushRules, PushRuleCondition, PushRuleKind, RuleId } from 'matrix-js-sdk';
-import { useAccountData } from '../../../hooks/useAccountData';
-import { AccountDataEvent } from '../../../../types/matrix/accountData';
+import { PushRuleCondition, PushRules } from 'neurone/lib/api/types';
+import { putPushRuleActions } from 'neurone/lib/api/matrix/client/v3/pushrules';
+import { AccountDataType, ConditionKind, PushRuleId } from '../../../../types/matrix/accountData';
 import { NotificationModeSwitcher } from './NotificationModeSwitcher';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
@@ -13,10 +13,11 @@ import {
   NotificationMode,
   useNotificationModeActions,
 } from '../../../hooks/useNotificationMode';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useClient } from '../../../hooks/useClient';
+import { useAccountData } from '../../../hooks/storage/useAccountData';
 
 const getAllMessageDefaultRule = (
-  ruleId: RuleId,
+  ruleId: PushRuleId,
   encrypted: boolean,
   oneToOne: boolean
 ): PushRuleData => {
@@ -33,7 +34,7 @@ const getAllMessageDefaultRule = (
   });
 
   return {
-    kind: PushRuleKind.Underride,
+    kind: 'underride',
     pushRule: {
       rule_id: ruleId,
       default: true,
@@ -45,8 +46,8 @@ const getAllMessageDefaultRule = (
 };
 
 type PushRulesProps = {
-  ruleId: RuleId.DM | RuleId.EncryptedDM | RuleId.Message | RuleId.EncryptedMessage;
-  pushRules: IPushRules;
+  ruleId: PushRuleId.DM | PushRuleId.EncryptedDM | PushRuleId.Message | PushRuleId.EncryptedMessage;
+  pushRules: PushRules;
   encrypted?: boolean;
   oneToOne?: boolean;
 };
@@ -56,7 +57,7 @@ function AllMessagesModeSwitcher({
   encrypted = false,
   oneToOne = false,
 }: PushRulesProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const defaultPushRuleData = getAllMessageDefaultRule(ruleId, encrypted, oneToOne);
   const { kind, pushRule } = usePushRule(pushRules, ruleId) ?? defaultPushRuleData;
   const getModeActions = useNotificationModeActions();
@@ -64,20 +65,26 @@ function AllMessagesModeSwitcher({
   const handleChange = useCallback(
     async (mode: NotificationMode) => {
       const actions = getModeActions(mode);
-      await mx.setPushRuleActions('global', kind, ruleId, actions);
+      await ct.requestAuthJSON(
+        putPushRuleActions({
+          pathParams: { scope: 'global', kind, ruleId },
+          body: { actions },
+        })
+      );
     },
-    [mx, getModeActions, kind, ruleId]
+    [ct, getModeActions, kind, ruleId]
   );
 
   return <NotificationModeSwitcher pushRule={pushRule} onChange={handleChange} />;
 }
 
 export function AllMessagesNotifications() {
-  const pushRulesEvt = useAccountData(AccountDataEvent.PushRules);
-  const pushRules = useMemo(
-    () => pushRulesEvt?.getContent<IPushRules>() ?? { global: {} },
-    [pushRulesEvt]
-  );
+  const pushRuleEventResult = useAccountData(AccountDataType.PushRules);
+  const pushRules: PushRules | undefined = useMemo(() => {
+    if (pushRuleEventResult.pending) return undefined;
+    const content = pushRuleEventResult.value?.content as PushRules;
+    return content ?? { global: {} };
+  }, [pushRuleEventResult]);
 
   return (
     <Box direction="Column" gap="100">
@@ -98,7 +105,11 @@ export function AllMessagesNotifications() {
       >
         <SettingTile
           title="1-to-1 Chats"
-          after={<AllMessagesModeSwitcher pushRules={pushRules} ruleId={RuleId.DM} oneToOne />}
+          after={
+            pushRules && (
+              <AllMessagesModeSwitcher pushRules={pushRules} ruleId={PushRuleId.DM} oneToOne />
+            )
+          }
         />
       </SequenceCard>
       <SequenceCard
@@ -110,12 +121,14 @@ export function AllMessagesNotifications() {
         <SettingTile
           title="1-to-1 Chats (Encrypted)"
           after={
-            <AllMessagesModeSwitcher
-              pushRules={pushRules}
-              ruleId={RuleId.EncryptedDM}
-              encrypted
-              oneToOne
-            />
+            pushRules && (
+              <AllMessagesModeSwitcher
+                pushRules={pushRules}
+                ruleId={PushRuleId.EncryptedDM}
+                encrypted
+                oneToOne
+              />
+            )
           }
         />
       </SequenceCard>
@@ -127,7 +140,11 @@ export function AllMessagesNotifications() {
       >
         <SettingTile
           title="Rooms"
-          after={<AllMessagesModeSwitcher pushRules={pushRules} ruleId={RuleId.Message} />}
+          after={
+            pushRules && (
+              <AllMessagesModeSwitcher pushRules={pushRules} ruleId={PushRuleId.Message} />
+            )
+          }
         />
       </SequenceCard>
       <SequenceCard
@@ -139,11 +156,13 @@ export function AllMessagesNotifications() {
         <SettingTile
           title="Rooms (Encrypted)"
           after={
-            <AllMessagesModeSwitcher
-              pushRules={pushRules}
-              ruleId={RuleId.EncryptedMessage}
-              encrypted
-            />
+            pushRules && (
+              <AllMessagesModeSwitcher
+                pushRules={pushRules}
+                ruleId={PushRuleId.EncryptedMessage}
+                encrypted
+              />
+            )
           }
         />
       </SequenceCard>
diff --git a/src/app/features/settings/notifications/KeywordMessages.tsx b/src/app/features/settings/notifications/KeywordMessages.tsx
index 7f84d607..259736c8 100644
--- a/src/app/features/settings/notifications/KeywordMessages.tsx
+++ b/src/app/features/settings/notifications/KeywordMessages.tsx
@@ -1,12 +1,16 @@
 import React, { ChangeEventHandler, FormEventHandler, useCallback, useMemo, useState } from 'react';
-import { IPushRule, IPushRules, PushRuleKind } from 'matrix-js-sdk';
 import { Box, Text, Badge, Button, Input, config, IconButton, Icons, Icon, Spinner } from 'folds';
-import { useAccountData } from '../../../hooks/useAccountData';
-import { AccountDataEvent } from '../../../../types/matrix/accountData';
+import {
+  deletePushRule,
+  putPushRule,
+  putPushRuleActions,
+} from 'neurone/lib/api/matrix/client/v3/pushrules';
+import { PushRule, PushRules } from 'neurone/lib/api/types';
+import { useAccountData } from '../../../hooks/storage/useAccountData';
+import { AccountDataType } from '../../../../types/matrix/accountData';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import {
   getNotificationModeActions,
   NotificationMode,
@@ -15,25 +19,31 @@ import {
 } from '../../../hooks/useNotificationMode';
 import { NotificationModeSwitcher } from './NotificationModeSwitcher';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
+import { useClient } from '../../../hooks/useClient';
 
 const NOTIFY_MODE_OPS: NotificationModeOptions = {
   highlight: true,
 };
 
 function KeywordInput() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [keyword, setKeyword] = useState<string>('');
 
   const [keywordState, addKeyword] = useAsyncCallback(
     useCallback(
       async (k: string) => {
-        mx.addPushRule('global', PushRuleKind.ContentSpecific, k, {
-          actions: getNotificationModeActions(NotificationMode.Notify, NOTIFY_MODE_OPS),
-          pattern: k,
-        });
+        await ct.requestAuthJSON(
+          putPushRule({
+            pathParams: { scope: 'global', kind: 'content', ruleId: k },
+            body: {
+              actions: getNotificationModeActions(NotificationMode.Notify, NOTIFY_MODE_OPS),
+              pattern: k,
+            },
+          })
+        );
         setKeyword('');
       },
-      [mx]
+      [ct]
     )
   );
   const addingKeyword = keywordState.status === AsyncStatus.Loading;
@@ -104,15 +114,20 @@ function KeywordInput() {
 }
 
 type PushRulesProps = {
-  pushRule: IPushRule;
+  pushRule: PushRule;
 };
 
 function KeywordCross({ pushRule }: PushRulesProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [removeState, remove] = useAsyncCallback(
     useCallback(
-      () => mx.deletePushRule('global', PushRuleKind.ContentSpecific, pushRule.rule_id),
-      [mx, pushRule]
+      () =>
+        ct.requestAuthJSON(
+          deletePushRule({
+            pathParams: { scope: 'global', kind: 'content', ruleId: pushRule.rule_id },
+          })
+        ),
+      [ct, pushRule]
     )
   );
 
@@ -125,35 +140,38 @@ function KeywordCross({ pushRule }: PushRulesProps) {
 }
 
 function KeywordModeSwitcher({ pushRule }: PushRulesProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
   const getModeActions = useNotificationModeActions(NOTIFY_MODE_OPS);
 
   const handleChange = useCallback(
     async (mode: NotificationMode) => {
       const actions = getModeActions(mode);
-      await mx.setPushRuleActions(
-        'global',
-        PushRuleKind.ContentSpecific,
-        pushRule.rule_id,
-        actions
+      await ct.requestAuthJSON(
+        putPushRuleActions({
+          pathParams: { scope: 'global', kind: 'content', ruleId: pushRule.rule_id },
+          body: {
+            actions,
+          },
+        })
       );
     },
-    [mx, getModeActions, pushRule]
+    [ct, getModeActions, pushRule]
   );
 
   return <NotificationModeSwitcher pushRule={pushRule} onChange={handleChange} />;
 }
 
 export function KeywordMessagesNotifications() {
-  const pushRulesEvt = useAccountData(AccountDataEvent.PushRules);
-  const pushRules = useMemo(
-    () => pushRulesEvt?.getContent<IPushRules>() ?? { global: {} },
-    [pushRulesEvt]
-  );
+  const pushRuleEventResult = useAccountData(AccountDataType.PushRules);
+  const pushRules: PushRules | undefined = useMemo(() => {
+    if (pushRuleEventResult.pending) return undefined;
+    const content = pushRuleEventResult.value?.content as PushRules;
+    return content ?? { global: {} };
+  }, [pushRuleEventResult]);
 
   const keywordPushRules = useMemo(() => {
-    const content = pushRules.global.content ?? [];
+    const content = pushRules?.global.content ?? [];
     return content.filter(
       (pushRule) => pushRule.default === false && typeof pushRule.pattern === 'string'
     );
diff --git a/src/app/features/settings/notifications/NotificationModeSwitcher.tsx b/src/app/features/settings/notifications/NotificationModeSwitcher.tsx
index fe008390..9e353d6f 100644
--- a/src/app/features/settings/notifications/NotificationModeSwitcher.tsx
+++ b/src/app/features/settings/notifications/NotificationModeSwitcher.tsx
@@ -11,9 +11,9 @@ import {
   Spinner,
   Text,
 } from 'folds';
-import { IPushRule } from 'matrix-js-sdk';
 import React, { MouseEventHandler, useMemo, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
+import { PushRule } from 'neurone/lib/api/types';
 import { NotificationMode, useNotificationActionsMode } from '../../../hooks/useNotificationMode';
 import { stopPropagation } from '../../../utils/keyboard';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -32,7 +32,7 @@ const useNotificationModeStr = (): Record<NotificationMode, string> =>
   );
 
 type NotificationModeSwitcherProps = {
-  pushRule: IPushRule;
+  pushRule: PushRule;
   onChange: (mode: NotificationMode) => Promise<void>;
 };
 export function NotificationModeSwitcher({ pushRule, onChange }: NotificationModeSwitcherProps) {
diff --git a/src/app/features/settings/notifications/SpecialMessages.tsx b/src/app/features/settings/notifications/SpecialMessages.tsx
index cbebf648..edea496b 100644
--- a/src/app/features/settings/notifications/SpecialMessages.tsx
+++ b/src/app/features/settings/notifications/SpecialMessages.tsx
@@ -1,12 +1,12 @@
 import React, { useCallback, useMemo } from 'react';
-import { ConditionKind, IPushRules, PushRuleKind, RuleId } from 'matrix-js-sdk';
 import { Box, Text, Badge } from 'folds';
-import { useAccountData } from '../../../hooks/useAccountData';
-import { AccountDataEvent } from '../../../../types/matrix/accountData';
+import { PushRules } from 'neurone/lib/api/types';
+import { putPushRuleActions } from 'neurone/lib/api/matrix/client/v3/pushrules';
+import { useAccountData } from '../../../hooks/storage/useAccountData';
+import { AccountDataType, ConditionKind, PushRuleId } from '../../../../types/matrix/accountData';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useUserProfile } from '../../../hooks/useUserProfile';
 import { getMxIdLocalPart } from '../../../utils/matrix';
 import { makePushRuleData, PushRuleData, usePushRule } from '../../../hooks/usePushRule';
@@ -17,14 +17,15 @@ import {
   useNotificationModeActions,
 } from '../../../hooks/useNotificationMode';
 import { NotificationModeSwitcher } from './NotificationModeSwitcher';
+import { useClient } from '../../../hooks/useClient';
 
 const NOTIFY_MODE_OPS: NotificationModeOptions = {
   highlight: true,
 };
 const getDefaultIsUserMention = (userId: string): PushRuleData =>
   makePushRuleData(
-    PushRuleKind.Override,
-    RuleId.IsUserMention,
+    'override',
+    PushRuleId.IsUserMention,
     getNotificationModeActions(NotificationMode.NotifyLoud, { highlight: true }),
     [
       {
@@ -36,8 +37,8 @@ const getDefaultIsUserMention = (userId: string): PushRuleData =>
   );
 
 const DefaultContainsDisplayName = makePushRuleData(
-  PushRuleKind.Override,
-  RuleId.ContainsDisplayName,
+  'override',
+  PushRuleId.ContainsDisplayName,
   getNotificationModeActions(NotificationMode.NotifyLoud, { highlight: true }),
   [
     {
@@ -48,16 +49,16 @@ const DefaultContainsDisplayName = makePushRuleData(
 
 const getDefaultContainsUsername = (username: string) =>
   makePushRuleData(
-    PushRuleKind.ContentSpecific,
-    RuleId.ContainsUserName,
+    'content',
+    PushRuleId.ContainsUserName,
     getNotificationModeActions(NotificationMode.NotifyLoud, { highlight: true }),
     undefined,
     username
   );
 
 const DefaultIsRoomMention = makePushRuleData(
-  PushRuleKind.Override,
-  RuleId.IsRoomMention,
+  'override',
+  PushRuleId.IsRoomMention,
   getNotificationModeActions(NotificationMode.Notify, { highlight: true }),
   [
     {
@@ -73,8 +74,8 @@ const DefaultIsRoomMention = makePushRuleData(
 );
 
 const DefaultAtRoomNotification = makePushRuleData(
-  PushRuleKind.Override,
-  RuleId.AtRoomNotification,
+  'override',
+  PushRuleId.AtRoomNotification,
   getNotificationModeActions(NotificationMode.Notify, { highlight: true }),
   [
     {
@@ -90,12 +91,12 @@ const DefaultAtRoomNotification = makePushRuleData(
 );
 
 type PushRulesProps = {
-  ruleId: RuleId;
-  pushRules: IPushRules;
+  ruleId: PushRuleId;
+  pushRules: PushRules;
   defaultPushRuleData: PushRuleData;
 };
 function MentionModeSwitcher({ ruleId, pushRules, defaultPushRuleData }: PushRulesProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
   const { kind, pushRule } = usePushRule(pushRules, ruleId) ?? defaultPushRuleData;
   const getModeActions = useNotificationModeActions(NOTIFY_MODE_OPS);
@@ -103,23 +104,30 @@ function MentionModeSwitcher({ ruleId, pushRules, defaultPushRuleData }: PushRul
   const handleChange = useCallback(
     async (mode: NotificationMode) => {
       const actions = getModeActions(mode);
-      await mx.setPushRuleActions('global', kind, ruleId, actions);
+      await ct.requestAuthJSON(
+        putPushRuleActions({
+          pathParams: { scope: 'global', kind, ruleId },
+          body: { actions },
+        })
+      );
     },
-    [mx, getModeActions, kind, ruleId]
+    [ct, getModeActions, kind, ruleId]
   );
 
   return <NotificationModeSwitcher pushRule={pushRule} onChange={handleChange} />;
 }
 
 export function SpecialMessagesNotifications() {
-  const mx = useMatrixClient();
-  const userId = mx.getUserId()!;
-  const { displayName } = useUserProfile(userId);
-  const pushRulesEvt = useAccountData(AccountDataEvent.PushRules);
-  const pushRules = useMemo(
-    () => pushRulesEvt?.getContent<IPushRules>() ?? { global: {} },
-    [pushRulesEvt]
-  );
+  const ct = useClient();
+  const { userId } = ct.session;
+  const { displayName } = useUserProfile(userId) ?? {};
+
+  const pushRuleEventResult = useAccountData(AccountDataType.PushRules);
+  const pushRules: PushRules | undefined = useMemo(() => {
+    if (pushRuleEventResult.pending) return undefined;
+    const content = pushRuleEventResult.value?.content as PushRules;
+    return content ?? { global: {} };
+  }, [pushRuleEventResult]);
 
   return (
     <Box direction="Column" gap="100">
@@ -141,11 +149,13 @@ export function SpecialMessagesNotifications() {
         <SettingTile
           title={`Mention User ID ("${userId}")`}
           after={
-            <MentionModeSwitcher
-              pushRules={pushRules}
-              ruleId={RuleId.IsUserMention}
-              defaultPushRuleData={getDefaultIsUserMention(userId)}
-            />
+            pushRules && (
+              <MentionModeSwitcher
+                pushRules={pushRules}
+                ruleId={PushRuleId.IsUserMention}
+                defaultPushRuleData={getDefaultIsUserMention(userId)}
+              />
+            )
           }
         />
       </SequenceCard>
@@ -158,11 +168,13 @@ export function SpecialMessagesNotifications() {
         <SettingTile
           title={`Contains Displayname ${displayName ? `("${displayName}")` : ''}`}
           after={
-            <MentionModeSwitcher
-              pushRules={pushRules}
-              ruleId={RuleId.ContainsDisplayName}
-              defaultPushRuleData={DefaultContainsDisplayName}
-            />
+            pushRules && (
+              <MentionModeSwitcher
+                pushRules={pushRules}
+                ruleId={PushRuleId.ContainsDisplayName}
+                defaultPushRuleData={DefaultContainsDisplayName}
+              />
+            )
           }
         />
       </SequenceCard>
@@ -175,11 +187,13 @@ export function SpecialMessagesNotifications() {
         <SettingTile
           title={`Contains Username ("${getMxIdLocalPart(userId)}")`}
           after={
-            <MentionModeSwitcher
-              pushRules={pushRules}
-              ruleId={RuleId.ContainsUserName}
-              defaultPushRuleData={getDefaultContainsUsername(getMxIdLocalPart(userId) ?? userId)}
-            />
+            pushRules && (
+              <MentionModeSwitcher
+                pushRules={pushRules}
+                ruleId={PushRuleId.ContainsUserName}
+                defaultPushRuleData={getDefaultContainsUsername(getMxIdLocalPart(userId) ?? userId)}
+              />
+            )
           }
         />
       </SequenceCard>
@@ -192,11 +206,13 @@ export function SpecialMessagesNotifications() {
         <SettingTile
           title="Mention @room"
           after={
-            <MentionModeSwitcher
-              pushRules={pushRules}
-              ruleId={RuleId.IsRoomMention}
-              defaultPushRuleData={DefaultIsRoomMention}
-            />
+            pushRules && (
+              <MentionModeSwitcher
+                pushRules={pushRules}
+                ruleId={PushRuleId.IsRoomMention}
+                defaultPushRuleData={DefaultIsRoomMention}
+              />
+            )
           }
         />
       </SequenceCard>
@@ -209,11 +225,13 @@ export function SpecialMessagesNotifications() {
         <SettingTile
           title="Contains @room"
           after={
-            <MentionModeSwitcher
-              pushRules={pushRules}
-              ruleId={RuleId.AtRoomNotification}
-              defaultPushRuleData={DefaultAtRoomNotification}
-            />
+            pushRules && (
+              <MentionModeSwitcher
+                pushRules={pushRules}
+                ruleId={PushRuleId.AtRoomNotification}
+                defaultPushRuleData={DefaultAtRoomNotification}
+              />
+            )
           }
         />
       </SequenceCard>
diff --git a/src/app/features/settings/notifications/SystemNotification.tsx b/src/app/features/settings/notifications/SystemNotification.tsx
index e0df06df..11c077ff 100644
--- a/src/app/features/settings/notifications/SystemNotification.tsx
+++ b/src/app/features/settings/notifications/SystemNotification.tsx
@@ -1,6 +1,7 @@
 import React, { useCallback } from 'react';
 import { Box, Text, Switch, Button, color, Spinner } from 'folds';
-import { IPusherRequest } from 'matrix-js-sdk';
+import { postPushersSet } from 'neurone/lib/api/matrix/client/v3/pushers';
+import { PusherData } from 'neurone/lib/api/types';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
@@ -9,37 +10,45 @@ import { settingsAtom } from '../../../state/settings';
 import { getNotificationState, usePermissionState } from '../../../hooks/usePermission';
 import { useEmailNotifications } from '../../../hooks/useEmailNotifications';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useClient } from '../../../hooks/useClient';
 
 function EmailNotification() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [result, refreshResult] = useEmailNotifications();
 
   const [setState, setEnable] = useAsyncCallback(
     useCallback(
       async (email: string, enable: boolean) => {
         if (enable) {
-          await mx.setPusher({
-            kind: 'email',
-            app_id: 'm.email',
-            pushkey: email,
-            app_display_name: 'Email Notifications',
-            device_display_name: email,
-            lang: 'en',
-            data: {
-              brand: 'Cinny',
-            },
-            append: true,
-          });
+          await ct.requestAuthJSON(
+            postPushersSet({
+              body: {
+                kind: 'email',
+                app_id: 'm.email',
+                pushkey: email,
+                app_display_name: 'Email Notifications',
+                device_display_name: email,
+                lang: 'en',
+                data: {
+                  brand: 'Cinny', // brand field is not in spec.
+                } as PusherData,
+                append: true,
+              },
+            })
+          );
           return;
         }
-        await mx.setPusher({
-          pushkey: email,
-          app_id: 'm.email',
-          kind: null,
-        } as unknown as IPusherRequest);
+        await ct.requestAuthJSON(
+          postPushersSet({
+            body: {
+              pushkey: email,
+              app_id: 'm.email',
+              kind: null,
+            },
+          })
+        );
       },
-      [mx]
+      [ct]
     )
   );
 
diff --git a/src/app/hooks/router/useSelectedRoom.ts b/src/app/hooks/router/useSelectedRoom.ts
index 6d0ee4f1..8358aeb0 100644
--- a/src/app/hooks/router/useSelectedRoom.ts
+++ b/src/app/hooks/router/useSelectedRoom.ts
@@ -1,15 +1,15 @@
 import { useParams } from 'react-router-dom';
-import { getCanonicalAliasRoomId, isRoomAlias } from '../../utils/matrix';
-import { useMatrixClient } from '../useMatrixClient';
+import { isRoomAlias } from '../../utils/matrix';
+import { useClient } from '../useClient';
 
 export const useSelectedRoom = (): string | undefined => {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
   const { roomIdOrAlias } = useParams();
-  const roomId =
-    roomIdOrAlias && isRoomAlias(roomIdOrAlias)
-      ? getCanonicalAliasRoomId(mx, roomIdOrAlias)
-      : roomIdOrAlias;
 
-  return roomId;
+  if (roomIdOrAlias && isRoomAlias(roomIdOrAlias)) {
+    return ct.rooms.join.read.find((roomId) => ct.roomToAlias.read.get(roomId) === roomIdOrAlias);
+  }
+
+  return roomIdOrAlias;
 };
diff --git a/src/app/hooks/router/useSelectedSpace.ts b/src/app/hooks/router/useSelectedSpace.ts
index 2e8e73a0..dce85948 100644
--- a/src/app/hooks/router/useSelectedSpace.ts
+++ b/src/app/hooks/router/useSelectedSpace.ts
@@ -1,17 +1,23 @@
 import { useMatch, useParams } from 'react-router-dom';
-import { getCanonicalAliasRoomId, isRoomAlias } from '../../utils/matrix';
-import { useMatrixClient } from '../useMatrixClient';
+import { isRoomAlias } from '../../utils/matrix';
 import { getSpaceLobbyPath, getSpaceSearchPath } from '../../pages/pathUtils';
+import { useClient } from '../useClient';
+import { useObservableValue } from '../useObservableValue';
 
 export const useSelectedSpace = (): string | undefined => {
-  const mx = useMatrixClient();
-
+  const ct = useClient();
   const { spaceIdOrAlias } = useParams();
 
-  const spaceId =
-    spaceIdOrAlias && isRoomAlias(spaceIdOrAlias)
-      ? getCanonicalAliasRoomId(mx, spaceIdOrAlias)
-      : spaceIdOrAlias;
+  const roomToAlias = useObservableValue(ct.roomToAlias);
+
+  if (!spaceIdOrAlias) return undefined;
+
+  const spaceId = isRoomAlias(spaceIdOrAlias)
+    ? ct.rooms.join.read.find(
+        (roomId) =>
+          roomToAlias.get(roomId) === spaceIdOrAlias && !ct.roomToReplacement.read.has(roomId)
+      )
+    : spaceIdOrAlias;
 
   return spaceId;
 };
diff --git a/src/app/hooks/storage/useAccountData.ts b/src/app/hooks/storage/useAccountData.ts
new file mode 100644
index 00000000..83b5c4d7
--- /dev/null
+++ b/src/app/hooks/storage/useAccountData.ts
@@ -0,0 +1,25 @@
+import { useCallback, useMemo } from 'react';
+import { AccountDataEvent } from 'neurone/lib/api/types';
+import { PendingObservableResult } from 'neurone/lib/utils/observable';
+import { useClient } from '../useClient';
+import {
+  useComputedPendingObservableResult,
+  useObservableValuePromise,
+} from '../useObservableValue';
+
+export function useAccountData<T extends AccountDataEvent>(
+  eventType: string
+): PendingObservableResult<T | undefined> {
+  const ct = useClient();
+  const observablePromise = useMemo(
+    () => ct.storage.accountData.observableRead.get(eventType),
+    [ct, eventType]
+  );
+
+  const result = useObservableValuePromise(observablePromise);
+
+  return useComputedPendingObservableResult(
+    result,
+    useCallback((v) => v?.event as T | undefined, [])
+  );
+}
diff --git a/src/app/hooks/storage/useGetRoomAvatar.ts b/src/app/hooks/storage/useGetRoomAvatar.ts
new file mode 100644
index 00000000..b2fe8716
--- /dev/null
+++ b/src/app/hooks/storage/useGetRoomAvatar.ts
@@ -0,0 +1,36 @@
+import { useCallback } from 'react';
+import { useClient } from '../useClient';
+import { useObservableValue } from '../useObservableValue';
+import { GetRoomHeroesCallback, RoomToHeroMembers } from './useRoomHeros';
+import { roomMemberContentAvatarUrl } from '../../utils/room';
+
+export type GetRoomAvatarCallback = (roomId: string) => string | undefined;
+
+export const useGetRoomAvatar = (
+  getRoomHeroes: GetRoomHeroesCallback,
+  roomToHeroMembers: RoomToHeroMembers | undefined
+): GetRoomAvatarCallback => {
+  const ct = useClient();
+  const roomToAvatar = useObservableValue(ct.roomToAvatar);
+
+  const getRoomAvatar: GetRoomAvatarCallback = useCallback(
+    (roomId: string) => {
+      const avatar = roomToAvatar.get(roomId);
+      if (avatar) return avatar;
+
+      const members = roomToHeroMembers?.get(roomId);
+
+      const heroesAvatar: string[] = [];
+      getRoomHeroes(roomId).forEach((userId) => {
+        const content = members?.get(userId)?.content;
+        const avatarUrl = content ? roomMemberContentAvatarUrl(content) : undefined;
+        if (avatarUrl) heroesAvatar.push(avatarUrl);
+      });
+
+      return heroesAvatar[0];
+    },
+    [roomToAvatar, getRoomHeroes, roomToHeroMembers]
+  );
+
+  return getRoomAvatar;
+};
diff --git a/src/app/hooks/storage/useGetRoomName.ts b/src/app/hooks/storage/useGetRoomName.ts
new file mode 100644
index 00000000..ca083daa
--- /dev/null
+++ b/src/app/hooks/storage/useGetRoomName.ts
@@ -0,0 +1,45 @@
+import { useCallback } from 'react';
+import { useClient } from '../useClient';
+import { useObservableValue } from '../useObservableValue';
+import { GetRoomHeroesCallback, RoomToHeroMembers } from './useRoomHeros';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import { roomMemberContentDisplayname } from '../../utils/room';
+
+export type GetRoomNameCallback = (roomId: string) => string | undefined;
+
+export const useGetRoomName = (
+  getRoomHeroes: GetRoomHeroesCallback,
+  roomToHeroMembers: RoomToHeroMembers | undefined
+): GetRoomNameCallback => {
+  const ct = useClient();
+  const roomToName = useObservableValue(ct.roomToName);
+  const roomToAlias = useObservableValue(ct.roomToAlias);
+
+  const getRoomName: GetRoomNameCallback = useCallback(
+    (roomId: string) => {
+      const name = roomToName.get(roomId);
+      if (name) return name;
+
+      const alias = roomToAlias.get(roomId);
+      if (alias) return alias;
+
+      const members = roomToHeroMembers?.get(roomId);
+
+      const heroesName: string[] = getRoomHeroes(roomId).map((userId) => {
+        const member = members?.get(userId);
+        if (!member) return getMxIdLocalPart(userId) ?? userId;
+        const { content } = member;
+        const username =
+          roomMemberContentDisplayname(content)?.trim() || getMxIdLocalPart(userId) || userId;
+        return username;
+      });
+
+      if (heroesName) return heroesName.join(', ');
+
+      return undefined;
+    },
+    [roomToName, roomToAlias, getRoomHeroes, roomToHeroMembers]
+  );
+
+  return getRoomName;
+};
diff --git a/src/app/hooks/storage/useRoomHeros.ts b/src/app/hooks/storage/useRoomHeros.ts
new file mode 100644
index 00000000..c1a214e0
--- /dev/null
+++ b/src/app/hooks/storage/useRoomHeros.ts
@@ -0,0 +1,57 @@
+import { useCallback, useMemo } from 'react';
+import { PendingObservableResult } from 'neurone/lib/utils/observable';
+import { StateEventWithoutRoomId } from 'neurone/lib/api/types';
+import { useClient } from '../useClient';
+import {
+  useComputedPendingObservableResult,
+  useObservableValue,
+  useObservableValuePromise,
+} from '../useObservableValue';
+import { getJoinRoomMemberId } from '../../../client/storage/collections';
+
+export type UserIdToRoomMember = Map<string, StateEventWithoutRoomId>;
+export type RoomToHeroMembers = Map<string, UserIdToRoomMember>;
+
+export type GetRoomHeroesCallback = (roomId: string) => string[];
+
+export const useRoomHeroes = (
+  roomOrRooms: string | string[]
+): [GetRoomHeroesCallback, PendingObservableResult<RoomToHeroMembers>] => {
+  const ct = useClient();
+  const roomToSummary = useObservableValue(ct.roomToSummary);
+
+  const getHeroes: GetRoomHeroesCallback = useCallback(
+    (roomId) => roomToSummary.get(roomId)?.['m.heroes'] ?? [],
+    [roomToSummary]
+  );
+
+  const membersResult = useObservableValuePromise(
+    useMemo(() => {
+      const ids = Array.isArray(roomOrRooms)
+        ? roomOrRooms.flatMap((roomId) =>
+            getHeroes(roomId).map((userId) => getJoinRoomMemberId(roomId, userId))
+          )
+        : getHeroes(roomOrRooms).map((userId) => getJoinRoomMemberId(roomOrRooms, userId));
+
+      return ct.storage.joinRoomMember.observableRead.getMultiple(ids);
+    }, [roomOrRooms, getHeroes, ct])
+  );
+
+  const roomToHeroesResult: PendingObservableResult<RoomToHeroMembers> =
+    useComputedPendingObservableResult(
+      membersResult,
+      useCallback((members) => {
+        const roomToHeroes = new Map<string, UserIdToRoomMember>();
+        members.forEach((member) => {
+          if (!member) return;
+          const { roomId, userId, event } = member;
+          const userToEvent: UserIdToRoomMember = roomToHeroes.get(roomId) ?? new Map();
+          userToEvent.set(userId, event);
+          roomToHeroes.set(roomId, userToEvent);
+        });
+        return roomToHeroes;
+      }, [])
+    );
+
+  return [getHeroes, roomToHeroesResult];
+};
diff --git a/src/app/hooks/storage/useRoomStateEvent.ts b/src/app/hooks/storage/useRoomStateEvent.ts
new file mode 100644
index 00000000..6c26559f
--- /dev/null
+++ b/src/app/hooks/storage/useRoomStateEvent.ts
@@ -0,0 +1,45 @@
+import { useMemo } from 'react';
+import { PendingObservableResult } from 'neurone/lib/utils/observable';
+import { QueryRange } from 'neurone/lib/storage/collection';
+import { getJoinRoomStateId, JoinRoomStateObject } from '../../../client/storage/collections';
+import { useClient } from '../useClient';
+import { useObservableValuePromise } from '../useObservableValue';
+import { MAX_UNICODE } from '../../../client/storage';
+
+export const useRoomStateEvent = (
+  roomId: string,
+  eventType: string,
+  stateKey: string
+): PendingObservableResult<JoinRoomStateObject | undefined> => {
+  const ct = useClient();
+  const stateEventPromise = useMemo(
+    () =>
+      ct.storage.joinRoomState.observableRead.get(getJoinRoomStateId(roomId, eventType, stateKey)),
+    [ct, roomId, eventType, stateKey]
+  );
+
+  const stateEventResult = useObservableValuePromise(stateEventPromise);
+
+  return stateEventResult;
+};
+
+export const useRoomStateEvents = (
+  roomId: string,
+  eventType: string
+): PendingObservableResult<JoinRoomStateObject[]> => {
+  const ct = useClient();
+  const stateEventPromise = useMemo(
+    () =>
+      ct.storage.joinRoomState.observableRead.query(
+        new QueryRange(
+          getJoinRoomStateId(roomId, eventType, ''),
+          getJoinRoomStateId(roomId, eventType, MAX_UNICODE)
+        )
+      ),
+    [ct, roomId, eventType]
+  );
+
+  const stateEventResult = useObservableValuePromise(stateEventPromise);
+
+  return stateEventResult;
+};
diff --git a/src/app/hooks/storage/useRoomTopic.ts b/src/app/hooks/storage/useRoomTopic.ts
new file mode 100644
index 00000000..14e1cebb
--- /dev/null
+++ b/src/app/hooks/storage/useRoomTopic.ts
@@ -0,0 +1,11 @@
+import { StateEventType } from '../../../types/matrix/room';
+import { useRoomStateEvent } from './useRoomStateEvent';
+
+export const useRoomTopic = (roomId: string): string | undefined => {
+  const topicEventResult = useRoomStateEvent(roomId, StateEventType.RoomTopic, '');
+
+  const content = topicEventResult.value?.event.content;
+  if (content && 'topic' in content && typeof content.topic === 'string') return content.topic;
+
+  return undefined;
+};
diff --git a/src/app/hooks/types.ts b/src/app/hooks/types.ts
index 9aac2b31..1ec9dfea 100644
--- a/src/app/hooks/types.ts
+++ b/src/app/hooks/types.ts
@@ -1,12 +1,17 @@
-import { IRequestTokenResponse } from 'matrix-js-sdk';
+import { PostEmailRegisterTokenOK } from 'neurone/lib/api/matrix/client/v3/register';
+import { MatrixError } from 'neurone/lib/matrix-request';
 
 export type RequestEmailTokenResponse = {
   email: string;
   clientSecret: string;
-  result: IRequestTokenResponse;
+  result: PostEmailRegisterTokenOK;
 };
+export type RequestEmailTokenResult =
+  | [undefined, RequestEmailTokenResponse]
+  | [MatrixError, undefined];
+
 export type RequestEmailTokenCallback = (
   email: string,
   clientSecret: string,
   nextLink?: string
-) => Promise<RequestEmailTokenResponse>;
+) => Promise<RequestEmailTokenResult>;
diff --git a/src/app/hooks/useAuthFlows.ts b/src/app/hooks/useAuthFlows.ts
index 7bb7ddc5..43faa6bb 100644
--- a/src/app/hooks/useAuthFlows.ts
+++ b/src/app/hooks/useAuthFlows.ts
@@ -1,6 +1,7 @@
 import { createContext, useContext } from 'react';
-import { IAuthData, MatrixError } from 'matrix-js-sdk';
-import { ILoginFlowsResponse } from 'matrix-js-sdk/lib/@types/auth';
+import { MatrixError, MatrixErrorData } from 'neurone/lib/matrix-request';
+import { GetLoginOK } from 'neurone/lib/api/matrix/client/v3/login';
+import { AuthResponse } from '../utils/matrix-uia';
 
 export enum RegisterFlowStatus {
   FlowRequired = 401,
@@ -12,14 +13,16 @@ export enum RegisterFlowStatus {
 export type RegisterFlowsResponse =
   | {
       status: RegisterFlowStatus.FlowRequired;
-      data: IAuthData;
+      data: AuthResponse;
     }
   | {
       status: Exclude<RegisterFlowStatus, RegisterFlowStatus.FlowRequired>;
     };
 
-export const parseRegisterErrResp = (matrixError: MatrixError): RegisterFlowsResponse => {
-  switch (matrixError.httpStatus) {
+export const parseRegisterErrResp = (
+  matrixError: MatrixError<AuthResponse | MatrixErrorData>
+): RegisterFlowsResponse => {
+  switch (matrixError.status) {
     case RegisterFlowStatus.InvalidRequest: {
       return { status: RegisterFlowStatus.InvalidRequest };
     }
@@ -32,7 +35,7 @@ export const parseRegisterErrResp = (matrixError: MatrixError): RegisterFlowsRes
     case RegisterFlowStatus.FlowRequired: {
       return {
         status: RegisterFlowStatus.FlowRequired,
-        data: matrixError.data as IAuthData,
+        data: matrixError.data as AuthResponse,
       };
     }
     default: {
@@ -42,7 +45,7 @@ export const parseRegisterErrResp = (matrixError: MatrixError): RegisterFlowsRes
 };
 
 export type AuthFlows = {
-  loginFlows: ILoginFlowsResponse;
+  loginFlows: GetLoginOK;
   registerFlows: RegisterFlowsResponse;
 };
 
diff --git a/src/app/hooks/useAuthMetadata.ts b/src/app/hooks/useAuthMetadata.ts
index db967463..bc991930 100644
--- a/src/app/hooks/useAuthMetadata.ts
+++ b/src/app/hooks/useAuthMetadata.ts
@@ -1,11 +1,11 @@
-import { ValidatedAuthMetadata } from 'matrix-js-sdk';
+import { GetAuthMetadataOK } from 'neurone/lib/api/matrix/client/v1/authMetadata';
 import { createContext, useContext } from 'react';
 
-const AuthMetadataContext = createContext<ValidatedAuthMetadata | undefined>(undefined);
+const AuthMetadataContext = createContext<GetAuthMetadataOK | undefined>(undefined);
 
 export const AuthMetadataProvider = AuthMetadataContext.Provider;
 
-export const useAuthMetadata = (): ValidatedAuthMetadata | undefined => {
+export const useAuthMetadata = (): GetAuthMetadataOK | undefined => {
   const metadata = useContext(AuthMetadataContext);
 
   return metadata;
diff --git a/src/app/hooks/useCapabilities.ts b/src/app/hooks/useCapabilities.ts
index b2fbd640..72aeecac 100644
--- a/src/app/hooks/useCapabilities.ts
+++ b/src/app/hooks/useCapabilities.ts
@@ -1,6 +1,31 @@
-import { Capabilities } from 'matrix-js-sdk';
 import { createContext, useContext } from 'react';
 
+export interface ICapability {
+  enabled: boolean;
+}
+
+export enum RoomVersionStability {
+  Stable = 'stable',
+  Unstable = 'unstable',
+}
+
+export interface IRoomVersionsCapability {
+  default: string;
+  available: Record<string, RoomVersionStability>;
+}
+
+export interface Capabilities {
+  [key: string]: any;
+  'm.change_password'?: ICapability;
+  'm.room_versions'?: IRoomVersionsCapability;
+  'io.element.thread'?: ICapability;
+  'm.get_login_token'?: ICapability;
+  'org.matrix.msc3882.get_login_token'?: ICapability;
+  'm.set_displayname'?: ICapability;
+  'm.set_avatar_url'?: ICapability;
+  'uk.tcpip.msc4133.profile_fields'?: ICapability;
+}
+
 const CapabilitiesContext = createContext<Capabilities | null>(null);
 
 export const CapabilitiesProvider = CapabilitiesContext.Provider;
diff --git a/src/app/hooks/useClient.ts b/src/app/hooks/useClient.ts
new file mode 100644
index 00000000..aafd8287
--- /dev/null
+++ b/src/app/hooks/useClient.ts
@@ -0,0 +1,16 @@
+import { createContext, useContext } from 'react';
+import { ClientContext } from '../../client/context';
+
+const ClientCtx = createContext<ClientContext | null>(null);
+
+export const ClientContextProvider = ClientCtx.Provider;
+
+export const useClient = (): ClientContext => {
+  const ct = useContext(ClientCtx);
+
+  if (ct === null) {
+    throw new Error('Client Context is not provided!');
+  }
+
+  return ct;
+};
diff --git a/src/app/hooks/useCommands.ts b/src/app/hooks/useCommands.ts
index c02b0e94..9eb27a95 100644
--- a/src/app/hooks/useCommands.ts
+++ b/src/app/hooks/useCommands.ts
@@ -1,19 +1,25 @@
-import {
-  Direction,
-  EventTimeline,
-  IContextResponse,
-  MatrixClient,
-  Method,
-  Preset,
-  Room,
-  RoomMember,
-  Visibility,
-} from 'matrix-js-sdk';
-import { RoomServerAclEventContent } from 'matrix-js-sdk/lib/types';
 import { useMemo } from 'react';
+import { postCreateRoom, PostCreateRoomOK } from 'neurone/lib/api/matrix/client/v3/createRoom';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { postJoin } from 'neurone/lib/api/matrix/client/v3/join';
+import {
+  getContext,
+  GetContextOK,
+  getMessages,
+  GetMessagesOK,
+  postBan,
+  postInvite,
+  postKick,
+  postLeave,
+  postUnban,
+  putRedact,
+  putStateEvent,
+} from 'neurone/lib/api/matrix/client/v3/rooms';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
+import { getTimestampToEvent, GetTimestampToEventOK } from 'neurone/lib/api/matrix/client/v1/rooms';
 import {
   addRoomIdToMDirect,
-  getDMRoomFor,
+  getUserDirectRooms,
   guessDmRoomUserId,
   isRoomAlias,
   isRoomId,
@@ -23,10 +29,19 @@ import {
   removeRoomIdFromMDirect,
 } from '../utils/matrix';
 import { useRoomNavigate } from './useRoomNavigate';
-import { Membership, StateEvent } from '../../types/matrix/room';
-import { getStateEvent } from '../utils/room';
+import { RoomServerAclContent, StateEventType } from '../../types/matrix/room';
 import { splitWithSpace } from '../utils/common';
 import { createRoomEncryptionState } from '../components/create-room';
+import { useClient } from './useClient';
+import { useRoom } from './useRoom';
+import { useRoomMembersAPI } from './useRoomMembers';
+import {
+  getJoinRoomMemberId,
+  getJoinRoomStateId,
+  JoinRoomMemberObject,
+} from '../../client/storage/collections';
+import { AccountDataType } from '../../types/matrix/accountData';
+import { getIgnoredUsersContent, parseIgnoreUsersContent } from './useIgnoredUsers';
 
 export const SHRUG = '¯\\_(ツ)_/¯';
 export const TABLEFLIP = '(╯°□°)╯︵ ┻━┻';
@@ -36,7 +51,7 @@ const FLAG_PAT = '(?:^|\\s)-(\\w+)\\b';
 const FLAG_REG = new RegExp(FLAG_PAT);
 const FLAG_REG_G = new RegExp(FLAG_PAT, 'g');
 
-export const splitPayloadContentAndFlags = (payload: string): [string, string | undefined] => {
+const splitPayloadContentAndFlags = (payload: string): [string, string | undefined] => {
   const flagMatch = payload.match(FLAG_REG);
 
   if (!flagMatch) {
@@ -48,7 +63,7 @@ export const splitPayloadContentAndFlags = (payload: string): [string, string |
   return [content, flags];
 };
 
-export const parseFlags = (flags: string | undefined): Record<string, string | undefined> => {
+const parseFlags = (flags: string | undefined): Record<string, string | undefined> => {
   const result: Record<string, string> = {};
   if (!flags) return result;
 
@@ -69,7 +84,7 @@ export const parseFlags = (flags: string | undefined): Record<string, string | u
   return result;
 };
 
-export const parseUsers = (payload: string): string[] => {
+const parseUsers = (payload: string): string[] => {
   const users: string[] = [];
 
   splitWithSpace(payload).forEach((item) => {
@@ -81,7 +96,7 @@ export const parseUsers = (payload: string): string[] => {
   return users;
 };
 
-export const parseServers = (payload: string): string[] => {
+const parseServers = (payload: string): string[] => {
   const servers: string[] = [];
 
   splitWithSpace(payload).forEach((item) => {
@@ -93,13 +108,10 @@ export const parseServers = (payload: string): string[] => {
   return servers;
 };
 
-const getServerMembers = (room: Room, server: string): RoomMember[] => {
-  const members: RoomMember[] = room
-    .getMembers()
-    .filter((member) => member.userId.endsWith(`:${server}`));
-
-  return members;
-};
+const getServerMembers = (
+  members: JoinRoomMemberObject[],
+  server: string
+): JoinRoomMemberObject[] => members.filter((member) => member.userId.endsWith(`:${server}`));
 
 export const parseTimestampFlag = (input: string): number | undefined => {
   const match = input.match(/^(\d+(?:\.\d+)?)([dhms])$/); // supports floats like 1.5d
@@ -169,7 +181,10 @@ export type CommandContent = {
 
 export type CommandRecord = Record<Command, CommandContent>;
 
-export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
+export const useCommands = (): CommandRecord => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const membersAPI = useRoomMembersAPI();
   const { navigateRoom } = useRoomNavigate();
 
   const commands: CommandRecord = useMemo(
@@ -204,23 +219,33 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         description: 'Start direct message with user. Example: /startdm userId1',
         exe: async (payload) => {
           const rawIds = splitWithSpace(payload);
-          const userIds = rawIds.filter((id) => isUserId(id) && id !== mx.getSafeUserId());
+          const userIds = rawIds.filter((id) => isUserId(id) && id !== ct.session.userId);
           if (userIds.length === 0) return;
           if (userIds.length === 1) {
-            const dmRoomId = getDMRoomFor(mx, userIds[0])?.roomId;
+            const dmRoomId = getUserDirectRooms(ct, userIds[0])[0];
             if (dmRoomId) {
               navigateRoom(dmRoomId);
               return;
             }
           }
-          const result = await mx.createRoom({
-            is_direct: true,
-            invite: userIds,
-            visibility: Visibility.Private,
-            preset: Preset.TrustedPrivateChat,
-            initial_state: [createRoomEncryptionState()],
-          });
-          addRoomIdToMDirect(mx, result.room_id, userIds[0]);
+          const response = await ct.requestAuthJSON(
+            postCreateRoom({
+              body: {
+                is_direct: true,
+                invite: userIds,
+                visibility: 'private',
+                preset: 'trusted_private_chat',
+                initial_state: [createRoomEncryptionState()],
+              },
+            })
+          );
+          const [err, result] = await parseMatrixResp<PostCreateRoomOK>(response);
+          if (err) {
+            console.error(printMatrixError(err));
+            return;
+          }
+
+          addRoomIdToMDirect(ct, result.room_id, userIds[0]);
           navigateRoom(result.room_id);
         },
       },
@@ -232,8 +257,8 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const roomIdOrAliases = rawIds.filter(
             (idOrAlias) => isRoomId(idOrAlias) || isRoomAlias(idOrAlias)
           );
-          roomIdOrAliases.forEach(async (idOrAlias) => {
-            await mx.joinRoom(idOrAlias);
+          roomIdOrAliases.forEach(async (roomIdOrAlias) => {
+            await ct.requestAuthJSON(postJoin({ pathParams: { roomIdOrAlias } }));
           });
         },
       },
@@ -242,12 +267,12 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         description: 'Leave current room.',
         exe: async (payload) => {
           if (payload.trim() === '') {
-            mx.leave(room.roomId);
+            ct.requestAuthJSON(postLeave({ pathParams: { roomId } }));
             return;
           }
           const rawIds = splitWithSpace(payload);
           const roomIds = rawIds.filter((id) => isRoomId(id));
-          roomIds.map((id) => mx.leave(id));
+          roomIds.map((id) => ct.requestAuthJSON(postLeave({ pathParams: { roomId: id } })));
         },
       },
       [Command.Invite]: {
@@ -258,7 +283,14 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const users = parseUsers(content);
           const flagToContent = parseFlags(flags);
           const reason = flagToContent.r;
-          users.map((id) => mx.invite(room.roomId, id, reason));
+          users.map((id) =>
+            ct.requestAuthJSON(
+              postInvite({
+                pathParams: { roomId },
+                body: { user_id: id, reason },
+              })
+            )
+          );
         },
       },
       [Command.DisInvite]: {
@@ -269,7 +301,14 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const users = parseUsers(content);
           const flagToContent = parseFlags(flags);
           const reason = flagToContent.r;
-          users.map((id) => mx.kick(room.roomId, id, reason));
+          users.map((id) =>
+            ct.requestAuthJSON(
+              postKick({
+                pathParams: { roomId },
+                body: { user_id: id, reason },
+              })
+            )
+          );
         },
       },
       [Command.Kick]: {
@@ -282,9 +321,11 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const flagToContent = parseFlags(flags);
           const reason = flagToContent.r;
 
-          const serverMembers = servers?.flatMap((server) => getServerMembers(room, server));
+          const serverMembers = servers?.flatMap((server) =>
+            getServerMembers(membersAPI.memberEventsResult.value ?? [], server)
+          );
           const serverUsers = serverMembers
-            ?.filter((m) => m.membership !== Membership.Ban)
+            ?.filter((m) => membersAPI.getMembership(m.userId) !== 'ban')
             .map((m) => m.userId);
 
           if (Array.isArray(serverUsers)) {
@@ -293,7 +334,16 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
             });
           }
 
-          rateLimitedActions(users, (id) => mx.kick(room.roomId, id, reason));
+          rateLimitedActions(users, async (id) => {
+            const response = await ct.requestAuthJSON(
+              postKick({
+                pathParams: { roomId },
+                body: { user_id: id, reason },
+              })
+            );
+            const [err] = await parseMatrixResp(response);
+            return err;
+          });
         },
       },
       [Command.Ban]: {
@@ -306,7 +356,9 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const flagToContent = parseFlags(flags);
           const reason = flagToContent.r;
 
-          const serverMembers = servers?.flatMap((server) => getServerMembers(room, server));
+          const serverMembers = servers?.flatMap((server) =>
+            getServerMembers(membersAPI.memberEventsResult.value ?? [], server)
+          );
           const serverUsers = serverMembers?.map((m) => m.userId);
 
           if (Array.isArray(serverUsers)) {
@@ -315,7 +367,16 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
             });
           }
 
-          rateLimitedActions(users, (id) => mx.ban(room.roomId, id, reason));
+          rateLimitedActions(users, async (id) => {
+            const response = await ct.requestAuthJSON(
+              postBan({
+                pathParams: { roomId },
+                body: { user_id: id, reason },
+              })
+            );
+            const [err] = await parseMatrixResp(response);
+            return err;
+          });
         },
       },
       [Command.UnBan]: {
@@ -324,7 +385,16 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         exe: async (payload) => {
           const rawIds = splitWithSpace(payload);
           const users = rawIds.filter((id) => isUserId(id));
-          users.map((id) => mx.unban(room.roomId, id));
+          rateLimitedActions(users, async (id) => {
+            const response = await ct.requestAuthJSON(
+              postUnban({
+                pathParams: { roomId },
+                body: { user_id: id },
+              })
+            );
+            const [err] = await parseMatrixResp(response);
+            return err;
+          });
         },
       },
       [Command.Ignore]: {
@@ -334,9 +404,17 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const rawIds = splitWithSpace(payload);
           const userIds = rawIds.filter((id) => isUserId(id));
           if (userIds.length > 0) {
-            let ignoredUsers = mx.getIgnoredUsers().concat(userIds);
-            ignoredUsers = [...new Set(ignoredUsers)];
-            await mx.setIgnoredUsers(ignoredUsers);
+            const ignoreUserListObj = await ct.storage.accountData.read.get(
+              AccountDataType.IgnoredUserList
+            );
+            const { content } = ignoreUserListObj?.event ?? {};
+            const ignoredUsers = parseIgnoreUsersContent(content).concat(userIds);
+            await ct.requestAuthJSON(
+              putAccountData({
+                pathParams: { userId: ct.session.userId, type: AccountDataType.IgnoredUserList },
+                body: getIgnoredUsersContent(ignoredUsers),
+              })
+            );
           }
         },
       },
@@ -347,8 +425,19 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const rawIds = splitWithSpace(payload);
           const userIds = rawIds.filter((id) => isUserId(id));
           if (userIds.length > 0) {
-            const ignoredUsers = mx.getIgnoredUsers();
-            await mx.setIgnoredUsers(ignoredUsers.filter((id) => !userIds.includes(id)));
+            const ignoreUserListObj = await ct.storage.accountData.read.get(
+              AccountDataType.IgnoredUserList
+            );
+            const { content } = ignoreUserListObj?.event ?? {};
+            const ignoredUsers = parseIgnoreUsersContent(content).filter(
+              (id) => !userIds.includes(id)
+            );
+            await ct.requestAuthJSON(
+              putAccountData({
+                pathParams: { userId: ct.session.userId, type: AccountDataType.IgnoredUserList },
+                body: getIgnoredUsersContent(ignoredUsers),
+              })
+            );
           }
         },
       },
@@ -358,20 +447,24 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         exe: async (payload) => {
           const nick = payload.trim();
           if (nick === '') return;
-          const mEvent = room
-            .getLiveTimeline()
-            .getState(EventTimeline.FORWARDS)
-            ?.getStateEvents(StateEvent.RoomMember, mx.getSafeUserId());
-          const content = mEvent?.getContent();
+          const memberObj = await ct.storage.joinRoomMember.read.get(
+            getJoinRoomMemberId(roomId, ct.session.userId)
+          );
+          const { content } = memberObj?.event ?? {};
           if (!content) return;
-          await mx.sendStateEvent(
-            room.roomId,
-            StateEvent.RoomMember as any,
-            {
-              ...content,
-              displayname: nick,
-            },
-            mx.getSafeUserId()
+
+          ct.requestAuthJSON(
+            putStateEvent({
+              pathParams: {
+                roomId,
+                eventType: StateEventType.RoomMember,
+                stateKey: ct.session.userId,
+              },
+              body: {
+                ...content,
+                displayname: nick,
+              },
+            })
           );
         },
       },
@@ -380,20 +473,23 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         description: 'Change profile picture in current room. Example /myroomavatar mxc://xyzabc',
         exe: async (payload) => {
           if (payload.match(/^mxc:\/\/\S+$/)) {
-            const mEvent = room
-              .getLiveTimeline()
-              .getState(EventTimeline.FORWARDS)
-              ?.getStateEvents(StateEvent.RoomMember, mx.getSafeUserId());
-            const content = mEvent?.getContent();
+            const memberObj = await ct.storage.joinRoomMember.read.get(
+              getJoinRoomMemberId(roomId, ct.session.userId)
+            );
+            const { content } = memberObj?.event ?? {};
             if (!content) return;
-            await mx.sendStateEvent(
-              room.roomId,
-              StateEvent.RoomMember as any,
-              {
-                ...content,
-                avatar_url: payload,
-              },
-              mx.getSafeUserId()
+            ct.requestAuthJSON(
+              putStateEvent({
+                pathParams: {
+                  roomId,
+                  eventType: StateEventType.RoomMember,
+                  stateKey: ct.session.userId,
+                },
+                body: {
+                  ...content,
+                  avatar_url: payload,
+                },
+              })
             );
           }
         },
@@ -402,15 +498,18 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
         name: Command.ConvertToDm,
         description: 'Convert room to direct message',
         exe: async () => {
-          const dmUserId = guessDmRoomUserId(room, mx.getSafeUserId());
-          await addRoomIdToMDirect(mx, room.roomId, dmUserId);
+          const dmUserId = guessDmRoomUserId(
+            membersAPI.memberEventsResult.value ?? [],
+            ct.session.userId
+          );
+          await addRoomIdToMDirect(ct, roomId, dmUserId);
         },
       },
       [Command.ConvertToRoom]: {
         name: Command.ConvertToRoom,
         description: 'Convert direct message to room',
         exe: async () => {
-          await removeRoomIdFromMDirect(mx, room.roomId);
+          await removeRoomIdFromMDirect(ct, roomId);
         },
       },
       [Command.Delete]: {
@@ -431,7 +530,9 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const ts = parseTimestampFlag(pastContent);
           if (!ts) return;
 
-          const serverMembers = servers?.flatMap((server) => getServerMembers(room, server));
+          const serverMembers = servers?.flatMap((server) =>
+            getServerMembers(membersAPI.memberEventsResult.value ?? [], server)
+          );
           const serverUsers = serverMembers?.map((m) => m.userId);
 
           if (Array.isArray(serverUsers)) {
@@ -440,26 +541,50 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
             });
           }
 
-          const result = await mx.timestampToEvent(room.roomId, ts, Direction.Forward);
+          const tsResp = await ct.requestAuthJSON(
+            getTimestampToEvent({
+              pathParams: { roomId },
+              searchParams: { ts, dir: 'f' },
+            })
+          );
+          const [err, result] = await parseMatrixResp<GetTimestampToEventOK>(tsResp);
+          if (err) {
+            console.error(printMatrixError(err));
+            return;
+          }
           const startEventId = result.event_id;
 
-          const path = `/rooms/${encodeURIComponent(room.roomId)}/context/${encodeURIComponent(
-            startEventId
-          )}`;
-          const eventContext = await mx.http.authedRequest<IContextResponse>(Method.Get, path, {
-            limit: 0,
-          });
+          const ctxResp = await ct.requestAuthJSON(
+            getContext({
+              pathParams: { roomId, eventId: startEventId },
+              searchParams: { limit: 0 },
+            })
+          );
+          const [ctxErr, eventContext] = await parseMatrixResp<GetContextOK>(ctxResp);
+          if (ctxErr) {
+            console.error(printMatrixError(ctxErr));
+            return;
+          }
 
           let token: string | undefined = eventContext.start;
           while (token) {
             // eslint-disable-next-line no-await-in-loop
-            const response = await mx.createMessagesRequest(
-              room.roomId,
-              token,
-              20,
-              Direction.Forward,
-              undefined
+            const msgResp = await ct.requestAuthJSON(
+              getMessages({
+                pathParams: { roomId },
+                searchParams: {
+                  from: token,
+                  limit: 20,
+                  dir: 'f',
+                },
+              })
             );
+            // eslint-disable-next-line no-await-in-loop
+            const [msgErr, response] = await parseMatrixResp<GetMessagesOK>(msgResp);
+            if (msgErr) {
+              console.error(printMatrixError(msgErr));
+              break;
+            }
             const { end, chunk } = response;
             // remove until the latest event;
             token = end;
@@ -468,15 +593,22 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
               (roomEvent) =>
                 (messageTypes.length > 0 ? messageTypes.includes(roomEvent.type) : true) &&
                 users.includes(roomEvent.sender) &&
-                roomEvent.unsigned?.redacted_because === undefined
+                (!roomEvent.unsigned || !('redacted_because' in roomEvent.unsigned))
             );
 
             const eventIds = eventsToDelete.map((roomEvent) => roomEvent.event_id);
 
             // eslint-disable-next-line no-await-in-loop
-            await rateLimitedActions(eventIds, (eventId) =>
-              mx.redactEvent(room.roomId, eventId, undefined, { reason })
-            );
+            await rateLimitedActions(eventIds, async (eventId) => {
+              const redactResp = await ct.requestAuthJSON(
+                putRedact({
+                  pathParams: { roomId, eventId, txnId: ct.getTxnId() },
+                  body: { reason },
+                })
+              );
+              const [redactErr] = await parseMatrixResp(redactResp);
+              return redactErr;
+            });
           }
         },
       },
@@ -498,12 +630,12 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           const removeAllowList = removeAllowFlag ? splitWithSpace(removeAllowFlag) : [];
           const removeDenyList = removeDenyFlag ? splitWithSpace(removeDenyFlag) : [];
 
-          const serverAcl = getStateEvent(
-            room,
-            StateEvent.RoomServerAcl
-          )?.getContent<RoomServerAclEventContent>();
+          const serverAclObj = await ct.storage.joinRoomState.read.get(
+            getJoinRoomStateId(roomId, StateEventType.RoomServerAcl, '')
+          );
+          const serverAcl: RoomServerAclContent = serverAclObj?.event.content ?? {};
 
-          const aclContent: RoomServerAclEventContent = {
+          const aclContent: RoomServerAclContent = {
             allow: serverAcl?.allow ? [...serverAcl.allow] : [],
             allow_ip_literals: serverAcl?.allow_ip_literals,
             deny: serverAcl?.deny ? [...serverAcl.deny] : [],
@@ -528,11 +660,16 @@ export const useCommands = (mx: MatrixClient, room: Room): CommandRecord => {
           aclContent.allow?.sort();
           aclContent.deny?.sort();
 
-          await mx.sendStateEvent(room.roomId, StateEvent.RoomServerAcl as any, aclContent);
+          await ct.requestAuthJSON(
+            putStateEvent({
+              pathParams: { roomId, eventType: StateEventType.RoomServerAcl, stateKey: '' },
+              body: aclContent,
+            })
+          );
         },
       },
     }),
-    [mx, room, navigateRoom]
+    [ct, membersAPI, roomId, navigateRoom]
   );
 
   return commands;
diff --git a/src/app/hooks/useDirectUsers.ts b/src/app/hooks/useDirectUsers.ts
index 3aa18928..4691bac9 100644
--- a/src/app/hooks/useDirectUsers.ts
+++ b/src/app/hooks/useDirectUsers.ts
@@ -1,27 +1,18 @@
 import { useMemo } from 'react';
-import { AccountDataEvent, MDirectContent } from '../../types/matrix/accountData';
-import { useAccountData } from './useAccountData';
-import { useAllJoinedRoomsSet, useGetRoom } from './useGetRoom';
+import { useClient } from './useClient';
+import { useObservableValue } from './useObservableValue';
 
 export const useDirectUsers = (): string[] => {
-  const directEvent = useAccountData(AccountDataEvent.Direct);
-  const content = directEvent?.getContent<MDirectContent>();
-
-  const allJoinedRooms = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allJoinedRooms);
+  const ct = useClient();
+  const roomToSummary = useObservableValue(ct.roomToSummary);
 
   const users = useMemo(() => {
-    if (typeof content !== 'object') return [];
+    const heroes = Array.from(roomToSummary.values()).flatMap(
+      (summary) => summary['m.heroes'] ?? []
+    );
 
-    const u = Object.keys(content).filter((userId) => {
-      const rooms = content[userId];
-      if (!Array.isArray(rooms)) return false;
-      const hasDM = rooms.some((roomId) => typeof roomId === 'string' && !!getRoom(roomId));
-      return hasDM;
-    });
-
-    return u;
-  }, [content, getRoom]);
+    return Array.from(new Set(heroes));
+  }, [roomToSummary]);
 
   return users;
 };
diff --git a/src/app/hooks/useEmailNotifications.ts b/src/app/hooks/useEmailNotifications.ts
index 58639394..566fb4e7 100644
--- a/src/app/hooks/useEmailNotifications.ts
+++ b/src/app/hooks/useEmailNotifications.ts
@@ -1,6 +1,9 @@
 import { useCallback } from 'react';
+import { get3pid, Get3pidOK } from 'neurone/lib/api/matrix/client/v3/account';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { getPushers, GetPushersOK } from 'neurone/lib/api/matrix/client/v3/pushers';
 import { AsyncStatus, useAsyncCallbackValue } from './useAsyncCallback';
-import { useMatrixClient } from './useMatrixClient';
+import { useClient } from './useClient';
 
 type RefreshHandler = () => void;
 
@@ -13,19 +16,27 @@ export const useEmailNotifications = (): [
   EmailNotificationResult | undefined | null,
   RefreshHandler
 ] => {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
   const [emailState, refresh] = useAsyncCallbackValue<EmailNotificationResult, Error>(
     useCallback(async () => {
-      const tpIDs = (await mx.getThreePids())?.threepids;
-      const emailAddresses = tpIDs.filter((id) => id.medium === 'email').map((id) => id.address);
+      const response = await ct.requestAuthJSON(get3pid({}));
+      const [err, result] = await parseMatrixResp<Get3pidOK>(response);
+      if (err) throw new Error(printMatrixError(err));
+
+      const emailAddresses = result.threepids
+        .filter((id) => id.medium === 'email')
+        .map((id) => id.address);
       if (emailAddresses.length === 0)
         return {
           enabled: false,
         };
 
-      const pushers = (await mx.getPushers())?.pushers;
-      const emailPusher = pushers.find(
+      const resp = await ct.requestAuthJSON(getPushers({}));
+      const [e, r] = await parseMatrixResp<GetPushersOK>(resp);
+      if (e) throw new Error(printMatrixError(e));
+
+      const emailPusher = r.pushers.find(
         (pusher) => pusher.app_id === 'm.email' && emailAddresses.includes(pusher.pushkey)
       );
 
@@ -40,7 +51,7 @@ export const useEmailNotifications = (): [
         enabled: false,
         email: emailAddresses[0],
       };
-    }, [mx])
+    }, [ct])
   );
 
   if (emailState.status === AsyncStatus.Success) {
diff --git a/src/app/hooks/useIgnoredUsers.ts b/src/app/hooks/useIgnoredUsers.ts
index baf2327a..0ac634cb 100644
--- a/src/app/hooks/useIgnoredUsers.ts
+++ b/src/app/hooks/useIgnoredUsers.ts
@@ -1,18 +1,39 @@
 import { useMemo } from 'react';
-import { useAccountData } from './useAccountData';
-import { AccountDataEvent } from '../../types/matrix/accountData';
+import { useAccountData } from './storage/useAccountData';
+import { AccountDataType } from '../../types/matrix/accountData';
 
 export type IgnoredUserListContent = {
   ignored_users?: Record<string, object>;
 };
 
+export const getIgnoredUsersContent = (userList: string[]): IgnoredUserListContent => {
+  const users: Record<string, object> = {};
+  userList.forEach((userId) => {
+    users[userId] = {};
+  });
+
+  return {
+    ignored_users: users,
+  };
+};
+
+export const parseIgnoreUsersContent = (content?: object): string[] => {
+  if (
+    content &&
+    'ignored_users' in content &&
+    typeof content.ignored_users === 'object' &&
+    content.ignored_users
+  ) {
+    return Object.keys(content.ignored_users);
+  }
+  return [];
+};
+
 export const useIgnoredUsers = (): string[] => {
-  const ignoredUserListEvt = useAccountData(AccountDataEvent.IgnoredUserList);
-  const ignoredUsers = useMemo(() => {
-    const ignoredUsersRecord =
-      ignoredUserListEvt?.getContent<IgnoredUserListContent>().ignored_users ?? {};
-    return Object.keys(ignoredUsersRecord);
-  }, [ignoredUserListEvt]);
+  const ignoreEventObjResult = useAccountData(AccountDataType.IgnoredUserList);
+  const content = ignoreEventObjResult.value?.content;
+
+  const ignoredUsers = useMemo(() => parseIgnoreUsersContent(content), [content]);
 
   return ignoredUsers;
 };
diff --git a/src/app/hooks/useImagePackRooms.ts b/src/app/hooks/useImagePackRooms.ts
index f04d2f22..25636589 100644
--- a/src/app/hooks/useImagePackRooms.ts
+++ b/src/app/hooks/useImagePackRooms.ts
@@ -1,22 +1,20 @@
-import { Room } from 'matrix-js-sdk';
+import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';
 import { getAllParents } from '../utils/room';
-import { useMatrixClient } from './useMatrixClient';
+import { useAllJoinedRoomsSet } from './useGetRoom';
+import { roomToParentsAtom } from '../state/room/roomToParents';
 
-export const useImagePackRooms = (
-  roomId: string,
-  roomToParents: Map<string, Set<string>>
-): Room[] => {
-  const mx = useMatrixClient();
+export const useImagePackRooms = (roomId: string): string[] => {
+  const roomToParents = useAtomValue(roomToParentsAtom);
+  const allJoinedRooms = useAllJoinedRoomsSet();
 
-  const imagePackRooms: Room[] = useMemo(() => {
+  const imagePackRooms: string[] = useMemo(() => {
     const allParentSpaces = [roomId].concat(Array.from(getAllParents(roomToParents, roomId)));
-    return allParentSpaces.reduce<Room[]>((list, rId) => {
-      const r = mx.getRoom(rId);
-      if (r) list.push(r);
+    return allParentSpaces.reduce<string[]>((list, rId) => {
+      if (allJoinedRooms.has(rId)) list.push(rId);
       return list;
     }, []);
-  }, [mx, roomId, roomToParents]);
+  }, [roomId, roomToParents, allJoinedRooms]);
 
   return imagePackRooms;
 };
diff --git a/src/app/hooks/useImagePacks.ts b/src/app/hooks/useImagePacks.ts
index 318d6cba..6f3d52fc 100644
--- a/src/app/hooks/useImagePacks.ts
+++ b/src/app/hooks/useImagePacks.ts
@@ -1,161 +1,188 @@
-import { Room } from 'matrix-js-sdk';
-import { useCallback, useMemo, useState } from 'react';
-import { AccountDataEvent } from '../../types/matrix/accountData';
-import { StateEvent } from '../../types/matrix/room';
+import { useCallback, useMemo } from 'react';
+import { ObservableValue, PendingObservableResult } from 'neurone/lib/utils/observable';
+import { AccountDataType } from '../../types/matrix/accountData';
+import { StateEventType } from '../../types/matrix/room';
+import { getGlobalPackRoomToStateKey, ImagePack, ImageUsage } from '../plugins/custom-emoji';
+import { useClient } from './useClient';
 import {
-  getGlobalImagePacks,
-  getRoomImagePack,
-  getRoomImagePacks,
-  getUserImagePack,
-  ImagePack,
-  ImageUsage,
-} from '../plugins/custom-emoji';
-import { useMatrixClient } from './useMatrixClient';
-import { useAccountDataCallback } from './useAccountDataCallback';
-import { useStateEventCallback } from './useStateEventCallback';
+  useComputedPendingObservableResult,
+  useObservableValuePromise,
+} from './useObservableValue';
+import { getJoinRoomStateId, JoinRoomStateObject } from '../../client/storage/collections';
+import { useRoomStateEvent, useRoomStateEvents } from './storage/useRoomStateEvent';
 
-export const useUserImagePack = (): ImagePack | undefined => {
-  const mx = useMatrixClient();
-  const [userPack, setUserPack] = useState(() => getUserImagePack(mx));
-
-  useAccountDataCallback(
-    mx,
-    useCallback(
-      (mEvent) => {
-        if (mEvent.getType() === AccountDataEvent.PoniesUserEmotes) {
-          setUserPack(getUserImagePack(mx));
-        }
-      },
-      [mx]
-    )
+export const useUserImagePack = (): PendingObservableResult<ImagePack | undefined> => {
+  const ct = useClient();
+  const userPackObjPromise = useMemo(
+    () => ct.storage.accountData.observableRead.get(AccountDataType.PoniesUserEmotes),
+    [ct]
   );
 
-  return userPack;
+  const userPackObjResult = useObservableValuePromise(userPackObjPromise);
+
+  return useComputedPendingObservableResult(
+    userPackObjResult,
+    useCallback(
+      (userPackObj) => {
+        if (!userPackObj) return undefined;
+        return ImagePack.fromAccountData(ct.session.userId, userPackObj.event);
+      },
+      [ct]
+    )
+  );
 };
 
-export const useGlobalImagePacks = (): ImagePack[] => {
-  const mx = useMatrixClient();
-  const [globalPacks, setGlobalPacks] = useState(() => getGlobalImagePacks(mx));
+export const useGlobalImagePacks = (): PendingObservableResult<ImagePack[]> => {
+  const ct = useClient();
+  const emoteRoomsObjPromise = useMemo(
+    () => ct.storage.accountData.observableRead.get(AccountDataType.PoniesEmoteRooms),
+    [ct]
+  );
+  const emoteRoomsObjResult = useObservableValuePromise(emoteRoomsObjPromise);
 
-  useAccountDataCallback(
-    mx,
+  const roomToStateKeysResult = useComputedPendingObservableResult(
+    emoteRoomsObjResult,
+    useCallback((emoteRoomsObj) => getGlobalPackRoomToStateKey(emoteRoomsObj?.event.content), [])
+  );
+  const roomToStateKeys = roomToStateKeysResult.value;
+
+  const roomPackEventsPromise = useMemo(() => {
+    const keys = roomToStateKeys
+      ? Object.keys(roomToStateKeys).flatMap((roomId) =>
+          roomToStateKeys[roomId].map((stateKey) =>
+            getJoinRoomStateId(roomId, StateEventType.PoniesRoomEmotes, stateKey)
+          )
+        )
+      : [];
+
+    return ct.storage.joinRoomState.observableRead.getMultiple(keys);
+  }, [ct, roomToStateKeys]);
+
+  const roomPackEventsResult = useObservableValuePromise(roomPackEventsPromise);
+
+  return useComputedPendingObservableResult(
+    roomPackEventsResult,
     useCallback(
-      (mEvent) => {
-        if (mEvent.getType() === AccountDataEvent.PoniesEmoteRooms) {
-          setGlobalPacks(getGlobalImagePacks(mx));
-        }
-      },
-      [mx]
+      (roomPackEvents) =>
+        roomPackEvents
+          .filter((p) => !!p)
+          .map((packEvent) => ImagePack.fromStateEvent(packEvent.roomId, packEvent.event)),
+      []
     )
   );
-
-  useStateEventCallback(
-    mx,
-    useCallback(
-      (mEvent) => {
-        const eventType = mEvent.getType();
-        const roomId = mEvent.getRoomId();
-        const stateKey = mEvent.getStateKey();
-        if (eventType === StateEvent.PoniesRoomEmotes && roomId && typeof stateKey === 'string') {
-          const global = !!globalPacks.find(
-            (pack) =>
-              pack.address && pack.address.roomId === roomId && pack.address.stateKey === stateKey
-          );
-          if (global) {
-            setGlobalPacks(getGlobalImagePacks(mx));
-          }
-        }
-      },
-      [mx, globalPacks]
-    )
-  );
-
-  return globalPacks;
 };
 
-export const useRoomImagePack = (room: Room, stateKey: string): ImagePack | undefined => {
-  const mx = useMatrixClient();
-  const [roomPack, setRoomPack] = useState(() => getRoomImagePack(room, stateKey));
+export const useRoomImagePack = (
+  roomId: string,
+  stateKey: string
+): PendingObservableResult<ImagePack | undefined> => {
+  const roomPackEventResult = useRoomStateEvent(roomId, StateEventType.PoniesRoomEmotes, stateKey);
 
-  useStateEventCallback(
-    mx,
+  return useComputedPendingObservableResult(
+    roomPackEventResult,
     useCallback(
-      (mEvent) => {
-        if (
-          mEvent.getRoomId() === room.roomId &&
-          mEvent.getType() === StateEvent.PoniesRoomEmotes &&
-          mEvent.getStateKey() === stateKey
-        ) {
-          setRoomPack(getRoomImagePack(room, stateKey));
-        }
-      },
-      [room, stateKey]
+      (roomPackEvent) =>
+        roomPackEvent
+          ? ImagePack.fromStateEvent(roomPackEvent.roomId, roomPackEvent.event)
+          : undefined,
+      []
     )
   );
-
-  return roomPack;
 };
 
-export const useRoomImagePacks = (room: Room): ImagePack[] => {
-  const mx = useMatrixClient();
-  const [roomPacks, setRoomPacks] = useState(() => getRoomImagePacks(room));
+export const useRoomImagePacks = (roomId: string): PendingObservableResult<ImagePack[]> => {
+  const roomPackEventsResult = useRoomStateEvents(roomId, StateEventType.PoniesRoomEmotes);
 
-  useStateEventCallback(
-    mx,
+  return useComputedPendingObservableResult(
+    roomPackEventsResult,
     useCallback(
-      (mEvent) => {
-        if (
-          mEvent.getRoomId() === room.roomId &&
-          mEvent.getType() === StateEvent.PoniesRoomEmotes
-        ) {
-          setRoomPacks(getRoomImagePacks(room));
-        }
-      },
-      [room]
+      (roomPackEvents) =>
+        roomPackEvents.map((roomPackEvent) =>
+          ImagePack.fromStateEvent(roomPackEvent.roomId, roomPackEvent.event)
+        ),
+      []
     )
   );
-
-  return roomPacks;
 };
 
-export const useRoomsImagePacks = (rooms: Room[]) => {
-  const mx = useMatrixClient();
-  const [roomPacks, setRoomPacks] = useState(() => rooms.flatMap(getRoomImagePacks));
+export const useRoomsImagePacks = (rooms: string[]): PendingObservableResult<ImagePack[]> => {
+  const ct = useClient();
+  const idsPromise = useMemo(
+    () =>
+      ct.storage.joinRoomState.observableRead.queryIndexKeys(
+        'type',
+        StateEventType.PoniesRoomEmotes
+      ),
+    [ct]
+  );
+  const idsResult = useObservableValuePromise(idsPromise);
 
-  useStateEventCallback(
-    mx,
+  const packKeysResult = useComputedPendingObservableResult(
+    idsResult,
     useCallback(
-      (mEvent) => {
-        if (
-          rooms.find((room) => room.roomId === mEvent.getRoomId()) &&
-          mEvent.getType() === StateEvent.PoniesRoomEmotes
-        ) {
-          setRoomPacks(rooms.flatMap(getRoomImagePacks));
-        }
-      },
+      (ids) =>
+        ids.filter((id) =>
+          rooms.find((roomId) =>
+            id.startsWith(getJoinRoomStateId(roomId, StateEventType.PoniesRoomEmotes, ''))
+          )
+        ),
       [rooms]
     )
   );
 
-  return roomPacks;
+  const roomPackEventsResult = useObservableValuePromise(
+    useMemo(() => {
+      if (!packKeysResult.value) {
+        return new Promise<ObservableValue<[JoinRoomStateObject | undefined]>>(
+          (resolve, reject) => {
+            if (packKeysResult.error) {
+              reject(packKeysResult.error);
+            }
+          }
+        );
+      }
+      return ct.storage.joinRoomState.observableRead.getMultiple(packKeysResult.value);
+    }, [ct, packKeysResult])
+  );
+
+  return useComputedPendingObservableResult(
+    roomPackEventsResult,
+    useCallback(
+      (roomPackEvents) =>
+        roomPackEvents
+          .filter((p) => !!p)
+          .map((roomPackEvent) =>
+            ImagePack.fromStateEvent(roomPackEvent.roomId, roomPackEvent.event)
+          ),
+      []
+    )
+  );
 };
 
-export const useRelevantImagePacks = (usage: ImageUsage, rooms: Room[]): ImagePack[] => {
-  const userPack = useUserImagePack();
-  const globalPacks = useGlobalImagePacks();
-  const roomsPacks = useRoomsImagePacks(rooms);
+export const useRelevantImagePacks = (
+  usage: ImageUsage,
+  rooms: string[]
+): [ImagePack[], boolean | undefined, Error | undefined] => {
+  const userPackResult = useUserImagePack();
+  const globalPacksResult = useGlobalImagePacks();
+
+  const roomsPacksResult = useRoomsImagePacks(rooms);
+  const loading: boolean | undefined =
+    userPackResult.pending || globalPacksResult.pending || roomsPacksResult.pending;
+  const error: Error | undefined =
+    userPackResult.error || globalPacksResult.error || roomsPacksResult.error;
 
   const relevantPacks = useMemo(() => {
-    const packs = userPack ? [userPack] : [];
-    const globalPackIds = new Set(globalPacks.map((pack) => pack.id));
+    const packs = userPackResult.value ? [userPackResult.value] : [];
+    const globalPackIds = new Set(globalPacksResult.value?.map((pack) => pack.id));
 
     const relPacks = packs.concat(
-      globalPacks,
-      roomsPacks.filter((pack) => !globalPackIds.has(pack.id))
+      globalPacksResult.value ?? [],
+      roomsPacksResult.value?.filter((pack) => !globalPackIds.has(pack.id)) ?? []
     );
 
     return relPacks.filter((pack) => pack.getImages(usage).length > 0);
-  }, [userPack, globalPacks, roomsPacks, usage]);
+  }, [userPackResult, globalPacksResult, roomsPacksResult, usage]);
 
-  return relevantPacks;
+  return [relevantPacks, loading, error];
 };
diff --git a/src/app/hooks/useJoinedRoomId.ts b/src/app/hooks/useJoinedRoomId.ts
index 857defa8..ada42fea 100644
--- a/src/app/hooks/useJoinedRoomId.ts
+++ b/src/app/hooks/useJoinedRoomId.ts
@@ -1,19 +1,14 @@
-import { useMemo } from 'react';
-import { useMatrixClient } from './useMatrixClient';
-
-import { getCanonicalAliasRoomId, isRoomAlias } from '../utils/matrix';
+import { isRoomAlias } from '../utils/matrix';
+import { useClient } from './useClient';
 
 export const useJoinedRoomId = (allRooms: string[], roomIdOrAlias: string): string | undefined => {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
-  const joinedRoomId = useMemo(() => {
-    const roomId = isRoomAlias(roomIdOrAlias)
-      ? getCanonicalAliasRoomId(mx, roomIdOrAlias)
-      : roomIdOrAlias;
+  const roomId = isRoomAlias(roomIdOrAlias)
+    ? ct.rooms.join.read.find((rId) => ct.roomToAlias.read.get(rId) === roomIdOrAlias)
+    : roomIdOrAlias;
 
-    if (roomId && allRooms.includes(roomId)) return roomId;
-    return undefined;
-  }, [mx, allRooms, roomIdOrAlias]);
+  if (roomId && allRooms.includes(roomId)) return roomId;
 
-  return joinedRoomId;
+  return undefined;
 };
diff --git a/src/app/hooks/useLocalRoomSummary.ts b/src/app/hooks/useLocalRoomSummary.ts
index 46f81569..4802a3cf 100644
--- a/src/app/hooks/useLocalRoomSummary.ts
+++ b/src/app/hooks/useLocalRoomSummary.ts
@@ -1,44 +1,40 @@
-import { GuestAccess, HistoryVisibility, JoinRule, Room } from 'matrix-js-sdk';
-import { getStateEvent } from '../utils/room';
-import { StateEvent } from '../../types/matrix/room';
+import { JoinRule } from '../../types/matrix/room';
+import { useRoomHeroes } from './storage/useRoomHeros';
+import { useGetRoomName } from './storage/useGetRoomName';
+import { useGetRoomAvatar } from './storage/useGetRoomAvatar';
+import { useRoomTopic } from './storage/useRoomTopic';
+import { useObservableValue } from './useObservableValue';
+import { useClient } from './useClient';
 
 export type LocalRoomSummary = {
   roomId: string;
-  name: string;
+  name?: string;
   topic?: string;
   avatarUrl?: string;
   canonicalAlias?: string;
-  worldReadable?: boolean;
-  guestCanJoin?: boolean;
   memberCount?: number;
-  roomType?: string;
+  space?: boolean;
   joinRule?: JoinRule;
 };
-export const useLocalRoomSummary = (room: Room): LocalRoomSummary => {
-  const topicEvent = getStateEvent(room, StateEvent.RoomTopic);
-  const topicContent = topicEvent?.getContent();
-  const topic =
-    topicContent && typeof topicContent.topic === 'string' ? topicContent.topic : undefined;
-
-  const historyEvent = getStateEvent(room, StateEvent.RoomHistoryVisibility);
-  const historyContent = historyEvent?.getContent();
-  const worldReadable =
-    historyContent && typeof historyContent.history_visibility === 'string'
-      ? historyContent.history_visibility === HistoryVisibility.WorldReadable
-      : undefined;
-
-  const guestCanJoin = room.getGuestAccess() === GuestAccess.CanJoin;
+export const useLocalRoomSummary = (roomId: string): LocalRoomSummary => {
+  const ct = useClient();
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const roomTopic = useRoomTopic(roomId);
+  const roomToAlias = useObservableValue(ct.roomToAlias);
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
+  const roomToSummary = useObservableValue(ct.roomToSummary);
+  const spaceRooms = useObservableValue(ct.spaceRooms);
 
   return {
-    roomId: room.roomId,
-    name: room.name,
-    topic,
-    avatarUrl: room.getMxcAvatarUrl() ?? undefined,
-    canonicalAlias: room.getCanonicalAlias() ?? undefined,
-    worldReadable,
-    guestCanJoin,
-    memberCount: room.getJoinedMemberCount(),
-    roomType: room.getType(),
-    joinRule: room.getJoinRule(),
+    roomId,
+    name: getRoomName(roomId),
+    topic: roomTopic,
+    avatarUrl: getRoomAvatar(roomId),
+    canonicalAlias: roomToAlias.get(roomId),
+    memberCount: roomToSummary.get(roomId)?.['m.joined_member_count'],
+    space: spaceRooms.has(roomId),
+    joinRule: roomToJoinRule.get(roomId),
   };
 };
diff --git a/src/app/hooks/useMediaAuthentication.ts b/src/app/hooks/useMediaAuthentication.ts
index 6e4d06aa..7967cdce 100644
--- a/src/app/hooks/useMediaAuthentication.ts
+++ b/src/app/hooks/useMediaAuthentication.ts
@@ -1,11 +1,11 @@
-import { useSpecVersions } from './useSpecVersions';
+import { useSpecVersionSupport, useUnstableFeatureSupport } from './useSpecVersions';
 
 export const useMediaAuthentication = (): boolean => {
-  const { versions, unstable_features: unstableFeatures } = useSpecVersions();
+  const versionSupport = useSpecVersionSupport('v1.11');
+  const unstableSupport = useUnstableFeatureSupport()('org.matrix.msc3916.stable');
 
   // Media authentication is introduced in spec version 1.11
-  const authenticatedMedia =
-    unstableFeatures?.['org.matrix.msc3916.stable'] || versions.includes('v1.11');
+  const authenticatedMedia = unstableSupport || versionSupport;
 
   return authenticatedMedia;
 };
diff --git a/src/app/hooks/useMemberFilter.ts b/src/app/hooks/useMemberFilter.ts
index 2c33c7c8..8d7a9b7e 100644
--- a/src/app/hooks/useMemberFilter.ts
+++ b/src/app/hooks/useMemberFilter.ts
@@ -1,52 +1,55 @@
 import { useMemo } from 'react';
-import { RoomMember } from 'matrix-js-sdk';
-import { Membership } from '../../types/matrix/room';
+import { GetRoomMemberMembershipCallback } from './useRoomMembers';
+import { JoinRoomMemberObject } from '../../client/storage/collections';
 
-export const MembershipFilter = {
-  filterJoined: (m: RoomMember) => m.membership === Membership.Join,
-  filterInvited: (m: RoomMember) => m.membership === Membership.Invite,
-  filterLeaved: (m: RoomMember) =>
-    m.membership === Membership.Leave &&
-    m.events.member?.getStateKey() === m.events.member?.getSender(),
-  filterKicked: (m: RoomMember) =>
-    m.membership === Membership.Leave &&
-    m.events.member?.getStateKey() !== m.events.member?.getSender(),
-  filterBanned: (m: RoomMember) => m.membership === Membership.Ban,
-};
+export const getMembershipFilter = (getMembership: GetRoomMemberMembershipCallback) => ({
+  filterJoined: (m: JoinRoomMemberObject) => getMembership(m.userId) === 'join',
+  filterInvited: (m: JoinRoomMemberObject) => getMembership(m.userId) === 'invite',
+  filterLeaved: (m: JoinRoomMemberObject) =>
+    getMembership(m.userId) === 'leave' && m.event.state_key === m.event.sender,
+  filterKicked: (m: JoinRoomMemberObject) =>
+    getMembership(m.userId) === 'leave' && m.event.state_key !== m.event.sender,
+  filterBanned: (m: JoinRoomMemberObject) => getMembership(m.userId) === 'ban',
+});
 
-export type MembershipFilterFn = (m: RoomMember) => boolean;
+export type MembershipFilterFn = (m: JoinRoomMemberObject) => boolean;
 
 export type MembershipFilterItem = {
   name: string;
   filterFn: MembershipFilterFn;
 };
 
-export const useMembershipFilterMenu = (): MembershipFilterItem[] =>
-  useMemo(
+export const useMembershipFilterMenu = (
+  getMembership: GetRoomMemberMembershipCallback
+): MembershipFilterItem[] => {
+  const filterFn = useMemo(() => getMembershipFilter(getMembership), [getMembership]);
+
+  return useMemo(
     () => [
       {
         name: 'Joined',
-        filterFn: MembershipFilter.filterJoined,
+        filterFn: filterFn.filterJoined,
       },
       {
         name: 'Invited',
-        filterFn: MembershipFilter.filterInvited,
+        filterFn: filterFn.filterInvited,
       },
       {
         name: 'Left',
-        filterFn: MembershipFilter.filterLeaved,
+        filterFn: filterFn.filterLeaved,
       },
       {
         name: 'Kicked',
-        filterFn: MembershipFilter.filterKicked,
+        filterFn: filterFn.filterKicked,
       },
       {
         name: 'Banned',
-        filterFn: MembershipFilter.filterBanned,
+        filterFn: filterFn.filterBanned,
       },
     ],
-    []
+    [filterFn]
   );
+};
 
 export const useMembershipFilter = (
   index: number,
diff --git a/src/app/hooks/useMemberPowerTag.ts b/src/app/hooks/useMemberPowerTag.ts
index 31e52aa0..2ccc4f20 100644
--- a/src/app/hooks/useMemberPowerTag.ts
+++ b/src/app/hooks/useMemberPowerTag.ts
@@ -1,25 +1,26 @@
 import { useCallback, useMemo } from 'react';
-import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
-import { getPowerLevelTag, PowerLevelTags, usePowerLevelTags } from './usePowerLevelTags';
+import { getPowerLevelTag, PowerLevelTags, usePowerLevelTagsContext } from './usePowerLevelTags';
 import { IPowerLevels, readPowerLevel } from './usePowerLevels';
 import { MemberPowerTag, MemberPowerTagIcon } from '../../types/matrix/room';
 import { useRoomCreatorsTag } from './useRoomCreatorsTag';
 import { ThemeKind } from './useTheme';
 import { accessibleColor } from '../plugins/color';
+import { ClientContext } from '../../client/context';
+import { mxcToHttp } from '../../client/mxcToHttp';
+import { JoinRoomMemberObject } from '../../client/storage/collections';
 
 export type GetMemberPowerTag = (userId: string) => MemberPowerTag;
 
 export const useGetMemberPowerTag = (
-  room: Room,
-  creators: Set<string>,
+  creators: Set<string> | undefined,
   powerLevels: IPowerLevels
 ) => {
   const creatorsTag = useRoomCreatorsTag();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const powerLevelTags = usePowerLevelTagsContext();
 
   const getMemberPowerTag: GetMemberPowerTag = useCallback(
     (userId) => {
-      if (creators.has(userId)) {
+      if (creators?.has(userId)) {
         return creatorsTag;
       }
 
@@ -33,12 +34,16 @@ export const useGetMemberPowerTag = (
 };
 
 export const getPowerTagIconSrc = (
-  mx: MatrixClient,
+  ct: ClientContext,
   useAuthentication: boolean,
   icon: MemberPowerTagIcon
 ): string | undefined =>
   icon?.key?.startsWith('mxc://')
-    ? mx.mxcUrlToHttp(icon.key, 96, 96, 'scale', undefined, undefined, useAuthentication) ?? '🌻'
+    ? mxcToHttp(ct.session.baseUrl, icon.key, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'scale',
+      }) ?? '🌻'
     : icon?.key;
 
 export const useAccessiblePowerTagColors = (
@@ -66,12 +71,12 @@ export const useAccessiblePowerTagColors = (
 };
 
 export const useFlattenPowerTagMembers = (
-  members: RoomMember[],
+  members: JoinRoomMemberObject[],
   getTag: GetMemberPowerTag
-): Array<MemberPowerTag | RoomMember> => {
+): Array<MemberPowerTag | JoinRoomMemberObject> => {
   const PLTagOrRoomMember = useMemo(() => {
     let prevTag: MemberPowerTag | undefined;
-    const tagOrMember: Array<MemberPowerTag | RoomMember> = [];
+    const tagOrMember: Array<MemberPowerTag | JoinRoomMemberObject> = [];
     members.forEach((member) => {
       const tag = getTag(member.userId);
       if (tag !== prevTag) {
diff --git a/src/app/hooks/useMemberSort.ts b/src/app/hooks/useMemberSort.ts
index 48d2f605..a711f42c 100644
--- a/src/app/hooks/useMemberSort.ts
+++ b/src/app/hooks/useMemberSort.ts
@@ -1,46 +1,50 @@
-import { RoomMember } from 'matrix-js-sdk';
 import { useCallback, useMemo } from 'react';
+import { JoinRoomMemberObject } from '../../client/storage/collections';
+import { GetRoomMemberNameCallback } from './useRoomMembers';
 
-export const MemberSort = {
-  Ascending: (a: RoomMember, b: RoomMember) =>
-    a.name.toLowerCase() < b.name.toLowerCase() ? -1 : 1,
-  Descending: (a: RoomMember, b: RoomMember) =>
-    a.name.toLowerCase() > b.name.toLowerCase() ? -1 : 1,
-  NewestFirst: (a: RoomMember, b: RoomMember) =>
-    (b.events.member?.getTs() ?? 0) - (a.events.member?.getTs() ?? 0),
-  Oldest: (a: RoomMember, b: RoomMember) =>
-    (a.events.member?.getTs() ?? 0) - (b.events.member?.getTs() ?? 0),
-};
+export const getMemberSort = (getName: GetRoomMemberNameCallback) => ({
+  Ascending: (a: JoinRoomMemberObject, b: JoinRoomMemberObject) =>
+    getName(a.userId).toLowerCase() < getName(b.userId).toLowerCase() ? -1 : 1,
+  Descending: (a: JoinRoomMemberObject, b: JoinRoomMemberObject) =>
+    getName(a.userId).toLowerCase() > getName(b.userId).toLowerCase() ? -1 : 1,
+  NewestFirst: (a: JoinRoomMemberObject, b: JoinRoomMemberObject) =>
+    b.event.origin_server_ts - a.event.origin_server_ts,
+  Oldest: (a: JoinRoomMemberObject, b: JoinRoomMemberObject) =>
+    a.event.origin_server_ts - b.event.origin_server_ts,
+});
 
-export type MemberSortFn = (a: RoomMember, b: RoomMember) => number;
+export type MemberSortFn = (a: JoinRoomMemberObject, b: JoinRoomMemberObject) => number;
 
 export type MemberSortItem = {
   name: string;
   sortFn: MemberSortFn;
 };
 
-export const useMemberSortMenu = (): MemberSortItem[] =>
-  useMemo(
+export const useMemberSortMenu = (getName: GetRoomMemberNameCallback): MemberSortItem[] => {
+  const sortFun = useMemo(() => getMemberSort(getName), [getName]);
+
+  return useMemo(
     () => [
       {
         name: 'A to Z',
-        sortFn: MemberSort.Ascending,
+        sortFn: sortFun.Ascending,
       },
       {
         name: 'Z to A',
-        sortFn: MemberSort.Descending,
+        sortFn: sortFun.Descending,
       },
       {
         name: 'Newest',
-        sortFn: MemberSort.NewestFirst,
+        sortFn: sortFun.NewestFirst,
       },
       {
         name: 'Oldest',
-        sortFn: MemberSort.Oldest,
+        sortFn: sortFun.Oldest,
       },
     ],
-    []
+    [sortFun]
   );
+};
 
 export const useMemberSort = (index: number, memberSort: MemberSortItem[]): MemberSortItem => {
   const item = memberSort[index] ?? memberSort[0];
@@ -48,20 +52,20 @@ export const useMemberSort = (index: number, memberSort: MemberSortItem[]): Memb
 };
 
 export const useMemberPowerSort = (
-  creators: Set<string>,
+  creators: Set<string> | undefined,
   getPowerLevel: (userId: string) => number
 ): MemberSortFn => {
   const sort: MemberSortFn = useCallback(
     (a, b) => {
-      if (creators.has(a.userId) && creators.has(b.userId)) {
+      if (creators?.has(a.userId) && creators?.has(b.userId)) {
         return 0;
       }
-      if (creators.has(a.userId)) return -1;
-      if (creators.has(b.userId)) return 1;
+      if (creators?.has(a.userId)) return -1;
+      if (creators?.has(b.userId)) return 1;
 
       return getPowerLevel(b.userId) - getPowerLevel(a.userId);
     },
-    [creators]
+    [creators, getPowerLevel]
   );
 
   return sort;
diff --git a/src/app/hooks/useMentionClickHandler.ts b/src/app/hooks/useMentionClickHandler.ts
index 9dc81d4e..d86c1b3d 100644
--- a/src/app/hooks/useMentionClickHandler.ts
+++ b/src/app/hooks/useMentionClickHandler.ts
@@ -1,19 +1,19 @@
 import { ReactEventHandler, useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useRoomNavigate } from './useRoomNavigate';
-import { useMatrixClient } from './useMatrixClient';
 import { isRoomId, isUserId } from '../utils/matrix';
 import { getHomeRoomPath, withSearchParam } from '../pages/pathUtils';
 import { _RoomSearchParams } from '../pages/paths';
 import { useOpenUserRoomProfile } from '../state/hooks/userRoomProfile';
 import { useSpaceOptionally } from './useSpace';
+import { useClient } from './useClient';
 
 export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLElement> => {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const navigate = useNavigate();
   const openProfile = useOpenUserRoomProfile();
-  const space = useSpaceOptionally();
+  const spaceId = useSpaceOptionally();
 
   const handleClick: ReactEventHandler<HTMLElement> = useCallback(
     (evt) => {
@@ -24,13 +24,13 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
       if (typeof mentionId !== 'string') return;
 
       if (isUserId(mentionId)) {
-        openProfile(roomId, space?.roomId, mentionId, target.getBoundingClientRect());
+        openProfile(roomId, spaceId, mentionId, target.getBoundingClientRect());
         return;
       }
 
       const eventId = target.getAttribute('data-mention-event-id') || undefined;
-      if (isRoomId(mentionId) && mx.getRoom(mentionId)) {
-        if (mx.getRoom(mentionId)?.isSpaceRoom()) navigateSpace(mentionId);
+      if (isRoomId(mentionId) && ct.rooms.join.read.includes(mentionId)) {
+        if (ct.spaceRooms.read.has(mentionId)) navigateSpace(mentionId);
         else navigateRoom(mentionId, eventId);
         return;
       }
@@ -40,7 +40,7 @@ export const useMentionClickHandler = (roomId: string): ReactEventHandler<HTMLEl
 
       navigate(viaServers ? withSearchParam<_RoomSearchParams>(path, { viaServers }) : path);
     },
-    [mx, navigate, navigateRoom, navigateSpace, roomId, space, openProfile]
+    [ct, navigate, navigateRoom, navigateSpace, roomId, spaceId, openProfile]
   );
 
   return handleClick;
diff --git a/src/app/hooks/useMutualRooms.ts b/src/app/hooks/useMutualRooms.ts
index a7b38938..34606b4e 100644
--- a/src/app/hooks/useMutualRooms.ts
+++ b/src/app/hooks/useMutualRooms.ts
@@ -1,15 +1,15 @@
 import { useCallback } from 'react';
 import { useMatrixClient } from './useMatrixClient';
 import { AsyncState, useAsyncCallbackValue } from './useAsyncCallback';
-import { useSpecVersions } from './useSpecVersions';
+import { useUnstableFeatureSupport } from './useSpecVersions';
 
 export const useMutualRoomsSupport = (): boolean => {
-  const { unstable_features: unstableFeatures } = useSpecVersions();
+  const checkSupport = useUnstableFeatureSupport();
 
   const supported =
-    unstableFeatures?.['uk.half-shot.msc2666'] ||
-    unstableFeatures?.['uk.half-shot.msc2666.mutual_rooms'] ||
-    unstableFeatures?.['uk.half-shot.msc2666.query_mutual_rooms'];
+    checkSupport('uk.half-shot.msc2666') ||
+    checkSupport('uk.half-shot.msc2666.mutual_rooms') ||
+    checkSupport('uk.half-shot.msc2666.query_mutual_rooms');
 
   return !!supported;
 };
diff --git a/src/app/hooks/useNetwork.ts b/src/app/hooks/useNetwork.ts
new file mode 100644
index 00000000..bf3e6b15
--- /dev/null
+++ b/src/app/hooks/useNetwork.ts
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+export const useNetworkOnlineCallback = (callback: () => void) => {
+  useEffect(() => {
+    const handleNetwork = () => callback();
+
+    window.addEventListener('online', handleNetwork);
+    return () => {
+      window.removeEventListener('online', handleNetwork);
+    };
+  }, [callback]);
+};
+
+export const useNetworkOfflineCallback = (callback: () => void) => {
+  useEffect(() => {
+    const handleNetwork = () => callback();
+
+    window.addEventListener('offline', handleNetwork);
+    return () => {
+      window.removeEventListener('offline', handleNetwork);
+    };
+  }, [callback]);
+};
diff --git a/src/app/hooks/useNotificationMode.ts b/src/app/hooks/useNotificationMode.ts
index df90f647..484bf1cf 100644
--- a/src/app/hooks/useNotificationMode.ts
+++ b/src/app/hooks/useNotificationMode.ts
@@ -1,4 +1,4 @@
-import { PushRuleAction, PushRuleActionName, TweakName } from 'matrix-js-sdk';
+import { PushRuleAction } from 'neurone/lib/api/types';
 import { useCallback, useMemo } from 'react';
 
 export enum NotificationMode {
@@ -7,9 +7,20 @@ export enum NotificationMode {
   NotifyLoud = 'NotifyLoud',
 }
 
+export enum PushRuleActionName {
+  DontNotify = 'dont_notify',
+  Notify = 'notify',
+}
+
+export enum TweakName {
+  Highlight = 'highlight',
+  Sound = 'sound',
+}
+
 export const getNotificationMode = (actions: PushRuleAction[]): NotificationMode => {
   const soundTweak = actions.find(
-    (action) => typeof action === 'object' && action.set_tweak === TweakName.Sound
+    (action) =>
+      typeof action === 'object' && 'set_tweak' in action && action.set_tweak === TweakName.Sound
   );
   const notify = actions.find(
     (action) => typeof action === 'string' && action === PushRuleActionName.Notify
diff --git a/src/app/hooks/useObservableValue.ts b/src/app/hooks/useObservableValue.ts
new file mode 100644
index 00000000..79f80cea
--- /dev/null
+++ b/src/app/hooks/useObservableValue.ts
@@ -0,0 +1,85 @@
+import {
+  ObservableValue,
+  PendingObservableValue,
+  PendingObservableResult,
+  ComputedObservableValue,
+} from 'neurone/lib/utils/observable';
+import { useMemo, useSyncExternalStore, useCallback, useEffect } from 'react';
+
+export function useObservableValue<T>(observableValue: ObservableValue<T>): T {
+  const value = useSyncExternalStore(
+    useCallback((c) => observableValue.subscribe(c), [observableValue]),
+    useCallback(() => observableValue.read, [observableValue])
+  );
+
+  return value;
+}
+
+export function useObservableValueOptionally<T>(
+  observableValue?: ObservableValue<T>
+): T | undefined {
+  const value = useSyncExternalStore(
+    useCallback(
+      (c) => {
+        const unsubscribe = observableValue?.subscribe(c);
+        return () => {
+          unsubscribe?.();
+        };
+      },
+      [observableValue]
+    ),
+    useCallback(() => observableValue?.read, [observableValue])
+  );
+
+  return value;
+}
+
+export function useObservableValueListener<T>(
+  observableValue: ObservableValue<T>,
+  listener: (value: T) => void
+): void {
+  useEffect(() => {
+    const unsub = observableValue.subscribe(listener);
+    return unsub;
+  }, [observableValue, listener]);
+}
+
+export function useObservableDispose<T>(observableValue: ObservableValue<T>) {
+  useEffect(() => () => observableValue.dispose(), [observableValue]);
+}
+
+export function useComputedObservable<T>(observable: ComputedObservableValue<T>): T {
+  const value = useObservableValue(observable);
+  useObservableDispose(observable);
+
+  return value;
+}
+
+export const useObservableValuePromise = <T>(
+  observableValuePromise: Promise<ObservableValue<T>>
+): PendingObservableResult<T> => {
+  const observable: ObservableValue<PendingObservableResult<T>> = useMemo(
+    () => new PendingObservableValue(observableValuePromise),
+    [observableValuePromise]
+  );
+
+  const value = useObservableValue(observable);
+
+  useObservableDispose(observable);
+
+  return value;
+};
+
+export const useComputedPendingObservableResult = <T, U>(
+  result: PendingObservableResult<T>,
+  compute: (value: T) => U
+): PendingObservableResult<U> => {
+  const computedResult: PendingObservableResult<U> = useMemo(() => {
+    const { value, error } = result;
+    if (value) return { value: compute(value) };
+    if (error) return { error };
+    return { pending: true };
+  }, [result, compute]);
+
+  return computedResult;
+};
diff --git a/src/app/hooks/useParsedLoginFlows.ts b/src/app/hooks/useParsedLoginFlows.ts
index 088a514e..17276574 100644
--- a/src/app/hooks/useParsedLoginFlows.ts
+++ b/src/app/hooks/useParsedLoginFlows.ts
@@ -1,22 +1,19 @@
 import { useMemo } from 'react';
-import { ILoginFlow, IPasswordFlow, ISSOFlow, LoginFlow } from 'matrix-js-sdk/lib/@types/auth';
+import { LoginFlow } from 'neurone/lib/api/types';
 
-export const getSSOFlow = (loginFlows: LoginFlow[]): ISSOFlow | undefined =>
-  loginFlows.find((flow) => flow.type === 'm.login.sso' || flow.type === 'm.login.cas') as
-    | ISSOFlow
-    | undefined;
+const getSSOFlow = (loginFlows: LoginFlow[]): LoginFlow | undefined =>
+  loginFlows.find((flow) => flow.type === 'm.login.sso' || flow.type === 'm.login.cas');
 
-export const getPasswordFlow = (loginFlows: LoginFlow[]): IPasswordFlow | undefined =>
-  loginFlows.find((flow) => flow.type === 'm.login.password') as IPasswordFlow;
-export const getTokenFlow = (loginFlows: LoginFlow[]): LoginFlow | undefined =>
-  loginFlows.find((flow) => flow.type === 'm.login.token') as ILoginFlow & {
-    type: 'm.login.token';
-  };
+const getPasswordFlow = (loginFlows: LoginFlow[]): LoginFlow | undefined =>
+  loginFlows.find((flow) => flow.type === 'm.login.password');
+
+const getTokenFlow = (loginFlows: LoginFlow[]): LoginFlow | undefined =>
+  loginFlows.find((flow) => flow.type === 'm.login.token');
 
 export type ParsedLoginFlows = {
   password?: LoginFlow;
   token?: LoginFlow;
-  sso?: ISSOFlow;
+  sso?: LoginFlow;
 };
 export const useParsedLoginFlows = (loginFlows: LoginFlow[]) => {
   const parsedFlow: ParsedLoginFlows = useMemo<ParsedLoginFlows>(
diff --git a/src/app/hooks/usePasswordEmail.ts b/src/app/hooks/usePasswordEmail.ts
index 37e96433..cf79786e 100644
--- a/src/app/hooks/usePasswordEmail.ts
+++ b/src/app/hooks/usePasswordEmail.ts
@@ -1,30 +1,54 @@
-import { MatrixClient, MatrixError } from 'matrix-js-sdk';
-import { useCallback, useRef } from 'react';
+import { useCallback, useMemo, useRef } from 'react';
+import {
+  postPasswordEmailRequestToken,
+  PostPasswordEmailRequestTokenOK,
+} from 'neurone/lib/api/matrix/client/v3/account';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { AsyncState, useAsyncCallback } from './useAsyncCallback';
-import { RequestEmailTokenCallback, RequestEmailTokenResponse } from './types';
+import { RequestEmailTokenCallback, RequestEmailTokenResult } from './types';
+import { getJSONRequest } from '../../client/request';
 
 export const usePasswordEmail = (
-  mx: MatrixClient
-): [AsyncState<RequestEmailTokenResponse, MatrixError>, RequestEmailTokenCallback] => {
+  baseUrl: string
+): [AsyncState<RequestEmailTokenResult, Error>, RequestEmailTokenCallback] => {
   const sendAttemptRef = useRef(1);
+  const requestJSON = useMemo(() => getJSONRequest(baseUrl), [baseUrl]);
 
   const passwordEmailCallback: RequestEmailTokenCallback = useCallback(
     async (email, clientSecret, nextLink) => {
       const sendAttempt = sendAttemptRef.current;
       sendAttemptRef.current += 1;
-      const result = await mx.requestPasswordEmailToken(email, clientSecret, sendAttempt, nextLink);
-      return {
-        email,
-        clientSecret,
-        result,
-      };
+
+      const response = await requestJSON(
+        postPasswordEmailRequestToken({
+          body: {
+            email,
+            client_secret: clientSecret,
+            send_attempt: sendAttempt,
+            next_link: nextLink,
+          },
+        })
+      );
+
+      const [error, result] = await parseMatrixResp<PostPasswordEmailRequestTokenOK>(response);
+
+      if (error) return [error, undefined];
+
+      return [
+        undefined,
+        {
+          email,
+          clientSecret,
+          result,
+        },
+      ];
     },
-    [mx]
+    [requestJSON]
   );
 
   const [passwordEmailState, passwordEmail] = useAsyncCallback<
-    RequestEmailTokenResponse,
-    MatrixError,
+    RequestEmailTokenResult,
+    Error,
     Parameters<RequestEmailTokenCallback>
   >(passwordEmailCallback);
 
diff --git a/src/app/hooks/usePendingMembers.ts b/src/app/hooks/usePendingMembers.ts
new file mode 100644
index 00000000..d533c8c9
--- /dev/null
+++ b/src/app/hooks/usePendingMembers.ts
@@ -0,0 +1,74 @@
+import { useCallback, useEffect, useMemo } from 'react';
+import { getMembers, GetMembersOK } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { StateEventWithoutRoomId } from 'neurone/lib/api/types';
+import { useClient } from './useClient';
+import { useObservableValue } from './useObservableValue';
+import {
+  getJoinRoomMemberId,
+  JoinRoomMemberObject,
+  sessionValue,
+} from '../../client/storage/collections';
+import { useAlive } from './useAlive';
+
+export const usePendingMembers = (roomId: string): boolean => {
+  const ct = useClient();
+  const pendingMemberRooms = useObservableValue(ct.pendingMemberRooms);
+  const hasPendingMembers = useMemo(
+    () => pendingMemberRooms.includes(roomId),
+    [pendingMemberRooms, roomId]
+  );
+
+  return hasPendingMembers;
+};
+
+export const usePendingMemberLoader = (roomId: string, pending: boolean) => {
+  const ct = useClient();
+  const alive = useAlive();
+
+  const loadMembers = useCallback(
+    async (signal?: AbortSignal) => {
+      const response = await ct.requestAuthJSON(getMembers({ pathParams: { roomId } }), signal);
+      const [err, result] = await parseMatrixResp<GetMembersOK>(response);
+      if (err) {
+        throw new Error(printMatrixError(err));
+      }
+
+      const memberObjects: JoinRoomMemberObject[] =
+        result?.chunk.map((event) => {
+          const eventWithoutRoomId: StateEventWithoutRoomId = event;
+          if ('room_id' in eventWithoutRoomId) delete eventWithoutRoomId.room_id;
+
+          const obj: JoinRoomMemberObject = {
+            id: getJoinRoomMemberId(roomId, eventWithoutRoomId.state_key),
+            roomId,
+            userId: eventWithoutRoomId.state_key,
+            event: eventWithoutRoomId,
+          };
+
+          return obj;
+        }) ?? [];
+
+      if (alive()) {
+        await ct.storage.joinRoomMember.write.putMultiple(memberObjects);
+        await ct.storage.sessionValue.write.put({
+          id: sessionValue.pendingMemberRooms.id,
+          value: ct.pendingMemberRooms.read.filter((rId) => rId !== roomId),
+        });
+      }
+    },
+    [ct, roomId, alive]
+  );
+
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    if (pending) {
+      loadMembers(abortController.signal);
+    }
+
+    return () => {
+      abortController.abort();
+    };
+  }, [pending, loadMembers]);
+};
diff --git a/src/app/hooks/usePowerLevelTags.ts b/src/app/hooks/usePowerLevelTags.ts
index 0a6cca50..c90ddaf4 100644
--- a/src/app/hooks/usePowerLevelTags.ts
+++ b/src/app/hooks/usePowerLevelTags.ts
@@ -1,8 +1,10 @@
-import { Room } from 'matrix-js-sdk';
-import { useMemo } from 'react';
+import { createContext, useContext, useMemo } from 'react';
+import { PendingObservableResult } from 'neurone/lib/utils/observable';
 import { IPowerLevels } from './usePowerLevels';
-import { useStateEvent } from './useStateEvent';
-import { MemberPowerTag, StateEvent } from '../../types/matrix/room';
+import { MemberPowerTag, StateEventType } from '../../types/matrix/room';
+import { getJoinRoomStateId, JoinRoomStateObject } from '../../client/storage/collections';
+import { useClient } from './useClient';
+import { useObservableValuePromise } from './useObservableValue';
 
 export type PowerLevelTags = Record<number, MemberPowerTag>;
 
@@ -87,11 +89,38 @@ const generateFallbackTag = (powerLevelTags: PowerLevelTags, power: number): Mem
   };
 };
 
-export const usePowerLevelTags = (room: Room, powerLevels: IPowerLevels): PowerLevelTags => {
-  const tagsEvent = useStateEvent(room, StateEvent.PowerLevelTags);
+export function usePowerLevelTagsState(
+  roomId: string
+): PendingObservableResult<JoinRoomStateObject | undefined> {
+  const ct = useClient();
 
+  const eventObservablePromise = useMemo(
+    () =>
+      ct.storage.joinRoomState.observableRead.get(
+        getJoinRoomStateId(roomId, StateEventType.PowerLevelTags, '')
+      ),
+    [ct, roomId]
+  );
+
+  return useObservableValuePromise(eventObservablePromise);
+}
+
+const PowerLevelTagsContext = createContext<PowerLevelTags | null>(null);
+
+export const PowerLevelTagsContextProvider = PowerLevelTagsContext.Provider;
+
+export const usePowerLevelTagsContext = (): PowerLevelTags => {
+  const tags = useContext(PowerLevelTagsContext);
+  if (!tags) throw new Error('PowerLevelTagsContext is not initialized!');
+  return tags;
+};
+
+export const usePowerLevelTags = (
+  powerLevels: IPowerLevels,
+  eventObj: JoinRoomStateObject | undefined
+): PowerLevelTags => {
   const powerLevelTags: PowerLevelTags = useMemo(() => {
-    const content = tagsEvent?.getContent<PowerLevelTags>();
+    const { content } = eventObj?.event ?? {};
     const powerToTags: PowerLevelTags = { ...content };
 
     const powers = getUsedPowers(powerLevels);
@@ -102,7 +131,7 @@ export const usePowerLevelTags = (room: Room, powerLevels: IPowerLevels): PowerL
     });
 
     return powerToTags;
-  }, [powerLevels, tagsEvent]);
+  }, [powerLevels, eventObj]);
 
   return powerLevelTags;
 };
diff --git a/src/app/hooks/usePowerLevels.ts b/src/app/hooks/usePowerLevels.ts
index 0281b23c..80ef3fdb 100644
--- a/src/app/hooks/usePowerLevels.ts
+++ b/src/app/hooks/usePowerLevels.ts
@@ -1,11 +1,14 @@
 import { MatrixEvent, Room } from 'matrix-js-sdk';
 import { createContext, useCallback, useContext, useMemo, useState } from 'react';
 import produce from 'immer';
-import { useStateEvent } from './useStateEvent';
-import { StateEvent } from '../../types/matrix/room';
+import { PendingObservableResult } from 'neurone/lib/utils/observable';
+import { StateEvent, StateEventType } from '../../types/matrix/room';
 import { useStateEventCallback } from './useStateEventCallback';
 import { useMatrixClient } from './useMatrixClient';
 import { getStateEvent } from '../utils/room';
+import { getJoinRoomStateId, JoinRoomStateObject } from '../../client/storage/collections';
+import { useClient } from './useClient';
+import { useObservableValuePromise } from './useObservableValue';
 
 export type PowerLevelActions = 'invite' | 'redact' | 'kick' | 'ban' | 'historical';
 export type PowerLevelNotificationsAction = 'room';
@@ -65,17 +68,33 @@ const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
   return powerLevels;
 };
 
-export function usePowerLevels(room: Room): IPowerLevels {
-  const powerLevelsEvent = useStateEvent(room, StateEvent.RoomPowerLevels);
-  const powerLevels: IPowerLevels = useMemo(
-    () => getPowersLevelFromMatrixEvent(powerLevelsEvent),
-    [powerLevelsEvent]
+export function usePowerLevelsState(
+  roomId: string
+): PendingObservableResult<JoinRoomStateObject | undefined> {
+  const ct = useClient();
+
+  const eventObservablePromise = useMemo(
+    () =>
+      ct.storage.joinRoomState.observableRead.get(
+        getJoinRoomStateId(roomId, StateEventType.RoomPowerLevels, '')
+      ),
+    [ct, roomId]
   );
 
+  return useObservableValuePromise(eventObservablePromise);
+}
+
+export function usePowerLevels(eventObj: JoinRoomStateObject | undefined): IPowerLevels {
+  const powerLevels: IPowerLevels = useMemo(() => {
+    const content: IPowerLevels | undefined = eventObj?.event.content;
+
+    return !content ? DEFAULT_POWER_LEVELS : fillMissingPowers(content);
+  }, [eventObj]);
+
   return powerLevels;
 }
 
-export const PowerLevelsContext = createContext<IPowerLevels | null>(null);
+const PowerLevelsContext = createContext<IPowerLevels | null>(null);
 
 export const PowerLevelsContextProvider = PowerLevelsContext.Provider;
 
diff --git a/src/app/hooks/usePushRule.ts b/src/app/hooks/usePushRule.ts
index ec87c217..48ee655d 100644
--- a/src/app/hooks/usePushRule.ts
+++ b/src/app/hooks/usePushRule.ts
@@ -1,21 +1,21 @@
 import {
-  IPushRule,
-  IPushRules,
+  PushRule,
   PushRuleAction,
   PushRuleCondition,
   PushRuleKind,
-  RuleId,
-} from 'matrix-js-sdk';
+  PushRules,
+} from 'neurone/lib/api/types';
 import { useMemo } from 'react';
+import { PushRuleId } from '../../types/matrix/accountData';
 
 export type PushRuleData = {
   kind: PushRuleKind;
-  pushRule: IPushRule;
+  pushRule: PushRule;
 };
 
 export const makePushRuleData = (
   kind: PushRuleKind,
-  ruleId: RuleId,
+  ruleId: PushRuleId,
   actions: PushRuleAction[],
   conditions?: PushRuleCondition[],
   pattern?: string,
@@ -34,16 +34,16 @@ export const makePushRuleData = (
 });
 
 export const orderedPushRuleKinds: PushRuleKind[] = [
-  PushRuleKind.Override,
-  PushRuleKind.ContentSpecific,
-  PushRuleKind.RoomSpecific,
-  PushRuleKind.SenderSpecific,
-  PushRuleKind.Underride,
+  'override',
+  'content',
+  'room',
+  'sender',
+  'underride',
 ];
 
 export const getPushRule = (
-  pushRules: IPushRules,
-  ruleId: RuleId | string
+  pushRules: PushRules,
+  ruleId: PushRuleId | string
 ): PushRuleData | undefined => {
   const { global } = pushRules;
 
@@ -66,6 +66,6 @@ export const getPushRule = (
 };
 
 export const usePushRule = (
-  pushRules: IPushRules,
-  ruleId: RuleId | string
+  pushRules: PushRules,
+  ruleId: PushRuleId | string
 ): PushRuleData | undefined => useMemo(() => getPushRule(pushRules, ruleId), [pushRules, ruleId]);
diff --git a/src/app/hooks/useRecentEmoji.ts b/src/app/hooks/useRecentEmoji.ts
index 926075f5..abc40a6f 100644
--- a/src/app/hooks/useRecentEmoji.ts
+++ b/src/app/hooks/useRecentEmoji.ts
@@ -1,23 +1,28 @@
-import { useEffect, useState } from 'react';
-import { ClientEvent, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
+import { useCallback, useMemo } from 'react';
+import { PendingObservableResult } from 'neurone/lib/utils/observable';
 import { getRecentEmojis } from '../plugins/recent-emoji';
-import { AccountDataEvent } from '../../types/matrix/accountData';
+import { AccountDataType } from '../../types/matrix/accountData';
 import { IEmoji } from '../plugins/emoji';
+import {
+  useComputedPendingObservableResult,
+  useObservableValuePromise,
+} from './useObservableValue';
+import { useClient } from './useClient';
 
-export const useRecentEmoji = (mx: MatrixClient, limit?: number): IEmoji[] => {
-  const [recentEmoji, setRecentEmoji] = useState(() => getRecentEmojis(mx, limit));
+export const useRecentEmoji = (limit?: number): PendingObservableResult<IEmoji[]> => {
+  const ct = useClient();
+  const recentEmojiObjResult = useObservableValuePromise(
+    useMemo(
+      () => ct.storage.accountData.observableRead.get(AccountDataType.ElementRecentEmoji),
+      [ct]
+    )
+  );
 
-  useEffect(() => {
-    const handleAccountData = (event: MatrixEvent) => {
-      if (event.getType() !== AccountDataEvent.ElementRecentEmoji) return;
-      setRecentEmoji(getRecentEmojis(mx, limit));
-    };
-
-    mx.on(ClientEvent.AccountData, handleAccountData);
-    return () => {
-      mx.removeListener(ClientEvent.AccountData, handleAccountData);
-    };
-  }, [mx, limit]);
-
-  return recentEmoji;
+  return useComputedPendingObservableResult(
+    recentEmojiObjResult,
+    useCallback(
+      (recentEmojiObj) => (recentEmojiObj ? getRecentEmojis(recentEmojiObj.event, limit) : []),
+      [limit]
+    )
+  );
 };
diff --git a/src/app/hooks/useRecoveryAttempt.ts b/src/app/hooks/useRecoveryAttempt.ts
new file mode 100644
index 00000000..f8505c92
--- /dev/null
+++ b/src/app/hooks/useRecoveryAttempt.ts
@@ -0,0 +1,26 @@
+import { useRef } from 'react';
+
+export const getAttemptDelaySec = (attempt: number): number => {
+  if (attempt > 5) return 60;
+  if (attempt === 5) return 45;
+  if (attempt === 4) return 30;
+  if (attempt === 3) return 15;
+  if (attempt === 2) return 10;
+  if (attempt === 1) return 5;
+
+  return 0;
+};
+
+export const useRecoveryAttempt = (hasError: boolean, hasRecovered: boolean): number => {
+  const recoverAttemptRef = useRef(0);
+
+  if (hasError) {
+    recoverAttemptRef.current += 1;
+  }
+
+  if (hasRecovered) {
+    recoverAttemptRef.current = 0;
+  }
+
+  return recoverAttemptRef.current;
+};
diff --git a/src/app/hooks/useRegisterEmail.ts b/src/app/hooks/useRegisterEmail.ts
index d29c9e6d..e504ce7c 100644
--- a/src/app/hooks/useRegisterEmail.ts
+++ b/src/app/hooks/useRegisterEmail.ts
@@ -1,30 +1,54 @@
-import { MatrixClient, MatrixError } from 'matrix-js-sdk';
-import { useCallback, useRef } from 'react';
+import { useCallback, useRef, useMemo } from 'react';
+import {
+  PostEmailRegisterTokenOK,
+  postEmailRequestToken,
+} from 'neurone/lib/api/matrix/client/v3/register';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { AsyncState, useAsyncCallback } from './useAsyncCallback';
-import { RequestEmailTokenCallback, RequestEmailTokenResponse } from './types';
+import { RequestEmailTokenCallback, RequestEmailTokenResult } from './types';
+import { getJSONRequest } from '../../client/request';
 
 export const useRegisterEmail = (
-  mx: MatrixClient
-): [AsyncState<RequestEmailTokenResponse, MatrixError>, RequestEmailTokenCallback] => {
+  baseUrl: string
+): [AsyncState<RequestEmailTokenResult, Error>, RequestEmailTokenCallback] => {
+  const requestJSON = useMemo(() => getJSONRequest(baseUrl), [baseUrl]);
   const sendAttemptRef = useRef(1);
 
   const registerEmailCallback: RequestEmailTokenCallback = useCallback(
     async (email, clientSecret, nextLink) => {
       const sendAttempt = sendAttemptRef.current;
       sendAttemptRef.current += 1;
-      const result = await mx.requestRegisterEmailToken(email, clientSecret, sendAttempt, nextLink);
-      return {
-        email,
-        clientSecret,
-        result,
-      };
+
+      const response = await requestJSON(
+        postEmailRequestToken({
+          body: {
+            email,
+            client_secret: clientSecret,
+            next_link: nextLink,
+            send_attempt: sendAttempt,
+          },
+        })
+      );
+
+      const [error, result] = await parseMatrixResp<PostEmailRegisterTokenOK>(response);
+
+      if (error) return [error, undefined];
+
+      return [
+        undefined,
+        {
+          email,
+          clientSecret,
+          result,
+        },
+      ];
     },
-    [mx]
+    [requestJSON]
   );
 
   const [registerEmailState, registerEmail] = useAsyncCallback<
-    RequestEmailTokenResponse,
-    MatrixError,
+    RequestEmailTokenResult,
+    Error,
     Parameters<RequestEmailTokenCallback>
   >(registerEmailCallback);
 
diff --git a/src/app/hooks/useReportRoomSupported.ts b/src/app/hooks/useReportRoomSupported.ts
index 198172cd..3d5baa55 100644
--- a/src/app/hooks/useReportRoomSupported.ts
+++ b/src/app/hooks/useReportRoomSupported.ts
@@ -1,10 +1,11 @@
-import { useSpecVersions } from './useSpecVersions';
+import { useSpecVersionSupport, useUnstableFeatureSupport } from './useSpecVersions';
 
 export const useReportRoomSupported = (): boolean => {
-  const { versions, unstable_features: unstableFeatures } = useSpecVersions();
+  const versionSupport = useSpecVersionSupport('v1.13');
+  const unstableSupport = useUnstableFeatureSupport()('org.matrix.msc4151');
 
   // report room is introduced in spec version 1.13
-  const supported = unstableFeatures?.['org.matrix.msc4151'] || versions.includes('v1.13');
+  const supported = unstableSupport || versionSupport;
 
   return supported;
 };
diff --git a/src/app/hooks/useRequest.ts b/src/app/hooks/useRequest.ts
new file mode 100644
index 00000000..c08a1d34
--- /dev/null
+++ b/src/app/hooks/useRequest.ts
@@ -0,0 +1,22 @@
+import { MatrixRequest } from 'neurone/lib/matrix-request';
+import { createContext, useContext } from 'react';
+
+const JSONRequestContext = createContext<MatrixRequest | null>(null);
+export const JSONRequestProvider = JSONRequestContext.Provider;
+export const useJSONRequest = (): MatrixRequest => {
+  const request = useContext(JSONRequestContext);
+
+  if (!request) throw new Error('JSON request is not provided!');
+
+  return request;
+};
+
+const AuthJSONRequestContext = createContext<MatrixRequest | null>(null);
+export const AuthJSONRequestProvider = AuthJSONRequestContext.Provider;
+export const useAuthJSONRequest = (): MatrixRequest => {
+  const request = useContext(AuthJSONRequestContext);
+
+  if (!request) throw new Error('Auth JSON request is not provided!');
+
+  return request;
+};
diff --git a/src/app/hooks/useRoom.ts b/src/app/hooks/useRoom.ts
index 4041887d..398c962f 100644
--- a/src/app/hooks/useRoom.ts
+++ b/src/app/hooks/useRoom.ts
@@ -1,11 +1,10 @@
-import { Room } from 'matrix-js-sdk';
 import { createContext, useContext } from 'react';
 
-const RoomContext = createContext<Room | null>(null);
+const RoomContext = createContext<string | null>(null);
 
 export const RoomProvider = RoomContext.Provider;
 
-export function useRoom(): Room {
+export function useRoom(): string {
   const room = useContext(RoomContext);
   if (!room) throw new Error('Room not provided!');
   return room;
diff --git a/src/app/hooks/useRoomCreators.ts b/src/app/hooks/useRoomCreators.ts
index 269d11af..911f9b2e 100644
--- a/src/app/hooks/useRoomCreators.ts
+++ b/src/app/hooks/useRoomCreators.ts
@@ -1,9 +1,9 @@
-import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
-import { useMemo } from 'react';
-import { useStateEvent } from './useStateEvent';
+import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
 import { IRoomCreateContent, StateEvent } from '../../types/matrix/room';
 import { creatorsSupported } from '../utils/matrix';
 import { getStateEvent } from '../utils/room';
+import { useObservableValue } from './useObservableValue';
+import { useClient } from './useClient';
 
 export const getRoomCreators = (createEvent: MatrixEvent): Set<string> => {
   const createContent = createEvent.getContent<IRoomCreateContent>();
@@ -27,15 +27,15 @@ export const getRoomCreators = (createEvent: MatrixEvent): Set<string> => {
   return creators;
 };
 
-export const useRoomCreators = (room: Room): Set<string> => {
-  const createEvent = useStateEvent(room, StateEvent.RoomCreate);
+export const useRoomCreators = (roomId: string): Set<string> | undefined => {
+  const ct = useClient();
+  const roomToCreators = useObservableValue(ct.roomToCreators);
 
-  const creators = useMemo(
-    () => (createEvent ? getRoomCreators(createEvent) : new Set<string>()),
-    [createEvent]
-  );
+  if (!creatorsSupported(ct.roomToVersion.read.get(roomId) ?? '1')) {
+    return undefined;
+  }
 
-  return creators;
+  return roomToCreators.get(roomId);
 };
 
 export const getRoomCreatorsForRoomId = (mx: MatrixClient, roomId: string): Set<string> => {
diff --git a/src/app/hooks/useRoomEvent.ts b/src/app/hooks/useRoomEvent.ts
index c2715f1f..93fdf02e 100644
--- a/src/app/hooks/useRoomEvent.ts
+++ b/src/app/hooks/useRoomEvent.ts
@@ -1,29 +1,23 @@
-import { IEvent, MatrixEvent, Room } from 'matrix-js-sdk';
 import { useCallback, useMemo } from 'react';
-import to from 'await-to-js';
-import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
+import { getEvent, GetEventOK } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { useQuery } from '@tanstack/react-query';
-import { useMatrixClient } from './useMatrixClient';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { ClientEvent, MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { useClient } from './useClient';
 
-const useFetchEvent = (room: Room, eventId: string) => {
-  const mx = useMatrixClient();
+const useFetchEvent = (roomId: string, eventId: string) => {
+  const ct = useClient();
 
-  const fetchEventCallback = useCallback(async () => {
-    const evt = await mx.fetchRoomEvent(room.roomId, eventId);
-    const mEvent = new MatrixEvent(evt);
+  const fetchEventCallback = useCallback(async (): Promise<ClientEvent> => {
+    const resp = await ct.requestAuthJSON(getEvent({ pathParams: { roomId, eventId } }));
 
-    if (evt.unsigned?.['m.relations'] && evt.unsigned?.['m.relations']['m.replace']) {
-      const replaceEvt = evt.unsigned?.['m.relations']['m.replace'] as IEvent;
-      const replaceEvent = new MatrixEvent(replaceEvt);
-      mEvent.makeReplaced(replaceEvent);
+    const [err, result] = await parseMatrixResp<GetEventOK>(resp);
+    if (err) {
+      throw new Error(printMatrixError(err));
     }
 
-    if (mEvent.isEncrypted() && mx.getCrypto()) {
-      await to(mEvent.attemptDecryption(mx.getCrypto() as CryptoBackend));
-    }
-
-    return mEvent;
-  }, [mx, room.roomId, eventId]);
+    return result;
+  }, [ct, roomId, eventId]);
 
   return fetchEventCallback;
 };
@@ -35,20 +29,20 @@ const useFetchEvent = (room: Room, eventId: string) => {
  * @returns `MatrixEvent`, `undefined` means loading, `null` means failure
  */
 export const useRoomEvent = (
-  room: Room,
+  roomId: string,
   eventId: string,
-  getLocally?: () => MatrixEvent | undefined
+  getLocally?: () => MessageEventWithoutRoomId | undefined
 ) => {
   const event = useMemo(() => {
     if (getLocally) return getLocally();
-    return room.findEventById(eventId);
-  }, [room, eventId, getLocally]);
+    return undefined;
+  }, [getLocally]);
 
-  const fetchEvent = useFetchEvent(room, eventId);
+  const fetchEvent = useFetchEvent(roomId, eventId);
 
   const { data, error } = useQuery({
     enabled: event === undefined,
-    queryKey: [room.roomId, eventId],
+    queryKey: [roomId, eventId],
     queryFn: fetchEvent,
     staleTime: Infinity,
     gcTime: 60 * 60 * 1000, // 1hour
diff --git a/src/app/hooks/useRoomMembers.ts b/src/app/hooks/useRoomMembers.ts
index df369011..e30d83e5 100644
--- a/src/app/hooks/useRoomMembers.ts
+++ b/src/app/hooks/useRoomMembers.ts
@@ -1,37 +1,108 @@
-import { MatrixClient, MatrixEvent, RoomMember, RoomMemberEvent } from 'matrix-js-sdk';
-import { useEffect, useState } from 'react';
+import { createContext, useCallback, useContext, useMemo } from 'react';
+import { PendingObservableResult } from 'neurone/lib/utils/observable';
+import { RoomMembership } from 'neurone/lib/api/types';
+import { useClient } from './useClient';
+import { useObservableValuePromise } from './useObservableValue';
+import { JoinRoomMemberObject } from '../../client/storage/collections';
+import { getMxIdLocalPart } from '../utils/matrix';
+import {
+  roomMemberContentAvatarUrl,
+  roomMemberContentDisplayname,
+  roomMemberContentMembership,
+} from '../utils/room';
 
-export const useRoomMembers = (mx: MatrixClient, roomId: string): RoomMember[] => {
-  const [members, setMembers] = useState<RoomMember[]>([]);
-
-  useEffect(() => {
-    const room = mx.getRoom(roomId);
-    let loadingMembers = true;
-    let disposed = false;
-
-    const updateMemberList = (event?: MatrixEvent) => {
-      if (!room || disposed || (event && event.getRoomId() !== roomId)) return;
-      if (loadingMembers) return;
-      setMembers(room.getMembers());
-    };
-
-    if (room) {
-      setMembers(room.getMembers());
-      room.loadMembersIfNeeded().then(() => {
-        loadingMembers = false;
-        if (disposed) return;
-        updateMemberList();
-      });
-    }
-
-    mx.on(RoomMemberEvent.Membership, updateMemberList);
-    mx.on(RoomMemberEvent.PowerLevel, updateMemberList);
-    return () => {
-      disposed = true;
-      mx.removeListener(RoomMemberEvent.Membership, updateMemberList);
-      mx.removeListener(RoomMemberEvent.PowerLevel, updateMemberList);
-    };
-  }, [mx, roomId]);
-
-  return members;
+export type GetRoomMemberCallback = (userId: string) => JoinRoomMemberObject | undefined;
+export type GetRoomMemberNameCallback = (userId: string) => string;
+export type GetRoomMemberAvatarCallback = (userId: string) => string | undefined;
+export type GetRoomMemberMembershipCallback = (userId: string) => RoomMembership | undefined;
+export type RoomMembersAPI = {
+  getMember: GetRoomMemberCallback;
+  getName: GetRoomMemberNameCallback;
+  getAvatar: GetRoomMemberAvatarCallback;
+  getMembership: GetRoomMemberMembershipCallback;
+  memberEventsResult: PendingObservableResult<JoinRoomMemberObject[]>;
+};
+
+// FIXME: remove after usage over
+export const useRoomMembers = () => undefined;
+
+export const useCreateRoomMembersAPI = (roomId: string): RoomMembersAPI => {
+  const ct = useClient();
+  const memberEventsPromise = useMemo(
+    () => ct.storage.joinRoomMember.observableRead.queryIndex('roomId', roomId),
+    [ct, roomId]
+  );
+
+  const memberEventsResult = useObservableValuePromise(memberEventsPromise);
+  const memberEvents = memberEventsResult.value;
+
+  const userIdToMemberEvent = useMemo(() => {
+    const uToM: Record<string, JoinRoomMemberObject> = {};
+    memberEvents?.forEach((member) => {
+      uToM[member.userId] = member;
+    });
+    return uToM;
+  }, [memberEvents]);
+
+  const getMember: GetRoomMemberCallback = useCallback(
+    (userId) => {
+      const member = userIdToMemberEvent[userId];
+      return member;
+    },
+    [userIdToMemberEvent]
+  );
+
+  const getName: GetRoomMemberNameCallback = useCallback(
+    (userId) => {
+      const member = getMember(userId);
+
+      const content = member?.event.content;
+      const displayName = content ? roomMemberContentDisplayname(content) : undefined;
+
+      return displayName || getMxIdLocalPart(userId) || userId;
+    },
+    [getMember]
+  );
+
+  const getAvatar: GetRoomMemberAvatarCallback = useCallback(
+    (userId) => {
+      const member = getMember(userId);
+
+      const content = member?.event.content;
+      if (!content) return undefined;
+
+      return roomMemberContentAvatarUrl(content);
+    },
+    [getMember]
+  );
+
+  const getMembership: GetRoomMemberMembershipCallback = useCallback(
+    (userId) => {
+      const member = getMember(userId);
+
+      const content = member?.event.content;
+      if (!content) return undefined;
+
+      return roomMemberContentMembership(content);
+    },
+    [getMember]
+  );
+
+  const api: RoomMembersAPI = useMemo(
+    () => ({ memberEventsResult, getMember, getName, getAvatar, getMembership }),
+    [memberEventsResult, getMember, getName, getAvatar, getMembership]
+  );
+  return api;
+};
+
+const RoomMembersAPIContext = createContext<RoomMembersAPI | null>(null);
+export const RoomMembersAPIProvider = RoomMembersAPIContext.Provider;
+
+export const useRoomMembersAPI = (): RoomMembersAPI => {
+  const api = useContext(RoomMembersAPIContext);
+  if (!api) {
+    throw new Error('Room Members context is not provided!');
+  }
+
+  return api;
 };
diff --git a/src/app/hooks/useRoomNavigate.ts b/src/app/hooks/useRoomNavigate.ts
index b2d7a91a..67912b4c 100644
--- a/src/app/hooks/useRoomNavigate.ts
+++ b/src/app/hooks/useRoomNavigate.ts
@@ -1,24 +1,25 @@
 import { useCallback } from 'react';
 import { NavigateOptions, useNavigate } from 'react-router-dom';
 import { useAtomValue } from 'jotai';
-import { getCanonicalAliasOrRoomId } from '../utils/matrix';
 import {
   getDirectRoomPath,
   getHomeRoomPath,
   getSpacePath,
   getSpaceRoomPath,
 } from '../pages/pathUtils';
-import { useMatrixClient } from './useMatrixClient';
 import { getOrphanParents, guessPerfectParent } from '../utils/room';
 import { roomToParentsAtom } from '../state/room/roomToParents';
 import { mDirectAtom } from '../state/mDirectList';
 import { useSelectedSpace } from './router/useSelectedSpace';
 import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
+import { useClient } from './useClient';
+import { getJoinRoomStateId } from '../../client/storage/collections';
+import { StateEventType } from '../../types/matrix/room';
 
 export const useRoomNavigate = () => {
+  const ct = useClient();
   const navigate = useNavigate();
-  const mx = useMatrixClient();
   const roomToParents = useAtomValue(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
   const spaceSelectedId = useSelectedSpace();
@@ -26,16 +27,17 @@ export const useRoomNavigate = () => {
 
   const navigateSpace = useCallback(
     (roomId: string) => {
-      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
+      const roomIdOrAlias = ct.roomToAlias.read.get(roomId) ?? roomId;
       navigate(getSpacePath(roomIdOrAlias));
     },
-    [mx, navigate]
+    [ct, navigate]
   );
 
   const navigateRoom = useCallback(
-    (roomId: string, eventId?: string, opts?: NavigateOptions) => {
-      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, roomId);
-      const openSpaceTimeline = developerTools && spaceSelectedId === roomId;
+    async (roomId: string, eventId?: string, opts?: NavigateOptions) => {
+      const roomIdOrAlias = ct.roomToAlias.read.get(roomId) ?? roomId;
+      const openSpaceTimeline =
+        developerTools && ct.spaceRooms.read.has(roomId) && spaceSelectedId === roomId;
 
       const orphanParents = openSpaceTimeline ? [roomId] : getOrphanParents(roomToParents, roomId);
       if (orphanParents.length > 0) {
@@ -43,10 +45,22 @@ export const useRoomNavigate = () => {
         if (spaceSelectedId && orphanParents.includes(spaceSelectedId)) {
           parentSpace = spaceSelectedId;
         } else {
-          parentSpace = guessPerfectParent(mx, roomId, orphanParents) ?? orphanParents[0];
+          const powerEventIds = [roomId]
+            .concat(orphanParents)
+            .map((rId) => getJoinRoomStateId(rId, StateEventType.RoomPowerLevels, ''));
+          const powerLevelEventObjs = await ct.storage.joinRoomState.read.getMultiple(
+            powerEventIds
+          );
+          parentSpace =
+            guessPerfectParent(
+              roomId,
+              orphanParents,
+              (rId) => ct.roomToCreators.read.get(rId),
+              (rId) => powerLevelEventObjs.find((obj) => obj?.roomId === rId)?.event.content
+            ) ?? orphanParents[0];
         }
 
-        const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, parentSpace);
+        const pSpaceIdOrAlias = ct.roomToAlias.read.get(parentSpace) ?? parentSpace;
 
         navigate(
           getSpaceRoomPath(pSpaceIdOrAlias, openSpaceTimeline ? roomId : roomIdOrAlias, eventId),
@@ -62,7 +76,7 @@ export const useRoomNavigate = () => {
 
       navigate(getHomeRoomPath(roomIdOrAlias, eventId), opts);
     },
-    [mx, navigate, spaceSelectedId, roomToParents, mDirects, developerTools]
+    [ct, navigate, spaceSelectedId, roomToParents, mDirects, developerTools]
   );
 
   return {
diff --git a/src/app/hooks/useRoomPermissions.ts b/src/app/hooks/useRoomPermissions.ts
index cb6f69a2..0ad17989 100644
--- a/src/app/hooks/useRoomPermissions.ts
+++ b/src/app/hooks/useRoomPermissions.ts
@@ -14,30 +14,30 @@ export type RoomPermissionsAPI = {
 };
 
 export const getRoomPermissionsAPI = (
-  creators: Set<string>,
+  creators: Set<string> | undefined,
   powerLevels: IPowerLevels
 ): RoomPermissionsAPI => {
   const api: RoomPermissionsAPI = {
     event: (type, userId) => {
-      if (creators.has(userId)) return true;
+      if (creators?.has(userId)) return true;
       const userPower = readPowerLevel.user(powerLevels, userId);
       const requiredPL = readPowerLevel.event(powerLevels, type);
       return userPower >= requiredPL;
     },
     stateEvent: (type, userId) => {
-      if (creators.has(userId)) return true;
+      if (creators?.has(userId)) return true;
       const userPower = readPowerLevel.user(powerLevels, userId);
       const requiredPL = readPowerLevel.state(powerLevels, type);
       return userPower >= requiredPL;
     },
     action: (action, userId) => {
-      if (creators.has(userId)) return true;
+      if (creators?.has(userId)) return true;
       const userPower = readPowerLevel.user(powerLevels, userId);
       const requiredPL = readPowerLevel.action(powerLevels, action);
       return userPower >= requiredPL;
     },
     notificationAction: (action, userId) => {
-      if (creators.has(userId)) return true;
+      if (creators?.has(userId)) return true;
       const userPower = readPowerLevel.user(powerLevels, userId);
       const requiredPL = readPowerLevel.notification(powerLevels, action);
       return userPower >= requiredPL;
@@ -48,7 +48,7 @@ export const getRoomPermissionsAPI = (
 };
 
 export const useRoomPermissions = (
-  creators: Set<string>,
+  creators: Set<string> | undefined,
   powerLevels: IPowerLevels
 ): RoomPermissionsAPI => {
   const api: RoomPermissionsAPI = useMemo(
diff --git a/src/app/hooks/useRoomPinnedEvents.ts b/src/app/hooks/useRoomPinnedEvents.ts
index 9ab1d6bd..42d88fa7 100644
--- a/src/app/hooks/useRoomPinnedEvents.ts
+++ b/src/app/hooks/useRoomPinnedEvents.ts
@@ -1,14 +1,16 @@
 import { useMemo } from 'react';
-import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
-import { Room } from 'matrix-js-sdk';
-import { StateEvent } from '../../types/matrix/room';
-import { useStateEvent } from './useStateEvent';
+import { StateEventType } from '../../types/matrix/room';
+import { useRoomStateEvent } from './storage/useRoomStateEvent';
 
-export const useRoomPinnedEvents = (room: Room): string[] => {
-  const pinEvent = useStateEvent(room, StateEvent.RoomPinnedEvents);
+export const useRoomPinnedEvents = (roomId: string): string[] => {
+  const pinEventResult = useRoomStateEvent(roomId, StateEventType.RoomPinnedEvents, '');
+  const pinEvent = pinEventResult.value;
   const events = useMemo(() => {
-    const content = pinEvent?.getContent<RoomPinnedEventsEventContent>();
-    return content?.pinned ?? [];
+    const { content } = pinEvent?.event ?? {};
+    if (content && 'pinned' in content && Array.isArray(content.pinned)) {
+      return content.pinned;
+    }
+    return [];
   }, [pinEvent]);
 
   return events;
diff --git a/src/app/hooks/useRoomTypingMembers.ts b/src/app/hooks/useRoomTypingMembers.ts
index f526cbf1..28570fd5 100644
--- a/src/app/hooks/useRoomTypingMembers.ts
+++ b/src/app/hooks/useRoomTypingMembers.ts
@@ -1,18 +1,11 @@
 import { useAtomValue } from 'jotai';
 import { selectAtom } from 'jotai/utils';
 import { useCallback } from 'react';
-import {
-  IRoomIdToTypingMembers,
-  TypingReceipt,
-  roomIdToTypingMembersAtom,
-} from '../state/typingMembers';
+import { IRoomIdToTypingMembers, roomIdToTypingMembersAtom } from '../state/typingMembers';
 
-const typingReceiptEqual = (a: TypingReceipt, b: TypingReceipt): boolean =>
-  a.userId === b.userId && a.ts === b.ts;
-
-const equalTypingMembers = (x: TypingReceipt[], y: TypingReceipt[]): boolean => {
+const equalTypingMembers = (x: string[], y: string[]): boolean => {
   if (x.length !== y.length) return false;
-  return x.every((a, i) => typingReceiptEqual(a, y[i]));
+  return x.every((a, i) => a[1] === y[i]);
 };
 
 export const useRoomTypingMember = (roomId: string) => {
diff --git a/src/app/hooks/useRoomsNotificationPreferences.ts b/src/app/hooks/useRoomsNotificationPreferences.ts
index ceea95f7..4897806a 100644
--- a/src/app/hooks/useRoomsNotificationPreferences.ts
+++ b/src/app/hooks/useRoomsNotificationPreferences.ts
@@ -1,8 +1,7 @@
 import { createContext, useCallback, useContext, useMemo } from 'react';
-import { ConditionKind, IPushRules, MatrixClient, PushRuleKind } from 'matrix-js-sdk';
+import { AccountDataEvent, PushRules } from 'neurone/lib/api/types';
+import { deletePushRule, putPushRule } from 'neurone/lib/api/matrix/client/v3/pushrules';
 import { Icons, IconSrc } from 'folds';
-import { AccountDataEvent } from '../../types/matrix/accountData';
-import { useAccountData } from './useAccountData';
 import { isRoomId } from '../utils/matrix';
 import {
   getNotificationMode,
@@ -10,7 +9,10 @@ import {
   NotificationMode,
 } from './useNotificationMode';
 import { useAsyncCallback } from './useAsyncCallback';
-import { useMatrixClient } from './useMatrixClient';
+import { useAccountData } from './storage/useAccountData';
+import { ClientContext } from '../../client/context';
+import { useClient } from './useClient';
+import { AccountDataType, ConditionKind } from '../../types/matrix/accountData';
 
 export type RoomsNotificationPreferences = {
   mute: Set<string>;
@@ -34,7 +36,10 @@ export const useRoomsNotificationPreferencesContext = (): RoomsNotificationPrefe
 };
 
 export const useRoomsNotificationPreferences = (): RoomsNotificationPreferences => {
-  const pushRules = useAccountData(AccountDataEvent.PushRules)?.getContent<IPushRules>();
+  const { value: pushRulesEvent } = useAccountData<AccountDataEvent<PushRules>>(
+    AccountDataType.PushRules
+  );
+  const pushRules = pushRulesEvent?.content;
 
   const preferences: RoomsNotificationPreferences = useMemo(() => {
     const global = pushRules?.global;
@@ -108,7 +113,7 @@ export const getRoomNotificationModeIcon = (mode?: RoomNotificationMode): IconSr
 };
 
 export const setRoomNotificationPreference = async (
-  mx: MatrixClient,
+  ct: ClientContext,
   roomId: string,
   mode: RoomNotificationMode,
   previousMode: RoomNotificationMode
@@ -118,10 +123,26 @@ export const setRoomNotificationPreference = async (
     previousMode === RoomNotificationMode.AllMessages ||
     previousMode === RoomNotificationMode.SpecialMessages
   ) {
-    await mx.deletePushRule('global', PushRuleKind.RoomSpecific, roomId);
+    await ct.requestAuthJSON(
+      deletePushRule({
+        pathParams: {
+          scope: 'global',
+          kind: 'room',
+          ruleId: roomId,
+        },
+      })
+    );
   }
   if (previousMode === RoomNotificationMode.Mute) {
-    await mx.deletePushRule('global', PushRuleKind.Override, roomId);
+    await ct.requestAuthJSON(
+      deletePushRule({
+        pathParams: {
+          scope: 'global',
+          kind: 'override',
+          ruleId: roomId,
+        },
+      })
+    );
   }
 
   // set new preference
@@ -130,35 +151,53 @@ export const setRoomNotificationPreference = async (
   }
 
   if (mode === RoomNotificationMode.Mute) {
-    await mx.addPushRule('global', PushRuleKind.Override, roomId, {
-      conditions: [
-        {
-          kind: ConditionKind.EventMatch,
-          key: 'room_id',
-          pattern: roomId,
+    await ct.requestAuthJSON(
+      putPushRule({
+        pathParams: {
+          scope: 'global',
+          kind: 'override',
+          ruleId: roomId,
         },
-      ],
-      actions: getNotificationModeActions(NotificationMode.OFF),
-    });
+        body: {
+          conditions: [
+            {
+              kind: ConditionKind.EventMatch,
+              key: 'room_id',
+              pattern: roomId,
+            },
+          ],
+          actions: getNotificationModeActions(NotificationMode.OFF),
+        },
+      })
+    );
     return;
   }
 
-  await mx.addPushRule('global', PushRuleKind.RoomSpecific, roomId, {
-    actions:
-      mode === RoomNotificationMode.AllMessages
-        ? getNotificationModeActions(NotificationMode.NotifyLoud)
-        : getNotificationModeActions(NotificationMode.OFF),
-  });
+  await ct.requestAuthJSON(
+    putPushRule({
+      pathParams: {
+        scope: 'global',
+        kind: 'room',
+        ruleId: roomId,
+      },
+      body: {
+        actions:
+          mode === RoomNotificationMode.AllMessages
+            ? getNotificationModeActions(NotificationMode.NotifyLoud)
+            : getNotificationModeActions(NotificationMode.OFF),
+      },
+    })
+  );
 };
 
 export const useSetRoomNotificationPreference = (roomId: string) => {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
   const [modeState, setMode] = useAsyncCallback(
     useCallback(
       (mode: RoomNotificationMode, previousMode: RoomNotificationMode) =>
-        setRoomNotificationPreference(mx, roomId, mode, previousMode),
-      [mx, roomId]
+        setRoomNotificationPreference(ct, roomId, mode, previousMode),
+      [ct, roomId]
     )
   );
 
diff --git a/src/app/hooks/useSecondsCountdown.ts b/src/app/hooks/useSecondsCountdown.ts
new file mode 100644
index 00000000..a101e1f7
--- /dev/null
+++ b/src/app/hooks/useSecondsCountdown.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+export const useSecondsCountdown = (seconds: number, onEnd?: () => void): number => {
+  const [countdown, setCountdown] = useState(seconds);
+
+  useEffect(() => {
+    const timeoutId = window.setTimeout(() => {
+      if (countdown <= 1) {
+        onEnd?.();
+      } else {
+        setCountdown(countdown - 1);
+      }
+    }, 1000);
+
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [countdown, onEnd]);
+
+  return countdown;
+};
diff --git a/src/app/hooks/useSidebarItems.ts b/src/app/hooks/useSidebarItems.ts
index 16aba225..375c40e7 100644
--- a/src/app/hooks/useSidebarItems.ts
+++ b/src/app/hooks/useSidebarItems.ts
@@ -1,10 +1,7 @@
-import { Dispatch, SetStateAction, useCallback, useEffect, useState } from 'react';
-import { MatrixClient } from 'matrix-js-sdk';
-import { AccountDataEvent } from '../../types/matrix/accountData';
-import { useMatrixClient } from './useMatrixClient';
-import { getAccountData, isSpace } from '../utils/room';
-import { Membership } from '../../types/matrix/room';
-import { useAccountDataCallback } from './useAccountDataCallback';
+import { useMemo } from 'react';
+import { AccountDataEvent } from 'neurone/lib/api/types';
+import { useClient } from './useClient';
+import { ClientContext } from '../../client/context';
 
 export type ISidebarFolder = {
   name?: string;
@@ -20,7 +17,7 @@ export type InCinnySpacesContent = {
 };
 
 export const parseSidebar = (
-  mx: MatrixClient,
+  ct: ClientContext,
   orphanSpaces: string[],
   content?: InCinnySpacesContent
 ) => {
@@ -31,9 +28,8 @@ export const parseSidebar = (
 
   const safeToAdd = (spaceId: string): boolean => {
     if (typeof spaceId !== 'string') return false;
-    const space = mx.getRoom(spaceId);
-    if (space?.getMyMembership() !== Membership.Join) return false;
-    return isSpace(space);
+    if (!ct.rooms.join.read.includes(spaceId)) return false;
+    return ct.spaceRooms.read.has(spaceId);
   };
 
   sidebar.forEach((item) => {
@@ -64,40 +60,17 @@ export const parseSidebar = (
 };
 
 export const useSidebarItems = (
-  orphanSpaces: string[]
-): [SidebarItems, Dispatch<SetStateAction<SidebarItems>>] => {
-  const mx = useMatrixClient();
+  orphanSpaces: string[],
+  cinnySpacesEvent?: AccountDataEvent<InCinnySpacesContent>
+): SidebarItems => {
+  const ct = useClient();
 
-  const [sidebarItems, setSidebarItems] = useState(() => {
-    const inCinnySpacesContent = getAccountData(
-      mx,
-      AccountDataEvent.CinnySpaces
-    )?.getContent<InCinnySpacesContent>();
-    return parseSidebar(mx, orphanSpaces, inCinnySpacesContent);
-  });
+  const sidebarItems: SidebarItems = useMemo(() => {
+    const content = cinnySpacesEvent?.content;
+    return parseSidebar(ct, orphanSpaces, content);
+  }, [ct, cinnySpacesEvent, orphanSpaces]);
 
-  useEffect(() => {
-    const inCinnySpacesContent = getAccountData(
-      mx,
-      AccountDataEvent.CinnySpaces
-    )?.getContent<InCinnySpacesContent>();
-    setSidebarItems(parseSidebar(mx, orphanSpaces, inCinnySpacesContent));
-  }, [mx, orphanSpaces]);
-
-  useAccountDataCallback(
-    mx,
-    useCallback(
-      (mEvent) => {
-        if (mEvent.getType() === AccountDataEvent.CinnySpaces) {
-          const newContent = mEvent.getContent<InCinnySpacesContent>();
-          setSidebarItems(parseSidebar(mx, orphanSpaces, newContent));
-        }
-      },
-      [mx, orphanSpaces]
-    )
-  );
-
-  return [sidebarItems, setSidebarItems];
+  return sidebarItems;
 };
 
 export const sidebarItemWithout = (items: SidebarItems, roomId: string) => {
@@ -123,16 +96,24 @@ export const sidebarItemWithout = (items: SidebarItems, roomId: string) => {
 };
 
 export const makeCinnySpacesContent = (
-  mx: MatrixClient,
-  items: SidebarItems
+  items: SidebarItems,
+  cinnySpacesEvent?: AccountDataEvent<InCinnySpacesContent>
 ): InCinnySpacesContent => {
-  const currentInSpaces =
-    getAccountData(mx, AccountDataEvent.CinnySpaces)?.getContent<InCinnySpacesContent>() ?? {};
+  const content = cinnySpacesEvent?.content ?? {};
 
   const newSpacesContent: InCinnySpacesContent = {
-    ...currentInSpaces,
+    ...content,
     sidebar: items,
   };
 
   return newSpacesContent;
 };
+
+export const useSidebarRooms = (sidebarItems: SidebarItems): string[] => {
+  const rooms = useMemo(() => {
+    const ids = sidebarItems.flatMap((item) => (typeof item === 'string' ? [item] : item.content));
+    return Array.from(new Set(ids));
+  }, [sidebarItems]);
+
+  return rooms;
+};
diff --git a/src/app/hooks/useSpace.ts b/src/app/hooks/useSpace.ts
index 8bec49e4..595c6d8d 100644
--- a/src/app/hooks/useSpace.ts
+++ b/src/app/hooks/useSpace.ts
@@ -1,17 +1,16 @@
-import { Room } from 'matrix-js-sdk';
 import { createContext, useContext } from 'react';
 
-const SpaceContext = createContext<Room | null>(null);
+const SpaceContext = createContext<string | null>(null);
 
 export const SpaceProvider = SpaceContext.Provider;
 
-export function useSpace(): Room {
+export function useSpace(): string {
   const space = useContext(SpaceContext);
   if (!space) throw new Error('Space not provided!');
   return space;
 }
 
-export function useSpaceOptionally(): Room | null {
+export function useSpaceOptionally(): string | undefined {
   const space = useContext(SpaceContext);
-  return space;
+  return space ?? undefined;
 }
diff --git a/src/app/hooks/useSpaceHierarchy.ts b/src/app/hooks/useSpaceHierarchy.ts
index ad34e3f4..8379fd86 100644
--- a/src/app/hooks/useSpaceHierarchy.ts
+++ b/src/app/hooks/useSpaceHierarchy.ts
@@ -1,20 +1,22 @@
-import { atom, useAtom, useAtomValue } from 'jotai';
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
-import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
+import { useAtomValue } from 'jotai';
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { SpaceHierarchyRoomChunk, StateEventWithoutRoomId } from 'neurone/lib/api/types';
 import { QueryFunction, useInfiniteQuery } from '@tanstack/react-query';
-import { useMatrixClient } from './useMatrixClient';
-import { roomToParentsAtom } from '../state/room/roomToParents';
-import { MSpaceChildContent, StateEvent } from '../../types/matrix/room';
-import { getAllParents, getStateEvents, isValidChild } from '../utils/room';
+import { getHierarchy, GetHierarchyOK } from 'neurone/lib/api/matrix/client/v1/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { SpaceChildContent } from '../../types/matrix/room';
 import { isRoomId } from '../utils/matrix';
-import { SortFunc, byOrderKey, byTsOldToNew, factoryRoomIdByActivity } from '../utils/sort';
-import { useStateEventCallback } from './useStateEventCallback';
+import { SortFunc, byOrderKey, byTsOldToNew } from '../utils/sort';
 import { ErrorCode } from '../cs-errorcode';
+import { useObservableValue } from './useObservableValue';
+import { useClient } from './useClient';
+import { useAllJoinedRoomsSet } from './useGetRoom';
+import { spaceRoomsAtom } from '../state/spaceRooms';
+import { rError } from '../../client/reader';
 
 export type HierarchyItemSpace = {
   roomId: string;
-  content: MSpaceChildContent;
+  content: SpaceChildContent;
   ts: number;
   space: true;
   parentId?: string;
@@ -22,23 +24,22 @@ export type HierarchyItemSpace = {
 
 export type HierarchyItemRoom = {
   roomId: string;
-  content: MSpaceChildContent;
+  content: SpaceChildContent;
   ts: number;
   parentId: string;
 };
 
 export type HierarchyItem = HierarchyItemSpace | HierarchyItemRoom;
 
-type GetRoomCallback = (roomId: string) => Room | undefined;
-
 const hierarchyItemTs: SortFunc<HierarchyItem> = (a, b) => byTsOldToNew(a.ts, b.ts);
 const hierarchyItemByOrder: SortFunc<HierarchyItem> = (a, b) =>
   byOrderKey(a.content.order, b.content.order);
 
 const getHierarchySpaces = (
   rootSpaceId: string,
-  getRoom: GetRoomCallback,
-  spaceRooms: Set<string>
+  roomToChildEvents: Map<string, StateEventWithoutRoomId<SpaceChildContent>[]>,
+  spaceRooms: Set<string>,
+  spaceRoomsCache: Set<string>
 ): HierarchyItemSpace[] => {
   const rootSpaceItem: HierarchyItemSpace = {
     roomId: rootSpaceId,
@@ -50,25 +51,22 @@ const getHierarchySpaces = (
 
   const findAndCollectHierarchySpaces = (spaceItem: HierarchyItemSpace) => {
     if (spaceItems.find((item) => item.roomId === spaceItem.roomId)) return;
-    const space = getRoom(spaceItem.roomId);
     spaceItems.push(spaceItem);
 
-    if (!space) return;
-    const childEvents = getStateEvents(space, StateEvent.SpaceChild);
+    const childEvents = roomToChildEvents.get(spaceItem.roomId);
 
-    childEvents.forEach((childEvent) => {
-      if (!isValidChild(childEvent)) return;
-      const childId = childEvent.getStateKey();
-      if (!childId || !isRoomId(childId)) return;
+    childEvents?.forEach((childEvent) => {
+      const childId = childEvent.state_key;
+      if (!isRoomId(childId)) return;
 
       // because we can not find if a childId is space without joining
       // or requesting room summary, we will look it into spaceRooms local
       // cache which we maintain as we load summary in UI.
-      if (getRoom(childId)?.isSpaceRoom() || spaceRooms.has(childId)) {
+      if (spaceRooms.has(childId) || spaceRoomsCache.has(childId)) {
         const childItem: HierarchyItemSpace = {
           roomId: childId,
-          content: childEvent.getContent<MSpaceChildContent>(),
-          ts: childEvent.getTs(),
+          content: childEvent.content,
+          ts: childEvent.origin_server_ts,
           space: true,
           parentId: spaceItem.roomId,
         };
@@ -95,31 +93,30 @@ export type SpaceHierarchy = {
 };
 const getSpaceHierarchy = (
   rootSpaceId: string,
+  roomToChildEvents: Map<string, StateEventWithoutRoomId<SpaceChildContent>[]>,
   spaceRooms: Set<string>,
-  getRoom: (roomId: string) => Room | undefined,
-  closedCategory: (spaceId: string) => boolean
+  spaceRoomsCache: Set<string>
 ): SpaceHierarchy[] => {
-  const spaceItems: HierarchyItemSpace[] = getHierarchySpaces(rootSpaceId, getRoom, spaceRooms);
+  const spaceItems: HierarchyItemSpace[] = getHierarchySpaces(
+    rootSpaceId,
+    roomToChildEvents,
+    spaceRooms,
+    spaceRoomsCache
+  );
 
   const hierarchy: SpaceHierarchy[] = spaceItems.map((spaceItem) => {
-    const space = getRoom(spaceItem.roomId);
-    if (!space || closedCategory(spaceItem.roomId)) {
-      return {
-        space: spaceItem,
-      };
-    }
-    const childEvents = getStateEvents(space, StateEvent.SpaceChild);
+    const childEvents = roomToChildEvents.get(spaceItem.roomId);
+
     const childItems: HierarchyItemRoom[] = [];
-    childEvents.forEach((childEvent) => {
-      if (!isValidChild(childEvent)) return;
-      const childId = childEvent.getStateKey();
+    childEvents?.forEach((childEvent) => {
+      const childId = childEvent.state_key;
       if (!childId || !isRoomId(childId)) return;
-      if (getRoom(childId)?.isSpaceRoom() || spaceRooms.has(childId)) return;
+      if (spaceRooms.has(childId) || spaceRoomsCache.has(childId)) return;
 
       const childItem: HierarchyItemRoom = {
         roomId: childId,
-        content: childEvent.getContent<MSpaceChildContent>(),
-        ts: childEvent.getTs(),
+        content: childEvent.content,
+        ts: childEvent.origin_server_ts,
         parentId: spaceItem.roomId,
       };
       childItems.push(childItem);
@@ -134,38 +131,15 @@ const getSpaceHierarchy = (
   return hierarchy;
 };
 
-export const useSpaceHierarchy = (
-  spaceId: string,
-  spaceRooms: Set<string>,
-  getRoom: (roomId: string) => Room | undefined,
-  closedCategory: (spaceId: string) => boolean
-): SpaceHierarchy[] => {
-  const mx = useMatrixClient();
-  const roomToParents = useAtomValue(roomToParentsAtom);
+export const useSpaceHierarchy = (spaceId: string): SpaceHierarchy[] => {
+  const ct = useClient();
+  const roomToChildEvents = useObservableValue(ct.roomToChildEvents);
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+  const spaceRoomsCache = useAtomValue(spaceRoomsAtom);
 
-  const [hierarchyAtom] = useState(() =>
-    atom(getSpaceHierarchy(spaceId, spaceRooms, getRoom, closedCategory))
-  );
-  const [hierarchy, setHierarchy] = useAtom(hierarchyAtom);
-
-  useEffect(() => {
-    setHierarchy(getSpaceHierarchy(spaceId, spaceRooms, getRoom, closedCategory));
-  }, [mx, spaceId, spaceRooms, setHierarchy, getRoom, closedCategory]);
-
-  useStateEventCallback(
-    mx,
-    useCallback(
-      (mEvent) => {
-        if (mEvent.getType() !== StateEvent.SpaceChild) return;
-        const eventRoomId = mEvent.getRoomId();
-        if (!eventRoomId) return;
-
-        if (spaceId === eventRoomId || getAllParents(roomToParents, eventRoomId).has(spaceId)) {
-          setHierarchy(getSpaceHierarchy(spaceId, spaceRooms, getRoom, closedCategory));
-        }
-      },
-      [spaceId, roomToParents, setHierarchy, spaceRooms, getRoom, closedCategory]
-    )
+  const hierarchy = useMemo(
+    () => getSpaceHierarchy(spaceId, roomToChildEvents, spaceRooms, spaceRoomsCache),
+    [spaceId, roomToChildEvents, spaceRooms, spaceRoomsCache]
   );
 
   return hierarchy;
@@ -173,94 +147,65 @@ export const useSpaceHierarchy = (
 
 const getSpaceJoinedHierarchy = (
   rootSpaceId: string,
-  getRoom: GetRoomCallback,
-  excludeRoom: (parentId: string, roomId: string) => boolean,
+  joinedRooms: Set<string>,
+  roomToChildEvents: Map<string, StateEventWithoutRoomId<SpaceChildContent>[]>,
+  spaceRooms: Set<string>,
   sortRoomItems: (parentId: string, items: HierarchyItem[]) => HierarchyItem[]
 ): HierarchyItem[] => {
-  const spaceItems: HierarchyItemSpace[] = getHierarchySpaces(rootSpaceId, getRoom, new Set());
+  const spaceItems: HierarchyItemSpace[] = getHierarchySpaces(
+    rootSpaceId,
+    roomToChildEvents,
+    spaceRooms,
+    new Set()
+  );
 
   const hierarchy: HierarchyItem[] = spaceItems.flatMap((spaceItem) => {
-    const space = getRoom(spaceItem.roomId);
-    if (!space) {
-      return [];
-    }
-    const joinedRoomEvents = getStateEvents(space, StateEvent.SpaceChild).filter((childEvent) => {
-      if (!isValidChild(childEvent)) return false;
-      const childId = childEvent.getStateKey();
-      if (!childId || !isRoomId(childId)) return false;
-      const room = getRoom(childId);
-      if (!room || room.isSpaceRoom()) return false;
-
-      return true;
-    });
-
-    if (joinedRoomEvents.length === 0) return [];
+    const childEvents = roomToChildEvents.get(spaceItem.roomId);
 
     const childItems: HierarchyItemRoom[] = [];
-    joinedRoomEvents.forEach((childEvent) => {
-      const childId = childEvent.getStateKey();
-      if (!childId) return;
 
-      if (excludeRoom(space.roomId, childId)) return;
+    childEvents?.forEach((childEvent) => {
+      const childId = childEvent.state_key;
+      if (!childId || !isRoomId(childId)) return;
+      if (!joinedRooms.has(childId) || spaceRooms.has(childId)) return;
 
       const childItem: HierarchyItemRoom = {
         roomId: childId,
-        content: childEvent.getContent<MSpaceChildContent>(),
-        ts: childEvent.getTs(),
+        content: childEvent.content,
+        ts: childEvent.origin_server_ts,
         parentId: spaceItem.roomId,
       };
       childItems.push(childItem);
     });
+    if (childItems.length === 0) return [];
+
     return [spaceItem, ...sortRoomItems(spaceItem.roomId, childItems)];
   });
 
   return hierarchy;
 };
 
-export const useSpaceJoinedHierarchy = (
-  spaceId: string,
-  getRoom: GetRoomCallback,
-  excludeRoom: (parentId: string, roomId: string) => boolean,
-  sortByActivity: (spaceId: string) => boolean
-): HierarchyItem[] => {
-  const mx = useMatrixClient();
-  const roomToParents = useAtomValue(roomToParentsAtom);
+export const useSpaceJoinedHierarchy = (spaceId: string): HierarchyItem[] => {
+  const ct = useClient();
+  const roomToChildEvents = useObservableValue(ct.roomToChildEvents);
+  const allJoinedRooms = useAllJoinedRoomsSet();
+  const spaceRooms = useObservableValue(ct.spaceRooms);
 
-  const sortRoomItems = useCallback(
-    (sId: string, items: HierarchyItem[]) => {
-      if (sortByActivity(sId)) {
-        items.sort((a, b) => factoryRoomIdByActivity(mx)(a.roomId, b.roomId));
-        return items;
-      }
-      items.sort(hierarchyItemTs).sort(hierarchyItemByOrder);
-      return items;
-    },
-    [mx, sortByActivity]
-  );
+  const sortRoomItems = useCallback((sId: string, items: HierarchyItem[]) => {
+    items.sort(hierarchyItemTs).sort(hierarchyItemByOrder);
+    return items;
+  }, []);
 
-  const [hierarchyAtom] = useState(() =>
-    atom(getSpaceJoinedHierarchy(spaceId, getRoom, excludeRoom, sortRoomItems))
-  );
-  const [hierarchy, setHierarchy] = useAtom(hierarchyAtom);
-
-  useEffect(() => {
-    setHierarchy(getSpaceJoinedHierarchy(spaceId, getRoom, excludeRoom, sortRoomItems));
-  }, [mx, spaceId, setHierarchy, getRoom, excludeRoom, sortRoomItems]);
-
-  useStateEventCallback(
-    mx,
-    useCallback(
-      (mEvent) => {
-        if (mEvent.getType() !== StateEvent.SpaceChild) return;
-        const eventRoomId = mEvent.getRoomId();
-        if (!eventRoomId) return;
-
-        if (spaceId === eventRoomId || getAllParents(roomToParents, eventRoomId).has(spaceId)) {
-          setHierarchy(getSpaceJoinedHierarchy(spaceId, getRoom, excludeRoom, sortRoomItems));
-        }
-      },
-      [spaceId, roomToParents, setHierarchy, getRoom, excludeRoom, sortRoomItems]
-    )
+  const hierarchy = useMemo(
+    () =>
+      getSpaceJoinedHierarchy(
+        spaceId,
+        allJoinedRooms,
+        roomToChildEvents,
+        spaceRooms,
+        sortRoomItems
+      ),
+    [spaceId, allJoinedRooms, roomToChildEvents, spaceRooms, sortRoomItems]
   );
 
   return hierarchy;
@@ -272,22 +217,36 @@ const MAX_AUTO_PAGE_COUNT = 50;
 export type FetchSpaceHierarchyLevelData = {
   fetching: boolean;
   error: Error | null;
-  rooms: Map<string, IHierarchyRoom>;
+  rooms: Map<string, SpaceHierarchyRoomChunk>;
 };
 export const useFetchSpaceHierarchyLevel = (
   roomId: string,
   enable: boolean
 ): FetchSpaceHierarchyLevelData => {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const pageNoRef = useRef(0);
 
-  const fetchLevel: QueryFunction<
-    Awaited<ReturnType<typeof mx.getRoomHierarchy>>,
-    string[],
-    string | undefined
-  > = useCallback(
-    ({ pageParam }) => mx.getRoomHierarchy(roomId, PER_PAGE_COUNT, 1, false, pageParam),
-    [roomId, mx]
+  const fetchLevel: QueryFunction<GetHierarchyOK, string[], string | undefined> = useCallback(
+    async ({ pageParam }) => {
+      const response = await ct.requestAuthJSON(
+        getHierarchy({
+          pathParams: { roomId },
+          searchParams: {
+            from: pageParam,
+            max_depth: 1,
+            limit: PER_PAGE_COUNT,
+            suggested_only: false,
+          },
+        })
+      );
+      const [err, result] = await parseMatrixResp<GetHierarchyOK>(response);
+      if (err) {
+        throw err.data;
+      }
+
+      return result;
+    },
+    [roomId, ct]
   );
 
   const queryResponse = useInfiniteQuery({
@@ -301,11 +260,8 @@ export const useFetchSpaceHierarchyLevel = (
     },
     retry: 5,
     retryDelay: (failureCount, error) => {
-      if (error instanceof MatrixError && error.errcode === ErrorCode.M_LIMIT_EXCEEDED) {
-        const { retry_after_ms: delay } = error.data;
-        if (typeof delay === 'number') {
-          return delay;
-        }
+      if (rError.errcode(error) === ErrorCode.M_LIMIT_EXCEEDED && rError.retryAfterMs(error)) {
+        return rError.retryAfterMs(error) ?? 500 * failureCount;
       }
 
       return 500 * failureCount;
@@ -327,8 +283,8 @@ export const useFetchSpaceHierarchyLevel = (
     }
   }, [fetchNextPage, hasNextPage, data, error]);
 
-  const rooms: Map<string, IHierarchyRoom> = useMemo(() => {
-    const roomsMap: Map<string, IHierarchyRoom> = new Map();
+  const rooms: Map<string, SpaceHierarchyRoomChunk> = useMemo(() => {
+    const roomsMap: Map<string, SpaceHierarchyRoomChunk> = new Map();
     if (!data) return roomsMap;
 
     const rms = data.pages.flatMap((result) => result.rooms);
diff --git a/src/app/hooks/useSpecVersions.ts b/src/app/hooks/useSpecVersions.ts
index 42403c61..7f6318d0 100644
--- a/src/app/hooks/useSpecVersions.ts
+++ b/src/app/hooks/useSpecVersions.ts
@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext, useCallback, useContext } from 'react';
 import { SpecVersions } from '../cs-api';
 
 const SpecVersionsContext = createContext<SpecVersions | null>(null);
@@ -10,3 +10,20 @@ export function useSpecVersions(): SpecVersions {
   if (!versions) throw new Error('Server versions are not provided!');
   return versions;
 }
+
+export function useSpecVersionSupport(specVersion: string): boolean {
+  const { versions } = useSpecVersions();
+
+  return versions.includes(specVersion);
+}
+
+export function useUnstableFeatureSupport(): (unstablePrefix: string) => boolean | undefined {
+  const { unstable_features: unstableFeatures } = useSpecVersions();
+
+  const checkSupport = useCallback(
+    (unstablePrefix: string): boolean | undefined => unstableFeatures?.[unstablePrefix],
+    [unstableFeatures]
+  );
+
+  return checkSupport;
+}
diff --git a/src/app/hooks/useTypingStatusUpdater.ts b/src/app/hooks/useTypingStatusUpdater.ts
index db8ceff1..b06684de 100644
--- a/src/app/hooks/useTypingStatusUpdater.ts
+++ b/src/app/hooks/useTypingStatusUpdater.ts
@@ -1,10 +1,14 @@
-import { MatrixClient } from 'matrix-js-sdk';
 import { useMemo, useRef } from 'react';
-import { TYPING_TIMEOUT_MS } from '../state/typingMembers';
+import { putTyping } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { useClient } from './useClient';
+
+const TYPING_TIMEOUT_MS = 5000; // 5 seconds
 
 type TypingStatusUpdater = (typing: boolean) => void;
 
-export const useTypingStatusUpdater = (mx: MatrixClient, roomId: string): TypingStatusUpdater => {
+export const useTypingStatusUpdater = (roomId: string): TypingStatusUpdater => {
+  const ct = useClient();
+  const { userId } = ct.session;
   const statusSentTsRef = useRef<number>(0);
 
   const sendTypingStatus: TypingStatusUpdater = useMemo(() => {
@@ -15,7 +19,16 @@ export const useTypingStatusUpdater = (mx: MatrixClient, roomId: string): Typing
           return;
         }
 
-        mx.sendTyping(roomId, true, TYPING_TIMEOUT_MS);
+        ct.requestAuthJSON(
+          putTyping({
+            pathParams: { roomId, userId },
+            body: {
+              typing: true,
+              timeout: TYPING_TIMEOUT_MS,
+            },
+          })
+        );
+
         const sentTs = Date.now();
         statusSentTsRef.current = sentTs;
 
@@ -23,7 +36,12 @@ export const useTypingStatusUpdater = (mx: MatrixClient, roomId: string): Typing
         // Clear typing status after timeout if already not;
         setTimeout(() => {
           if (statusSentTsRef.current === sentTs) {
-            mx.sendTyping(roomId, false, TYPING_TIMEOUT_MS);
+            ct.requestAuthJSON(
+              putTyping({
+                pathParams: { roomId, userId },
+                body: { typing: false },
+              })
+            );
             statusSentTsRef.current = 0;
           }
         }, TYPING_TIMEOUT_MS);
@@ -31,11 +49,16 @@ export const useTypingStatusUpdater = (mx: MatrixClient, roomId: string): Typing
       }
 
       if (Date.now() - statusSentTsRef.current < TYPING_TIMEOUT_MS) {
-        mx.sendTyping(roomId, false, TYPING_TIMEOUT_MS);
+        ct.requestAuthJSON(
+          putTyping({
+            pathParams: { roomId, userId },
+            body: { typing: false },
+          })
+        );
       }
       statusSentTsRef.current = 0;
     };
-  }, [mx, roomId]);
+  }, [ct, roomId, userId]);
 
   return sendTypingStatus;
 };
diff --git a/src/app/hooks/useUIAFlows.ts b/src/app/hooks/useUIAFlows.ts
index 0e6c0ddc..012298d4 100644
--- a/src/app/hooks/useUIAFlows.ts
+++ b/src/app/hooks/useUIAFlows.ts
@@ -1,12 +1,15 @@
-import { AuthType, IAuthData, MatrixError, UIAFlow } from 'matrix-js-sdk';
 import { useCallback, useMemo } from 'react';
+import { MatrixError } from 'matrix-js-sdk';
 import {
+  AuthResponse,
+  AuthType,
   getSupportedUIAFlows,
   getUIACompleted,
   getUIAError,
   getUIAErrorCode,
   getUIAParams,
   getUIASession,
+  UIAFlow,
 } from '../utils/matrix-uia';
 
 export const SUPPORTED_FLOW_TYPES = [
@@ -21,19 +24,19 @@ export const SUPPORTED_FLOW_TYPES = [
 export const useSupportedUIAFlows = (uiaFlows: UIAFlow[], supportedStages: string[]): UIAFlow[] =>
   useMemo(() => getSupportedUIAFlows(uiaFlows, supportedStages), [uiaFlows, supportedStages]);
 
-export const useUIACompleted = (authData: IAuthData): string[] =>
+export const useUIACompleted = (authData: AuthResponse): string[] =>
   useMemo(() => getUIACompleted(authData), [authData]);
 
-export const useUIAParams = (authData: IAuthData) =>
+export const useUIAParams = (authData: AuthResponse) =>
   useMemo(() => getUIAParams(authData), [authData]);
 
-export const useUIASession = (authData: IAuthData) =>
+export const useUIASession = (authData: AuthResponse) =>
   useMemo(() => getUIASession(authData), [authData]);
 
-export const useUIAErrorCode = (authData: IAuthData) =>
+export const useUIAErrorCode = (authData: AuthResponse) =>
   useMemo(() => getUIAErrorCode(authData), [authData]);
 
-export const useUIAError = (authData: IAuthData) =>
+export const useUIAError = (authData: AuthResponse) =>
   useMemo(() => getUIAError(authData), [authData]);
 
 export type StageInfo = Record<string, unknown>;
@@ -51,7 +54,7 @@ export type UIAFlowInterface = {
   hasStage: (stageType: string) => boolean;
   getStageInfo: (stageType: string) => StageInfo | undefined;
 };
-export const useUIAFlow = (authData: IAuthData, uiaFlow: UIAFlow): UIAFlowInterface => {
+export const useUIAFlow = (authData: AuthResponse, uiaFlow: UIAFlow): UIAFlowInterface => {
   const completed = useUIACompleted(authData);
   const params = useUIAParams(authData);
   const session = useUIASession(authData);
@@ -97,9 +100,9 @@ export const useUIAFlow = (authData: IAuthData, uiaFlow: UIAFlow): UIAFlowInterf
 
 export const useUIAMatrixError = (
   error?: MatrixError
-): [undefined, undefined] | [IAuthData, undefined] | [undefined, MatrixError] => {
+): [undefined, undefined] | [AuthResponse, undefined] | [undefined, MatrixError] => {
   if (!error) return [undefined, undefined];
-  if (error.httpStatus === 401) return [error.data as IAuthData, undefined];
+  if (error.httpStatus === 401) return [error.data as AuthResponse, undefined];
 
   return [undefined, error];
 };
diff --git a/src/app/hooks/useUserProfile.ts b/src/app/hooks/useUserProfile.ts
index c7cb7487..0f8c46dd 100644
--- a/src/app/hooks/useUserProfile.ts
+++ b/src/app/hooks/useUserProfile.ts
@@ -1,51 +1,37 @@
-import { useEffect, useState } from 'react';
-import { UserEvent, UserEventHandlerMap } from 'matrix-js-sdk';
-import { useMatrixClient } from './useMatrixClient';
+import { useCallback } from 'react';
+import { useQuery } from '@tanstack/react-query';
+import { getProfile, GetProfileOK } from 'neurone/lib/api/matrix/client/v3/profile';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { useClient } from './useClient';
 
 export type UserProfile = {
   avatarUrl?: string;
   displayName?: string;
 };
-export const useUserProfile = (userId: string): UserProfile => {
-  const mx = useMatrixClient();
+export const useUserProfile = (userId: string): UserProfile | undefined => {
+  const ct = useClient();
 
-  const [profile, setProfile] = useState<UserProfile>(() => {
-    const user = mx.getUser(userId);
-    return {
-      avatarUrl: user?.avatarUrl,
-      displayName: user?.displayName,
-    };
-  });
-
-  useEffect(() => {
-    const user = mx.getUser(userId);
-    const onAvatarChange: UserEventHandlerMap[UserEvent.AvatarUrl] = (event, myUser) => {
-      setProfile((cp) => ({
-        ...cp,
-        avatarUrl: myUser.avatarUrl,
-      }));
-    };
-    const onDisplayNameChange: UserEventHandlerMap[UserEvent.DisplayName] = (event, myUser) => {
-      setProfile((cp) => ({
-        ...cp,
-        displayName: myUser.displayName,
-      }));
-    };
-
-    mx.getProfileInfo(userId).then((info) =>
-      setProfile({
-        avatarUrl: info.avatar_url,
-        displayName: info.displayname,
+  const fetchProfile = useCallback(async (): Promise<UserProfile> => {
+    const response = await ct.requestAuthJSON(
+      getProfile({
+        pathParams: { userId },
       })
     );
 
-    user?.on(UserEvent.AvatarUrl, onAvatarChange);
-    user?.on(UserEvent.DisplayName, onDisplayNameChange);
-    return () => {
-      user?.removeListener(UserEvent.AvatarUrl, onAvatarChange);
-      user?.removeListener(UserEvent.DisplayName, onDisplayNameChange);
+    const [, profile] = await parseMatrixResp<GetProfileOK>(response);
+    return {
+      avatarUrl: profile?.avatar_url || undefined,
+      displayName: profile?.displayname || undefined,
     };
-  }, [mx, userId]);
+  }, [ct, userId]);
 
-  return profile;
+  const { data } = useQuery({
+    queryKey: ['profile', userId],
+    queryFn: fetchProfile,
+    staleTime: 0,
+    gcTime: Infinity,
+    refetchOnMount: 'always',
+  });
+
+  return data;
 };
diff --git a/src/app/hooks/useVirtualPaginator.ts b/src/app/hooks/useVirtualPaginator.ts
index 5ad056a6..1200e153 100644
--- a/src/app/hooks/useVirtualPaginator.ts
+++ b/src/app/hooks/useVirtualPaginator.ts
@@ -209,13 +209,10 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
       let scrollTo = element.offsetTop;
       if (opts?.align === 'center' && canFitInScrollView(scrollElement, element)) {
         const scrollInfo = getScrollInfo(scrollElement);
-        scrollTo =
-          element.offsetTop -
-          Math.round(scrollInfo.viewHeight / 2) +
-          Math.round(element.clientHeight / 2);
+        scrollTo = element.offsetTop - scrollInfo.viewHeight / 2 + element.clientHeight / 2;
       } else if (opts?.align === 'end' && canFitInScrollView(scrollElement, element)) {
         const scrollInfo = getScrollInfo(scrollElement);
-        scrollTo = element.offsetTop - Math.round(scrollInfo.viewHeight) + element.clientHeight;
+        scrollTo = element.offsetTop - scrollInfo.viewHeight + element.clientHeight;
       }
 
       scrollElement.scrollTo({
@@ -366,7 +363,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
 
     scrollEl.scrollTo({
       top: restoreTop,
-      behavior: 'instant',
+      behavior: 'auto',
     });
     restoreScrollRef.current = undefined;
   }, [range, getScrollElement, getItemElement]);
@@ -378,7 +375,7 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
     const { index, opts } = scrollToItemRef.current;
     scrollToItem(index, {
       ...opts,
-      behavior: 'instant',
+      behavior: 'auto',
     });
     scrollToItemRef.current = undefined;
   }, [range, scrollToItem]);
diff --git a/src/app/pages/App.tsx b/src/app/pages/App.tsx
index 52ec7f20..a6b6437a 100644
--- a/src/app/pages/App.tsx
+++ b/src/app/pages/App.tsx
@@ -7,7 +7,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
 import { ClientConfigLoader } from '../components/ClientConfigLoader';
 import { ClientConfigProvider } from '../hooks/useClientConfig';
-import { ConfigConfigError, ConfigConfigLoading } from './ConfigConfig';
+import { ClientConfigError, ClientConfigLoading } from './ClientConfig';
 import { FeatureCheck } from './FeatureCheck';
 import { createRouter } from './Router';
 import { ScreenSizeProvider, useScreenSize } from '../hooks/useScreenSize';
@@ -28,9 +28,9 @@ function App() {
           <ScreenSizeProvider value={screenSize}>
             <FeatureCheck>
               <ClientConfigLoader
-                fallback={() => <ConfigConfigLoading />}
+                fallback={() => <ClientConfigLoading />}
                 error={(err, retry, ignore) => (
-                  <ConfigConfigError error={err} retry={retry} ignore={ignore} />
+                  <ClientConfigError error={err} retry={retry} ignore={ignore} />
                 )}
               >
                 {(clientConfig) => (
diff --git a/src/app/pages/ConfigConfig.tsx b/src/app/pages/ClientConfig.tsx
similarity index 72%
rename from src/app/pages/ConfigConfig.tsx
rename to src/app/pages/ClientConfig.tsx
index dbcdca73..d06673ae 100644
--- a/src/app/pages/ConfigConfig.tsx
+++ b/src/app/pages/ClientConfig.tsx
@@ -1,24 +1,17 @@
-import { Box, Button, Dialog, Spinner, Text, color, config } from 'folds';
+import { Box, Button, Dialog, Text, color, config } from 'folds';
 import React from 'react';
 import { SplashScreen } from '../components/splash-screen';
 
-export function ConfigConfigLoading() {
-  return (
-    <SplashScreen>
-      <Box grow="Yes" direction="Column" gap="400" alignItems="Center" justifyContent="Center">
-        <Spinner variant="Secondary" size="600" />
-        <Text>Heating up</Text>
-      </Box>
-    </SplashScreen>
-  );
+export function ClientConfigLoading() {
+  return <SplashScreen footer={<Text>Loading Configurations</Text>} />;
 }
 
-type ConfigConfigErrorProps = {
+type ClientConfigErrorProps = {
   error: unknown;
   retry: () => void;
   ignore: () => void;
 };
-export function ConfigConfigError({ error, retry, ignore }: ConfigConfigErrorProps) {
+export function ClientConfigError({ error, retry, ignore }: ClientConfigErrorProps) {
   return (
     <SplashScreen>
       <Box grow="Yes" direction="Column" gap="400" alignItems="Center" justifyContent="Center">
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 18591f29..346838c0 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -121,27 +121,25 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
             <ClientRoot>
               <ClientInitStorageAtom>
                 <ClientRoomsNotificationPreferences>
-                  <ClientBindAtoms>
-                    <ClientNonUIFeatures>
-                      <ClientLayout
-                        nav={
-                          <MobileFriendlyClientNav>
-                            <SidebarNav />
-                          </MobileFriendlyClientNav>
-                        }
-                      >
-                        <Outlet />
-                      </ClientLayout>
-                      <SearchModalRenderer />
-                      <UserRoomProfileRenderer />
-                      <CreateRoomModalRenderer />
-                      <CreateSpaceModalRenderer />
-                      <RoomSettingsRenderer />
-                      <SpaceSettingsRenderer />
-                      <ReceiveSelfDeviceVerification />
-                      <AutoRestoreBackupOnVerification />
-                    </ClientNonUIFeatures>
-                  </ClientBindAtoms>
+                  <ClientBindAtoms />
+                  <ClientNonUIFeatures />
+                  <ClientLayout
+                    nav={
+                      <MobileFriendlyClientNav>
+                        <SidebarNav />
+                      </MobileFriendlyClientNav>
+                    }
+                  >
+                    <Outlet />
+                  </ClientLayout>
+                  {/* <SearchModalRenderer />
+                  <UserRoomProfileRenderer />
+                  <CreateRoomModalRenderer />
+                  <CreateSpaceModalRenderer />
+                  <RoomSettingsRenderer />
+                  <SpaceSettingsRenderer />
+                  <ReceiveSelfDeviceVerification />
+                  <AutoRestoreBackupOnVerification /> */}
                 </ClientRoomsNotificationPreferences>
               </ClientInitStorageAtom>
             </ClientRoot>
@@ -165,7 +163,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
           {mobile ? null : <Route index element={<WelcomePage />} />}
           <Route path={_CREATE_PATH} element={<HomeCreateRoom />} />
           <Route path={_JOIN_PATH} element={<p>join</p>} />
-          <Route path={_SEARCH_PATH} element={<HomeSearch />} />
+          {/* <Route path={_SEARCH_PATH} element={<HomeSearch />} /> */}
           <Route
             path={_ROOM_PATH}
             element={
@@ -229,8 +227,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
               element={<WelcomePage />}
             />
           )}
-          <Route path={_LOBBY_PATH} element={<Lobby />} />
-          <Route path={_SEARCH_PATH} element={<SpaceSearch />} />
+          {/* <Route path={_LOBBY_PATH} element={<Lobby />} />
+          <Route path={_SEARCH_PATH} element={<SpaceSearch />} /> */}
           <Route
             path={_ROOM_PATH}
             element={
@@ -250,7 +248,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                 </MobileFriendlyPageNav>
               }
             >
-              <Outlet />
+              <span>hello</span>
+              {/* <Outlet /> */}
             </PageRoot>
           }
         >
@@ -275,7 +274,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                 </MobileFriendlyPageNav>
               }
             >
-              <Outlet />
+              <span>hello</span>
+              {/* <Outlet /> */}
             </PageRoot>
           }
         >
diff --git a/src/app/pages/auth/SSOLogin.tsx b/src/app/pages/auth/SSOLogin.tsx
index 3ff1a229..45c72c14 100644
--- a/src/app/pages/auth/SSOLogin.tsx
+++ b/src/app/pages/auth/SSOLogin.tsx
@@ -1,10 +1,34 @@
 import { Avatar, AvatarImage, Box, Button, Text } from 'folds';
-import { IIdentityProvider, SSOAction, createClient } from 'matrix-js-sdk';
-import React, { useMemo } from 'react';
+import { IdentityProvider } from 'neurone/lib/api/types';
+import React from 'react';
 import { useAutoDiscoveryInfo } from '../../hooks/useAutoDiscoveryInfo';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+
+const UNSTABLE_ACTION_PARAM = 'org.matrix.msc3824.action';
+type SSOAction = 'login' | 'register';
+
+function getSsoLoginUrl(
+  baseUrl: string,
+  redirectUrl: string,
+  idpId?: string,
+  action?: SSOAction
+): string {
+  let path = '_matrix/client/v3/login/sso/redirect';
+  if (idpId) {
+    path += `/${idpId}`;
+  }
+  const url = new URL(path, baseUrl);
+
+  url.searchParams.append('redirectUrl', redirectUrl);
+  if (action) {
+    url.searchParams.append(UNSTABLE_ACTION_PARAM, action);
+  }
+
+  return url.href;
+}
 
 type SSOLoginProps = {
-  providers?: IIdentityProvider[];
+  providers?: IdentityProvider[];
   redirectUrl: string;
   action?: SSOAction;
   saveScreenSpace?: boolean;
@@ -12,14 +36,15 @@ type SSOLoginProps = {
 export function SSOLogin({ providers, redirectUrl, action, saveScreenSpace }: SSOLoginProps) {
   const discovery = useAutoDiscoveryInfo();
   const baseUrl = discovery['m.homeserver'].base_url;
-  const mx = useMemo(() => createClient({ baseUrl }), [baseUrl]);
 
   const getSSOIdUrl = (ssoId?: string): string =>
-    mx.getSsoLoginUrl(redirectUrl, 'sso', ssoId, action);
+    getSsoLoginUrl(baseUrl, redirectUrl, ssoId, action);
 
   const withoutIcon = providers
     ? providers.find(
-        (provider) => !provider.icon || !mx.mxcUrlToHttp(provider.icon, 96, 96, 'crop', false)
+        ({ icon }) =>
+          !icon ||
+          !mxcToHttp(baseUrl, icon, false).thumbnail({ width: 96, height: 96, method: 'crop' })
       )
     : true;
 
@@ -30,7 +55,13 @@ export function SSOLogin({ providers, redirectUrl, action, saveScreenSpace }: SS
       {providers ? (
         providers.map((provider) => {
           const { id, name, icon } = provider;
-          const iconUrl = icon && mx.mxcUrlToHttp(icon, 96, 96, 'crop', false);
+          const iconUrl =
+            icon &&
+            mxcToHttp(baseUrl, icon, false).thumbnail({
+              width: 96,
+              height: 96,
+              method: 'crop',
+            });
 
           const buttonTitle = `Continue with ${name}`;
 
@@ -45,7 +76,7 @@ export function SSOLogin({ providers, redirectUrl, action, saveScreenSpace }: SS
                 size="300"
                 radii="300"
               >
-                <AvatarImage src={iconUrl!} alt={name} title={buttonTitle} />
+                <AvatarImage src={iconUrl} alt={name} title={buttonTitle} />
               </Avatar>
             );
           }
diff --git a/src/app/pages/auth/login/Login.tsx b/src/app/pages/auth/login/Login.tsx
index 2f04a733..e6fad6a0 100644
--- a/src/app/pages/auth/login/Login.tsx
+++ b/src/app/pages/auth/login/Login.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, Text, color } from 'folds';
 import { Link, useSearchParams } from 'react-router-dom';
-import { SSOAction } from 'matrix-js-sdk';
 import { useAuthFlows } from '../../../hooks/useAuthFlows';
 import { useAuthServer } from '../../../hooks/useAuthServer';
 import { useParsedLoginFlows } from '../../../hooks/useParsedLoginFlows';
@@ -52,7 +51,7 @@ export function Login() {
     );
   }
 
-  const parsedFlows = useParsedLoginFlows(loginFlows.flows);
+  const parsedFlows = useParsedLoginFlows(loginFlows.flows ?? []);
 
   return (
     <Box direction="Column" gap="500">
@@ -77,7 +76,7 @@ export function Login() {
           <SSOLogin
             providers={parsedFlows.sso.identity_providers}
             redirectUrl={ssoRedirectUrl}
-            action={SSOAction.LOGIN}
+            action="login"
             saveScreenSpace={parsedFlows.password !== undefined}
           />
           <span data-spacing-node />
diff --git a/src/app/pages/auth/login/PasswordLoginForm.tsx b/src/app/pages/auth/login/PasswordLoginForm.tsx
index 62f46dd2..89204a89 100644
--- a/src/app/pages/auth/login/PasswordLoginForm.tsx
+++ b/src/app/pages/auth/login/PasswordLoginForm.tsx
@@ -19,24 +19,18 @@ import {
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { Link } from 'react-router-dom';
-import { MatrixError } from 'matrix-js-sdk';
 import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../../utils/matrix';
 import { EMAIL_REGEX } from '../../../utils/regex';
 import { useAutoDiscoveryInfo } from '../../../hooks/useAutoDiscoveryInfo';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAuthServer } from '../../../hooks/useAuthServer';
 import { useClientConfig } from '../../../hooks/useClientConfig';
-import {
-  CustomLoginResponse,
-  LoginError,
-  factoryGetBaseUrl,
-  login,
-  useLoginComplete,
-} from './loginUtil';
+import { LoginError, factoryGetBaseUrl, login, useLoginComplete } from './loginUtil';
 import { PasswordInput } from '../../../components/password-input';
 import { FieldError } from '../FiledError';
 import { getResetPasswordPath } from '../../pathUtils';
 import { stopPropagation } from '../../../utils/keyboard';
+import { getInitialDeviceDisplayName } from '../../../utils/user-agent';
 
 function UsernameHint({ server }: { server: string }) {
   const [anchor, setAnchor] = useState<RectCords>();
@@ -117,13 +111,11 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
   const serverDiscovery = useAutoDiscoveryInfo();
   const baseUrl = serverDiscovery['m.homeserver'].base_url;
 
-  const [loginState, startLogin] = useAsyncCallback<
-    CustomLoginResponse,
-    MatrixError,
-    Parameters<typeof login>
-  >(useCallback(login, []));
+  const [loginState, startLogin] = useAsyncCallback(useCallback(login, []));
+  const [loginError, customLoginResponse] =
+    loginState.status === AsyncStatus.Success ? loginState.data : [];
 
-  useLoginComplete(loginState.status === AsyncStatus.Success ? loginState.data : undefined);
+  useLoginComplete(customLoginResponse);
 
   const handleUsernameLogin = (username: string, password: string) => {
     startLogin(baseUrl, {
@@ -133,7 +125,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
         user: username,
       },
       password,
-      initial_device_display_name: 'Cinny Web',
+      initial_device_display_name: getInitialDeviceDisplayName(),
     });
   };
 
@@ -151,7 +143,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
         user: mxIdUsername,
       },
       password,
-      initial_device_display_name: 'Cinny Web',
+      initial_device_display_name: getInitialDeviceDisplayName(),
     });
   };
   const handleEmailLogin = (email: string, password: string) => {
@@ -163,7 +155,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
         address: email,
       },
       password,
-      initial_device_display_name: 'Cinny Web',
+      initial_device_display_name: getInitialDeviceDisplayName(),
     });
   };
 
@@ -212,12 +204,12 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
           outlined
           after={<UsernameHint server={server} />}
         />
-        {loginState.status === AsyncStatus.Error && (
+        {loginError && (
           <>
-            {loginState.error.errcode === LoginError.ServerNotAllowed && (
+            {loginError === LoginError.ServerNotAllowed && (
               <FieldError message="Login with custom server not allowed by your client instance." />
             )}
-            {loginState.error.errcode === LoginError.InvalidServer && (
+            {loginError === LoginError.InvalidServer && (
               <FieldError message="Failed to find your Matrix ID server." />
             )}
           </>
@@ -229,25 +221,34 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
         </Text>
         <PasswordInput name="passwordInput" variant="Background" size="500" outlined required />
         <Box alignItems="Start" justifyContent="SpaceBetween" gap="200">
-          {loginState.status === AsyncStatus.Error && (
+          {loginError && (
             <>
-              {loginState.error.errcode === LoginError.Forbidden && (
+              {loginError === LoginError.Forbidden && (
                 <FieldError message="Invalid Username or Password." />
               )}
-              {loginState.error.errcode === LoginError.UserDeactivated && (
+              {loginError === LoginError.UserDeactivated && (
                 <FieldError message="This account has been deactivated." />
               )}
-              {loginState.error.errcode === LoginError.InvalidRequest && (
+              {loginError === LoginError.InvalidRequest && (
                 <FieldError message="Failed to login. Part of your request data is invalid." />
               )}
-              {loginState.error.errcode === LoginError.RateLimited && (
+              {loginError === LoginError.RateLimited && (
                 <FieldError message="Failed to login. Your login request has been rate-limited by server, Please try after some time." />
               )}
-              {loginState.error.errcode === LoginError.Unknown && (
+              {loginError === LoginError.Unknown && (
                 <FieldError message="Failed to login. Unknown reason." />
               )}
             </>
           )}
+          {loginState.status === AsyncStatus.Error && (
+            <FieldError
+              message={
+                loginState.error instanceof Error
+                  ? loginState.error.message
+                  : 'Your request to login has been failed for unknown reasons.'
+              }
+            />
+          )}
           <Box grow="Yes" shrink="No" justifyContent="End">
             <Text as="span" size="T200" priority="400" align="Right">
               <Link to={getResetPasswordPath(server)}>Forget Password?</Link>
@@ -262,9 +263,7 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
       </Button>
 
       <Overlay
-        open={
-          loginState.status === AsyncStatus.Loading || loginState.status === AsyncStatus.Success
-        }
+        open={loginState.status === AsyncStatus.Loading || !!customLoginResponse}
         backdrop={<OverlayBackdrop />}
       >
         <OverlayCenter>
diff --git a/src/app/pages/auth/login/TokenLogin.tsx b/src/app/pages/auth/login/TokenLogin.tsx
index 761d5dc5..33f73e62 100644
--- a/src/app/pages/auth/login/TokenLogin.tsx
+++ b/src/app/pages/auth/login/TokenLogin.tsx
@@ -11,10 +11,10 @@ import {
   config,
 } from 'folds';
 import React, { useCallback, useEffect } from 'react';
-import { MatrixError } from 'matrix-js-sdk';
 import { useAutoDiscoveryInfo } from '../../../hooks/useAutoDiscoveryInfo';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { CustomLoginResponse, LoginError, login, useLoginComplete } from './loginUtil';
+import { LoginError, login, useLoginComplete } from './loginUtil';
+import { getInitialDeviceDisplayName } from '../../../utils/user-agent';
 
 function LoginTokenError({ message }: { message: string }) {
   return (
@@ -47,44 +47,55 @@ export function TokenLogin({ token }: TokenLoginProps) {
   const discovery = useAutoDiscoveryInfo();
   const baseUrl = discovery['m.homeserver'].base_url;
 
-  const [loginState, startLogin] = useAsyncCallback<
-    CustomLoginResponse,
-    MatrixError,
-    Parameters<typeof login>
-  >(useCallback(login, []));
+  const [loginState, startLogin] = useAsyncCallback(useCallback(login, []));
 
   useEffect(() => {
     startLogin(baseUrl, {
       type: 'm.login.token',
       token,
-      initial_device_display_name: 'Cinny Web',
+      initial_device_display_name: getInitialDeviceDisplayName(),
     });
   }, [baseUrl, token, startLogin]);
 
-  useLoginComplete(loginState.status === AsyncStatus.Success ? loginState.data : undefined);
+  const [loginError, customLoginResponse] =
+    loginState.status === AsyncStatus.Success ? loginState.data : [];
+
+  useLoginComplete(customLoginResponse);
 
   return (
     <>
-      {loginState.status === AsyncStatus.Error && (
+      {loginError && (
         <>
-          {loginState.error.errcode === LoginError.Forbidden && (
+          {loginError === LoginError.Forbidden && (
             <LoginTokenError message="Invalid login token." />
           )}
-          {loginState.error.errcode === LoginError.UserDeactivated && (
+          {loginError === LoginError.UserDeactivated && (
             <LoginTokenError message="This account has been deactivated." />
           )}
-          {loginState.error.errcode === LoginError.InvalidRequest && (
+          {loginError === LoginError.InvalidRequest && (
             <LoginTokenError message="Failed to login. Part of your request data is invalid." />
           )}
-          {loginState.error.errcode === LoginError.RateLimited && (
+          {loginError === LoginError.RateLimited && (
             <LoginTokenError message="Failed to login. Your login request has been rate-limited by server, Please try after some time." />
           )}
-          {loginState.error.errcode === LoginError.Unknown && (
+          {loginError === LoginError.Unknown && (
             <LoginTokenError message="Failed to login. Unknown reason." />
           )}
         </>
       )}
-      <Overlay open={loginState.status !== AsyncStatus.Error} backdrop={<OverlayBackdrop />}>
+      {loginState.status === AsyncStatus.Error && (
+        <LoginTokenError
+          message={
+            loginState.error instanceof Error
+              ? loginState.error.message
+              : 'Your request to login has been failed for unknown reasons.'
+          }
+        />
+      )}
+      <Overlay
+        open={loginState.status !== AsyncStatus.Error && !loginError}
+        backdrop={<OverlayBackdrop />}
+      >
         <OverlayCenter>
           <Spinner size="600" variant="Secondary" />
         </OverlayCenter>
diff --git a/src/app/pages/auth/login/loginUtil.ts b/src/app/pages/auth/login/loginUtil.ts
index ba5b0bc9..0922572a 100644
--- a/src/app/pages/auth/login/loginUtil.ts
+++ b/src/app/pages/auth/login/loginUtil.ts
@@ -1,7 +1,8 @@
 import to from 'await-to-js';
-import { LoginRequest, LoginResponse, MatrixError, createClient } from 'matrix-js-sdk';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { postLogin, PostLoginBody, PostLoginOK } from 'neurone/lib/api/matrix/client/v3/login';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { ClientConfig, clientAllowedServer } from '../../../hooks/useClientConfig';
 import { autoDiscovery, specVersions } from '../../../cs-api';
 import { ErrorCode } from '../../../cs-errorcode';
@@ -11,6 +12,7 @@ import {
 } from '../../afterLoginRedirectPath';
 import { getHomePath } from '../../pathUtils';
 import { setFallbackSession } from '../../../state/sessions';
+import { getJSONRequest } from '../../../../client/request';
 
 export enum GetBaseUrlError {
   NotAllow = 'NotAllow',
@@ -55,57 +57,53 @@ export enum LoginError {
 
 export type CustomLoginResponse = {
   baseUrl: string;
-  response: LoginResponse;
+  response: PostLoginOK;
 };
 export const login = async (
   serverBaseUrl: string | (() => Promise<string>),
-  data: LoginRequest
-): Promise<CustomLoginResponse> => {
+  body: PostLoginBody
+): Promise<[LoginError, undefined] | [undefined, CustomLoginResponse]> => {
   const [urlError, url] =
     typeof serverBaseUrl === 'function' ? await to(serverBaseUrl()) : [undefined, serverBaseUrl];
+
   if (urlError) {
-    throw new MatrixError({
-      errcode:
-        urlError.message === GetBaseUrlError.NotAllow
-          ? LoginError.ServerNotAllowed
-          : LoginError.InvalidServer,
-    });
+    return [
+      urlError.message === GetBaseUrlError.NotAllow
+        ? LoginError.ServerNotAllowed
+        : LoginError.InvalidServer,
+      undefined,
+    ];
   }
 
-  const mx = createClient({ baseUrl: url });
-  const [err, res] = await to<LoginResponse, MatrixError>(mx.loginRequest(data));
+  const requestJSON = getJSONRequest(url);
+  const postLoginEndpoint = postLogin({ body });
+  const response = await requestJSON(postLoginEndpoint);
+  const [loginError, loginResult] = await parseMatrixResp<PostLoginOK>(response);
 
-  if (err) {
-    if (err.httpStatus === 400) {
-      throw new MatrixError({
-        errcode: LoginError.InvalidRequest,
-      });
+  if (loginError) {
+    if (loginError.status === 400) {
+      return [LoginError.InvalidRequest, undefined];
     }
-    if (err.httpStatus === 429) {
-      throw new MatrixError({
-        errcode: LoginError.RateLimited,
-      });
+    if (loginError.status === 429) {
+      return [LoginError.RateLimited, undefined];
     }
-    if (err.errcode === ErrorCode.M_USER_DEACTIVATED) {
-      throw new MatrixError({
-        errcode: LoginError.UserDeactivated,
-      });
+    if (loginError.data.errcode === ErrorCode.M_USER_DEACTIVATED) {
+      return [LoginError.UserDeactivated, undefined];
     }
 
-    if (err.httpStatus === 403) {
-      throw new MatrixError({
-        errcode: LoginError.Forbidden,
-      });
+    if (loginError.status === 403) {
+      return [LoginError.Forbidden, undefined];
     }
 
-    throw new MatrixError({
-      errcode: LoginError.Unknown,
-    });
+    return [LoginError.Unknown, undefined];
   }
-  return {
-    baseUrl: url,
-    response: res,
-  };
+  return [
+    undefined,
+    {
+      baseUrl: url,
+      response: loginResult,
+    },
+  ];
 };
 
 export const useLoginComplete = (data?: CustomLoginResponse) => {
diff --git a/src/app/pages/auth/register/PasswordRegisterForm.tsx b/src/app/pages/auth/register/PasswordRegisterForm.tsx
index 9f173422..30667963 100644
--- a/src/app/pages/auth/register/PasswordRegisterForm.tsx
+++ b/src/app/pages/auth/register/PasswordRegisterForm.tsx
@@ -10,22 +10,17 @@ import {
   Text,
   color,
 } from 'folds';
-import React, { ChangeEventHandler, useCallback, useMemo, useState } from 'react';
-import {
-  AuthDict,
-  AuthType,
-  IAuthData,
-  MatrixError,
-  RegisterRequest,
-  UIAFlow,
-  createClient,
-} from 'matrix-js-sdk';
+import React, { ChangeEventHandler, useCallback, useState } from 'react';
+import { PostRegisterBody } from 'neurone/lib/api/matrix/client/v3/register';
 import { PasswordInput } from '../../../components/password-input';
 import {
+  AuthResponse,
+  AuthType,
   getLoginTermUrl,
   getUIAFlowForStages,
   hasStageInFlows,
   requiredStageInFlows,
+  UIAFlow,
 } from '../../../utils/matrix-uia';
 import { useUIACompleted, useUIAFlow, useUIAParams } from '../../../hooks/useUIAFlows';
 import { AsyncState, AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -42,7 +37,9 @@ import {
 import { useRegisterEmail } from '../../../hooks/useRegisterEmail';
 import { ConfirmPasswordMatch } from '../../../components/ConfirmPasswordMatch';
 import { UIAFlowOverlay } from '../../../components/UIAFlowOverlay';
-import { RequestEmailTokenCallback, RequestEmailTokenResponse } from '../../../hooks/types';
+import { RequestEmailTokenCallback, RequestEmailTokenResult } from '../../../hooks/types';
+import { generateClientSecret } from '../../../utils/randomString';
+import { getInitialDeviceDisplayName } from '../../../utils/user-agent';
 
 export const SUPPORTED_REGISTER_STAGES = [
   AuthType.RegistrationToken,
@@ -84,10 +81,10 @@ const pickStages = (uiaFlows: UIAFlow[], formData: FormData): string[] => {
 type RegisterUIAFlowProps = {
   formData: FormData;
   flow: UIAFlow;
-  authData: IAuthData;
-  registerEmailState: AsyncState<RequestEmailTokenResponse, MatrixError>;
+  authData: AuthResponse;
+  registerEmailState: AsyncState<RequestEmailTokenResult, Error>;
   registerEmail: RequestEmailTokenCallback;
-  onRegister: (registerReqData: RegisterRequest) => void;
+  onRegister: (registerReqData: PostRegisterBody) => void;
 };
 function RegisterUIAFlow({
   formData,
@@ -103,13 +100,13 @@ function RegisterUIAFlow({
   const stageToComplete = getStageToComplete();
 
   const handleAuthDict = useCallback(
-    (authDict: AuthDict) => {
+    (authDict: object) => {
       const { password, username } = formData;
       onRegister({
         auth: authDict,
         password,
         username,
-        initial_device_display_name: 'Cinny Web',
+        initial_device_display_name: getInitialDeviceDisplayName(),
       });
     },
     [onRegister, formData]
@@ -171,7 +168,7 @@ function RegisterUIAFlow({
 }
 
 type PasswordRegisterFormProps = {
-  authData: IAuthData;
+  authData: AuthResponse;
   uiaFlows: UIAFlow[];
   defaultUsername?: string;
   defaultEmail?: string;
@@ -186,23 +183,24 @@ export function PasswordRegisterForm({
 }: PasswordRegisterFormProps) {
   const serverDiscovery = useAutoDiscoveryInfo();
   const baseUrl = serverDiscovery['m.homeserver'].base_url;
-  const mx = useMemo(() => createClient({ baseUrl }), [baseUrl]);
+
   const params = useUIAParams(authData);
   const termUrl = getLoginTermUrl(params);
   const [formData, setFormData] = useState<FormData>();
 
   const [ongoingFlow, setOngoingFlow] = useState<UIAFlow>();
 
-  const [registerEmailState, registerEmail] = useRegisterEmail(mx);
+  const [registerEmailState, registerEmail] = useRegisterEmail(baseUrl);
 
   const [registerState, handleRegister] = useAsyncCallback<
     RegisterResult,
-    MatrixError,
-    [RegisterRequest]
-  >(useCallback(async (registerReqData) => register(mx, registerReqData), [mx]));
-  const [ongoingAuthData, customRegisterResp] =
+    Error,
+    [PostRegisterBody]
+  >(useCallback(async (registerReqData) => register(baseUrl, registerReqData), [baseUrl]));
+  const [ongoingAuthData, registerError, customRegisterResp] =
     registerState.status === AsyncStatus.Success ? registerState.data : [];
-  const registerError =
+
+  const registerRequestError =
     registerState.status === AsyncStatus.Error ? registerState.error : undefined;
 
   useRegisterComplete(customRegisterResp);
@@ -238,8 +236,9 @@ export function PasswordRegisterForm({
       token,
       email,
       terms,
-      clientSecret: mx.generateClientSecret(),
+      clientSecret: generateClientSecret(),
     };
+
     const pickedStages = pickStages(uiaFlows, fData);
     const pickedFlow = getUIAFlowForStages(uiaFlows, pickedStages);
     setOngoingFlow(pickedFlow);
@@ -250,7 +249,7 @@ export function PasswordRegisterForm({
       auth: {
         session: authData.session,
       },
-      initial_device_display_name: 'Cinny Web',
+      initial_device_display_name: getInitialDeviceDisplayName(),
     });
   };
 
@@ -269,13 +268,13 @@ export function PasswordRegisterForm({
             outlined
             required
           />
-          {registerError?.errcode === RegisterError.UserTaken && (
+          {registerError?.error === RegisterError.UserTaken && (
             <FieldError message="This username is already taken." />
           )}
-          {registerError?.errcode === RegisterError.UserInvalid && (
+          {registerError?.error === RegisterError.UserInvalid && (
             <FieldError message="This username contains invalid characters." />
           )}
-          {registerError?.errcode === RegisterError.UserExclusive && (
+          {registerError?.error === RegisterError.UserExclusive && (
             <FieldError message="This username is reserved." />
           )}
         </Box>
@@ -295,18 +294,18 @@ export function PasswordRegisterForm({
                   outlined
                   required
                 />
-                {registerError?.errcode === RegisterError.PasswordWeak && (
+                {registerError?.error === RegisterError.PasswordWeak && (
                   <FieldError
                     message={
-                      registerError.data.error ??
+                      registerError.message ??
                       'Weak Password. Password rejected by server please choosing more strong Password.'
                     }
                   />
                 )}
-                {registerError?.errcode === RegisterError.PasswordShort && (
+                {registerError?.error === RegisterError.PasswordShort && (
                   <FieldError
                     message={
-                      registerError.data.error ??
+                      registerError.message ??
                       'Short Password. Password rejected by server please choosing more long Password.'
                     }
                   />
@@ -376,17 +375,22 @@ export function PasswordRegisterForm({
             </Text>
           </Box>
         )}
-        {registerError?.errcode === RegisterError.RateLimited && (
+        {registerError?.error === RegisterError.RateLimited && (
           <FieldError message="Failed to register. Your register request has been rate-limited by server, Please try after some time." />
         )}
-        {registerError?.errcode === RegisterError.Forbidden && (
+        {registerError?.error === RegisterError.Forbidden && (
           <FieldError message="Failed to register. The homeserver does not permit registration." />
         )}
-        {registerError?.errcode === RegisterError.InvalidRequest && (
+        {registerError?.error === RegisterError.InvalidRequest && (
           <FieldError message="Failed to register. Invalid request." />
         )}
-        {registerError?.errcode === RegisterError.Unknown && (
-          <FieldError message={registerError.data.error ?? 'Failed to register. Unknown Reason.'} />
+        {registerError?.error === RegisterError.Unknown && (
+          <FieldError message={registerError.message ?? 'Failed to register. Unknown Reason.'} />
+        )}
+        {registerRequestError && (
+          <FieldError
+            message={registerRequestError.message ?? 'Failed to register. Unknown Reason.'}
+          />
         )}
         <span data-spacing-node />
         <Button variant="Primary" size="500" type="submit">
diff --git a/src/app/pages/auth/register/Register.tsx b/src/app/pages/auth/register/Register.tsx
index 7176489b..f937dca0 100644
--- a/src/app/pages/auth/register/Register.tsx
+++ b/src/app/pages/auth/register/Register.tsx
@@ -1,7 +1,6 @@
 import React, { useMemo } from 'react';
 import { Box, Text, color } from 'folds';
 import { Link, useSearchParams } from 'react-router-dom';
-import { SSOAction } from 'matrix-js-sdk';
 import { useAuthServer } from '../../../hooks/useAuthServer';
 import { RegisterFlowStatus, useAuthFlows } from '../../../hooks/useAuthFlows';
 import { useParsedLoginFlows } from '../../../hooks/useParsedLoginFlows';
@@ -28,7 +27,7 @@ export function Register() {
   const { loginFlows, registerFlows } = useAuthFlows();
   const [searchParams] = useSearchParams();
   const registerSearchParams = useRegisterSearchParams(searchParams);
-  const { sso } = useParsedLoginFlows(loginFlows.flows);
+  const { sso } = useParsedLoginFlows(loginFlows.flows ?? []);
 
   // redirect to /login because only that path handle m.login.token
   const ssoRedirectUrl = usePathWithOrigin(getLoginPath(server));
@@ -84,7 +83,7 @@ export function Register() {
           <SSOLogin
             providers={sso.identity_providers}
             redirectUrl={ssoRedirectUrl}
-            action={SSOAction.REGISTER}
+            action="register"
             saveScreenSpace={registerFlows.status === RegisterFlowStatus.FlowRequired}
           />
           <span data-spacing-node />
diff --git a/src/app/pages/auth/register/registerUtil.ts b/src/app/pages/auth/register/registerUtil.ts
index 86a38cb5..24e7a8c0 100644
--- a/src/app/pages/auth/register/registerUtil.ts
+++ b/src/app/pages/auth/register/registerUtil.ts
@@ -1,11 +1,9 @@
-import to from 'await-to-js';
 import {
-  IAuthData,
-  MatrixClient,
-  MatrixError,
-  RegisterRequest,
-  RegisterResponse,
-} from 'matrix-js-sdk';
+  postRegister,
+  PostRegisterBody,
+  PostRegisterOK,
+} from 'neurone/lib/api/matrix/client/v3/register';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { LoginPathSearchParams } from '../../paths';
@@ -17,6 +15,8 @@ import {
 import { getHomePath, getLoginPath, withSearchParam } from '../../pathUtils';
 import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
 import { setFallbackSession } from '../../../state/sessions';
+import { AuthResponse } from '../../../utils/matrix-uia';
+import { getJSONRequest } from '../../../../client/request';
 
 export enum RegisterError {
   UserTaken = 'UserTaken',
@@ -32,77 +32,106 @@ export enum RegisterError {
 
 export type CustomRegisterResponse = {
   baseUrl: string;
-  response: RegisterResponse;
+  response: PostRegisterOK;
 };
-export type RegisterResult = [IAuthData, undefined] | [undefined, CustomRegisterResponse];
+
+export type RegisterErrorData = {
+  error: RegisterError;
+  message?: string;
+};
+
+export type RegisterResult =
+  | [AuthResponse, undefined, undefined]
+  | [undefined, RegisterErrorData, undefined]
+  | [undefined, undefined, CustomRegisterResponse];
+
 export const register = async (
-  mx: MatrixClient,
-  requestData: RegisterRequest
+  baseUrl: string,
+  requestData: PostRegisterBody
 ): Promise<RegisterResult> => {
-  const [err, res] = await to<RegisterResponse, MatrixError>(mx.registerRequest(requestData));
+  const requestJSON = getJSONRequest(baseUrl);
+  const response = await requestJSON(postRegister({ body: requestData }));
+  const [registerError, registerResult] = await parseMatrixResp<PostRegisterOK>(response);
 
-  if (err) {
-    if (err.httpStatus === 401) {
-      const authData = err.data as IAuthData;
-      return [authData, undefined];
+  if (registerError) {
+    if (registerError.status === 401) {
+      const authData = registerError.data as AuthResponse;
+      return [authData, undefined, undefined];
     }
 
-    if (err.errcode === ErrorCode.M_USER_IN_USE) {
-      throw new MatrixError({
-        errcode: RegisterError.UserTaken,
-      });
+    if (registerError.data.errcode === ErrorCode.M_USER_IN_USE) {
+      return [
+        undefined,
+        { error: RegisterError.UserTaken, message: registerError.data.error },
+        undefined,
+      ];
     }
-    if (err.errcode === ErrorCode.M_INVALID_USERNAME) {
-      throw new MatrixError({
-        errcode: RegisterError.UserInvalid,
-      });
+    if (registerError.data.errcode === ErrorCode.M_INVALID_USERNAME) {
+      return [
+        undefined,
+        { error: RegisterError.UserInvalid, message: registerError.data.error },
+        undefined,
+      ];
     }
-    if (err.errcode === ErrorCode.M_EXCLUSIVE) {
-      throw new MatrixError({
-        errcode: RegisterError.UserExclusive,
-      });
+    if (registerError.data.errcode === ErrorCode.M_EXCLUSIVE) {
+      return [
+        undefined,
+        { error: RegisterError.UserExclusive, message: registerError.data.error },
+        undefined,
+      ];
     }
-    if (err.errcode === ErrorCode.M_WEAK_PASSWORD) {
-      throw new MatrixError({
-        errcode: RegisterError.PasswordWeak,
-        error: err.data.error,
-      });
+    if (registerError.data.errcode === ErrorCode.M_WEAK_PASSWORD) {
+      return [
+        undefined,
+        { error: RegisterError.PasswordWeak, message: registerError.data.error },
+        undefined,
+      ];
     }
-    if (err.errcode === ErrorCode.M_PASSWORD_TOO_SHORT) {
-      throw new MatrixError({
-        errcode: RegisterError.PasswordShort,
-        error: err.data.error,
-      });
+    if (registerError.data.errcode === ErrorCode.M_PASSWORD_TOO_SHORT) {
+      return [
+        undefined,
+        { error: RegisterError.PasswordShort, message: registerError.data.error },
+        undefined,
+      ];
     }
 
-    if (err.httpStatus === 429) {
-      throw new MatrixError({
-        errcode: RegisterError.RateLimited,
-      });
+    if (registerError.status === 429) {
+      return [
+        undefined,
+        { error: RegisterError.RateLimited, message: registerError.data.error },
+        undefined,
+      ];
     }
 
-    if (err.httpStatus === 400) {
-      throw new MatrixError({
-        errcode: RegisterError.InvalidRequest,
-      });
+    if (registerError.status === 400) {
+      return [
+        undefined,
+        { error: RegisterError.InvalidRequest, message: registerError.data.error },
+        undefined,
+      ];
     }
 
-    if (err.httpStatus === 403) {
-      throw new MatrixError({
-        errcode: RegisterError.Forbidden,
-      });
+    if (registerError.status === 403) {
+      return [
+        undefined,
+        { error: RegisterError.Forbidden, message: registerError.data.error },
+        undefined,
+      ];
     }
 
-    throw new MatrixError({
-      errcode: RegisterError.Unknown,
-      error: err.data.error,
-    });
+    return [
+      undefined,
+      { error: RegisterError.Unknown, message: registerError.data.error },
+      undefined,
+    ];
   }
+
   return [
+    undefined,
     undefined,
     {
-      baseUrl: mx.baseUrl,
-      response: res,
+      baseUrl,
+      response: registerResult,
     },
   ];
 };
diff --git a/src/app/pages/auth/reset-password/PasswordResetForm.tsx b/src/app/pages/auth/reset-password/PasswordResetForm.tsx
index 392f45c0..b06dcf13 100644
--- a/src/app/pages/auth/reset-password/PasswordResetForm.tsx
+++ b/src/app/pages/auth/reset-password/PasswordResetForm.tsx
@@ -1,4 +1,4 @@
-import React, { FormEventHandler, useCallback, useEffect, useMemo, useState } from 'react';
+import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
 import {
   Box,
   Button,
@@ -12,9 +12,10 @@ import {
   color,
   config,
 } from 'folds';
+import { printMatrixError } from 'neurone/lib/matrix-request';
+import { PostPasswordBody } from 'neurone/lib/api/matrix/client/v3/account';
 import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
-import { AuthDict, AuthType, MatrixError, createClient } from 'matrix-js-sdk';
 import { useAutoDiscoveryInfo } from '../../../hooks/useAutoDiscoveryInfo';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAuthServer } from '../../../hooks/useAuthServer';
@@ -27,7 +28,8 @@ import { EmailStageDialog } from '../../../components/uia-stages';
 import { ResetPasswordResult, resetPassword } from './resetPasswordUtil';
 import { getLoginPath, withSearchParam } from '../../pathUtils';
 import { LoginPathSearchParams } from '../../paths';
-import { getUIAError, getUIAErrorCode } from '../../../utils/matrix-uia';
+import { AuthType, getUIAError, getUIAErrorCode } from '../../../utils/matrix-uia';
+import { generateClientSecret } from '../../../utils/randomString';
 
 type FormData = {
   email: string;
@@ -79,21 +81,24 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
 
   const serverDiscovery = useAutoDiscoveryInfo();
   const baseUrl = serverDiscovery['m.homeserver'].base_url;
-  const mx = useMemo(() => createClient({ baseUrl }), [baseUrl]);
 
   const [formData, setFormData] = useState<FormData>();
 
-  const [passwordEmailState, passwordEmail] = usePasswordEmail(mx);
+  const [passwordEmailState, passwordEmail] = usePasswordEmail(baseUrl);
+  const [passwordEmailError] =
+    passwordEmailState.status === AsyncStatus.Success ? passwordEmailState.data : [];
+  const passwordEmailRequestError =
+    passwordEmailState.status === AsyncStatus.Error ? passwordEmailState.error : undefined;
 
   const [resetPasswordState, handleResetPassword] = useAsyncCallback<
     ResetPasswordResult,
-    MatrixError,
-    [AuthDict, string]
-  >(useCallback(async (authDict, newPassword) => resetPassword(mx, authDict, newPassword), [mx]));
+    Error,
+    [PostPasswordBody]
+  >(useCallback(async (requestData) => resetPassword(baseUrl, requestData), [baseUrl]));
 
-  const [ongoingAuthData, resetPasswordResult] =
+  const [ongoingAuthData, resetPasswordError, resetPasswordResult] =
     resetPasswordState.status === AsyncStatus.Success ? resetPasswordState.data : [];
-  const resetPasswordError =
+  const resetPasswordRequestError =
     resetPasswordState.status === AsyncStatus.Error ? resetPasswordState.error : undefined;
 
   const flowErrorCode = ongoingAuthData && getUIAErrorCode(ongoingAuthData);
@@ -102,7 +107,7 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
   let waitingToVerifyEmail = true;
   if (resetPasswordResult) waitingToVerifyEmail = false;
   if (ongoingAuthData && flowErrorCode === undefined) waitingToVerifyEmail = false;
-  if (resetPasswordError) waitingToVerifyEmail = false;
+  if (resetPasswordError || resetPasswordRequestError) waitingToVerifyEmail = false;
   if (resetPasswordState.status === AsyncStatus.Loading) waitingToVerifyEmail = false;
 
   // We only support UIA m.login.password stage for reset password
@@ -110,18 +115,18 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
   // we have 401 with no error on initial request.
   useEffect(() => {
     if (formData && ongoingAuthData && !flowErrorCode) {
-      handleResetPassword(
-        {
+      handleResetPassword({
+        auth: {
           type: AuthType.Password,
           identifier: {
             type: 'm.id.thirdparty',
             medium: 'email',
             address: formData.email,
           },
-          password: formData.password,
         },
-        formData.password
-      );
+        new_password: formData.password,
+        logout_devices: false,
+      });
     }
   }, [ongoingAuthData, flowErrorCode, formData, handleResetPassword]);
 
@@ -142,7 +147,7 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
     }
     if (password !== confirmPassword) return;
 
-    const clientSecret = mx.generateClientSecret();
+    const clientSecret = generateClientSecret();
     passwordEmail(email, clientSecret);
     setFormData({
       email,
@@ -156,10 +161,14 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
   };
 
   const handleSubmitRequest = useCallback(
-    (authDict: AuthDict) => {
+    (authDict: object) => {
       if (!formData) return;
       const { password } = formData;
-      handleResetPassword(authDict, password);
+      handleResetPassword({
+        auth: authDict,
+        new_password: password,
+        logout_devices: false,
+      });
     },
     [formData, handleResetPassword]
   );
@@ -182,11 +191,8 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
           required
           outlined
         />
-        {passwordEmailState.status === AsyncStatus.Error && (
-          <FieldError
-            message={`${passwordEmailState.error.errcode}: ${passwordEmailState.error.data?.error}`}
-          />
-        )}
+        {passwordEmailRequestError && <FieldError message={passwordEmailRequestError.message} />}
+        {passwordEmailError && <FieldError message={printMatrixError(passwordEmailError)} />}
       </Box>
       <ConfirmPasswordMatch initialValue>
         {(match, doMatch, passRef, confPassRef) => (
@@ -223,12 +229,9 @@ export function PasswordResetForm({ defaultEmail }: PasswordResetFormProps) {
           </>
         )}
       </ConfirmPasswordMatch>
-      {resetPasswordError && (
-        <FieldError
-          message={`${resetPasswordError.errcode}: ${
-            resetPasswordError.data?.error ?? 'Failed to reset password.'
-          }`}
-        />
+      {resetPasswordError && <FieldError message={printMatrixError(resetPasswordError)} />}
+      {resetPasswordRequestError && (
+        <FieldError message={resetPasswordRequestError.message ?? 'Failed to reset password.'} />
       )}
       <span data-spacing-node />
       <Button type="submit" variant="Primary" size="500">
diff --git a/src/app/pages/auth/reset-password/resetPasswordUtil.ts b/src/app/pages/auth/reset-password/resetPasswordUtil.ts
index 5eb436fa..2d8b0467 100644
--- a/src/app/pages/auth/reset-password/resetPasswordUtil.ts
+++ b/src/app/pages/auth/reset-password/resetPasswordUtil.ts
@@ -1,23 +1,31 @@
-import to from 'await-to-js';
-import { AuthDict, IAuthData, MatrixClient, MatrixError } from 'matrix-js-sdk';
+import { MatrixError, parseMatrixResp } from 'neurone/lib/matrix-request';
+import {
+  postPassword,
+  PostPasswordBody,
+  PostPasswordOK,
+} from 'neurone/lib/api/matrix/client/v3/account';
+import { AuthResponse } from '../../../utils/matrix-uia';
+import { getJSONRequest } from '../../../../client/request';
 
 export type ResetPasswordResponse = Record<string, never>;
-export type ResetPasswordResult = [IAuthData, undefined] | [undefined, ResetPasswordResponse];
+export type ResetPasswordResult =
+  | [AuthResponse, undefined, undefined]
+  | [undefined, MatrixError, undefined]
+  | [undefined, undefined, ResetPasswordResponse];
 export const resetPassword = async (
-  mx: MatrixClient,
-  authDict: AuthDict,
-  newPassword: string
+  baseUrl: string,
+  requestData: PostPasswordBody
 ): Promise<ResetPasswordResult> => {
-  const [err, res] = await to<ResetPasswordResponse, MatrixError>(
-    mx.setPassword(authDict, newPassword, false)
-  );
+  const requestJSON = getJSONRequest(baseUrl);
+  const response = await requestJSON(postPassword({ body: requestData }));
+  const [passwordError, passwordResult] = await parseMatrixResp<PostPasswordOK>(response);
 
-  if (err) {
-    if (err.httpStatus === 401) {
-      const authData = err.data as IAuthData;
-      return [authData, undefined];
+  if (passwordError) {
+    if (passwordError.status === 401) {
+      const authData = passwordError.data as AuthResponse;
+      return [authData, undefined, undefined];
     }
-    throw err;
+    return [undefined, passwordError, undefined];
   }
-  return [undefined, res];
+  return [undefined, undefined, passwordResult];
 };
diff --git a/src/app/pages/client/ClientBindAtoms.ts b/src/app/pages/client/ClientBindAtoms.ts
index 5d57321e..4abfdbc4 100644
--- a/src/app/pages/client/ClientBindAtoms.ts
+++ b/src/app/pages/client/ClientBindAtoms.ts
@@ -1,14 +1,9 @@
-import { ReactNode } from 'react';
-
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useBindAtoms } from '../../state/hooks/useBindAtoms';
+import { useClient } from '../../hooks/useClient';
 
-type ClientBindAtomsProps = {
-  children: ReactNode;
-};
-export function ClientBindAtoms({ children }: ClientBindAtomsProps) {
-  const mx = useMatrixClient();
-  useBindAtoms(mx);
+export function ClientBindAtoms() {
+  const ct = useClient();
+  useBindAtoms(ct);
 
-  return children;
+  return null;
 }
diff --git a/src/app/pages/client/ClientInitStorageAtom.tsx b/src/app/pages/client/ClientInitStorageAtom.tsx
index 1abee707..aeabb3e9 100644
--- a/src/app/pages/client/ClientInitStorageAtom.tsx
+++ b/src/app/pages/client/ClientInitStorageAtom.tsx
@@ -1,5 +1,4 @@
 import React, { ReactNode, useMemo } from 'react';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { makeClosedNavCategoriesAtom } from '../../state/closedNavCategories';
 import { ClosedNavCategoriesProvider } from '../../state/hooks/closedNavCategories';
 import { makeClosedLobbyCategoriesAtom } from '../../state/closedLobbyCategories';
@@ -8,13 +7,14 @@ import { makeNavToActivePathAtom } from '../../state/navToActivePath';
 import { NavToActivePathProvider } from '../../state/hooks/navToActivePath';
 import { makeOpenedSidebarFolderAtom } from '../../state/openedSidebarFolder';
 import { OpenedSidebarFolderProvider } from '../../state/hooks/openedSidebarFolder';
+import { useClient } from '../../hooks/useClient';
 
 type ClientInitStorageAtomProps = {
   children: ReactNode;
 };
 export function ClientInitStorageAtom({ children }: ClientInitStorageAtomProps) {
-  const mx = useMatrixClient();
-  const userId = mx.getUserId()!;
+  const ct = useClient();
+  const { userId } = ct.session;
 
   const closedNavCategoriesAtom = useMemo(() => makeClosedNavCategoriesAtom(userId), [userId]);
 
diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx
index ce952bfc..0df6f9f0 100644
--- a/src/app/pages/client/ClientNonUIFeatures.tsx
+++ b/src/app/pages/client/ClientNonUIFeatures.tsx
@@ -1,31 +1,6 @@
-import { useAtomValue } from 'jotai';
-import React, { ReactNode, useCallback, useEffect, useRef } from 'react';
-import { useNavigate } from 'react-router-dom';
-import { RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
-import { roomToUnreadAtom, unreadEqual, unreadInfoToUnread } from '../../state/room/roomToUnread';
-import LogoSVG from '../../../../public/res/svg/cinny.svg';
-import LogoUnreadSVG from '../../../../public/res/svg/cinny-unread.svg';
-import LogoHighlightSVG from '../../../../public/res/svg/cinny-highlight.svg';
-import NotificationSound from '../../../../public/sound/notification.ogg';
-import InviteSound from '../../../../public/sound/invite.ogg';
-import { notificationPermission, setFavicon } from '../../utils/dom';
+import React from 'react';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import { allInvitesAtom } from '../../state/room-list/inviteList';
-import { usePreviousValue } from '../../hooks/usePreviousValue';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { getInboxInvitesPath, getInboxNotificationsPath } from '../pathUtils';
-import {
-  getMemberDisplayName,
-  getNotificationType,
-  getUnreadInfo,
-  isNotificationEvent,
-} from '../../utils/room';
-import { NotificationType, UnreadInfo } from '../../../types/matrix/room';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
-import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
-import { useInboxNotificationsSelected } from '../../hooks/router/useInbox';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 function SystemEmojiFeature() {
   const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
@@ -51,221 +26,11 @@ function PageZoomFeature() {
   return null;
 }
 
-function FaviconUpdater() {
-  const roomToUnread = useAtomValue(roomToUnreadAtom);
-
-  useEffect(() => {
-    let notification = false;
-    let highlight = false;
-    roomToUnread.forEach((unread) => {
-      if (unread.total > 0) {
-        notification = true;
-      }
-      if (unread.highlight > 0) {
-        highlight = true;
-      }
-    });
-
-    if (notification) {
-      setFavicon(highlight ? LogoHighlightSVG : LogoUnreadSVG);
-    } else {
-      setFavicon(LogoSVG);
-    }
-  }, [roomToUnread]);
-
-  return null;
-}
-
-function InviteNotifications() {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const invites = useAtomValue(allInvitesAtom);
-  const perviousInviteLen = usePreviousValue(invites.length, 0);
-  const mx = useMatrixClient();
-
-  const navigate = useNavigate();
-  const [showNotifications] = useSetting(settingsAtom, 'showNotifications');
-  const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds');
-
-  const notify = useCallback(
-    (count: number) => {
-      const noti = new window.Notification('Invitation', {
-        icon: LogoSVG,
-        badge: LogoSVG,
-        body: `You have ${count} new invitation request.`,
-        silent: true,
-      });
-
-      noti.onclick = () => {
-        if (!window.closed) navigate(getInboxInvitesPath());
-        noti.close();
-      };
-    },
-    [navigate]
-  );
-
-  const playSound = useCallback(() => {
-    const audioElement = audioRef.current;
-    audioElement?.play();
-  }, []);
-
-  useEffect(() => {
-    if (invites.length > perviousInviteLen && mx.getSyncState() === 'SYNCING') {
-      if (showNotifications && notificationPermission('granted')) {
-        notify(invites.length - perviousInviteLen);
-      }
-
-      if (notificationSound) {
-        playSound();
-      }
-    }
-  }, [mx, invites, perviousInviteLen, showNotifications, notificationSound, notify, playSound]);
-
-  return (
-    // eslint-disable-next-line jsx-a11y/media-has-caption
-    <audio ref={audioRef} style={{ display: 'none' }}>
-      <source src={InviteSound} type="audio/ogg" />
-    </audio>
-  );
-}
-
-function MessageNotifications() {
-  const audioRef = useRef<HTMLAudioElement>(null);
-  const notifRef = useRef<Notification>();
-  const unreadCacheRef = useRef<Map<string, UnreadInfo>>(new Map());
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
-  const [showNotifications] = useSetting(settingsAtom, 'showNotifications');
-  const [notificationSound] = useSetting(settingsAtom, 'isNotificationSounds');
-
-  const navigate = useNavigate();
-  const notificationSelected = useInboxNotificationsSelected();
-  const selectedRoomId = useSelectedRoom();
-
-  const notify = useCallback(
-    ({
-      roomName,
-      roomAvatar,
-      username,
-    }: {
-      roomName: string;
-      roomAvatar?: string;
-      username: string;
-      roomId: string;
-      eventId: string;
-    }) => {
-      const noti = new window.Notification(roomName, {
-        icon: roomAvatar,
-        badge: roomAvatar,
-        body: `New inbox notification from ${username}`,
-        silent: true,
-      });
-
-      noti.onclick = () => {
-        if (!window.closed) navigate(getInboxNotificationsPath());
-        noti.close();
-        notifRef.current = undefined;
-      };
-
-      notifRef.current?.close();
-      notifRef.current = noti;
-    },
-    [navigate]
-  );
-
-  const playSound = useCallback(() => {
-    const audioElement = audioRef.current;
-    audioElement?.play();
-  }, []);
-
-  useEffect(() => {
-    const handleTimelineEvent: RoomEventHandlerMap[RoomEvent.Timeline] = (
-      mEvent,
-      room,
-      toStartOfTimeline,
-      removed,
-      data
-    ) => {
-      if (mx.getSyncState() !== 'SYNCING') return;
-      if (document.hasFocus() && (selectedRoomId === room?.roomId || notificationSelected)) return;
-      if (
-        !room ||
-        !data.liveEvent ||
-        room.isSpaceRoom() ||
-        !isNotificationEvent(mEvent) ||
-        getNotificationType(mx, room.roomId) === NotificationType.Mute
-      ) {
-        return;
-      }
-
-      const sender = mEvent.getSender();
-      const eventId = mEvent.getId();
-      if (!sender || !eventId || mEvent.getSender() === mx.getUserId()) return;
-      const unreadInfo = getUnreadInfo(room);
-      const cachedUnreadInfo = unreadCacheRef.current.get(room.roomId);
-      unreadCacheRef.current.set(room.roomId, unreadInfo);
-
-      if (unreadInfo.total === 0) return;
-      if (
-        cachedUnreadInfo &&
-        unreadEqual(unreadInfoToUnread(cachedUnreadInfo), unreadInfoToUnread(unreadInfo))
-      ) {
-        return;
-      }
-
-      if (showNotifications && notificationPermission('granted')) {
-        const avatarMxc =
-          room.getAvatarFallbackMember()?.getMxcAvatarUrl() ?? room.getMxcAvatarUrl();
-        notify({
-          roomName: room.name ?? 'Unknown',
-          roomAvatar: avatarMxc
-            ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
-            : undefined,
-          username: getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender,
-          roomId: room.roomId,
-          eventId,
-        });
-      }
-
-      if (notificationSound) {
-        playSound();
-      }
-    };
-    mx.on(RoomEvent.Timeline, handleTimelineEvent);
-    return () => {
-      mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
-    };
-  }, [
-    mx,
-    notificationSound,
-    notificationSelected,
-    showNotifications,
-    playSound,
-    notify,
-    selectedRoomId,
-    useAuthentication,
-  ]);
-
-  return (
-    // eslint-disable-next-line jsx-a11y/media-has-caption
-    <audio ref={audioRef} style={{ display: 'none' }}>
-      <source src={NotificationSound} type="audio/ogg" />
-    </audio>
-  );
-}
-
-type ClientNonUIFeaturesProps = {
-  children: ReactNode;
-};
-
-export function ClientNonUIFeatures({ children }: ClientNonUIFeaturesProps) {
+export function ClientNonUIFeatures() {
   return (
     <>
       <SystemEmojiFeature />
       <PageZoomFeature />
-      <FaviconUpdater />
-      <InviteNotifications />
-      <MessageNotifications />
-      {children}
     </>
   );
 }
diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index e1a5dc0c..1769187d 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -1,203 +1,57 @@
-import {
-  Box,
-  Button,
-  config,
-  Dialog,
-  Icon,
-  IconButton,
-  Icons,
-  Menu,
-  MenuItem,
-  PopOut,
-  RectCords,
-  Spinner,
-  Text,
-} from 'folds';
-import { HttpApiEvent, HttpApiEventHandlerMap, MatrixClient } from 'matrix-js-sdk';
-import FocusTrap from 'focus-trap-react';
-import React, { MouseEventHandler, ReactNode, useCallback, useEffect, useState } from 'react';
-import {
-  clearCacheAndReload,
-  clearLoginData,
-  initClient,
-  logoutClient,
-  startClient,
-} from '../../../client/initMatrix';
+import { Box, Button, config, Dialog, ProgressBar, Text, toRem } from 'folds';
+import React, { ReactNode, useCallback, useEffect } from 'react';
 import { SplashScreen } from '../../components/splash-screen';
 import { ServerConfigsLoader } from '../../components/ServerConfigsLoader';
 import { CapabilitiesProvider } from '../../hooks/useCapabilities';
 import { MediaConfigProvider } from '../../hooks/useMediaConfig';
-import { MatrixClientProvider } from '../../hooks/useMatrixClient';
 import { SpecVersions } from './SpecVersions';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { useSyncState } from '../../hooks/useSyncState';
-import { stopPropagation } from '../../utils/keyboard';
 import { SyncStatus } from './SyncStatus';
 import { AuthMetadataProvider } from '../../hooks/useAuthMetadata';
 import { getFallbackSession } from '../../state/sessions';
-
-function ClientRootLoading() {
-  return (
-    <SplashScreen>
-      <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
-        <Spinner variant="Secondary" size="600" />
-        <Text>Heating up</Text>
-      </Box>
-    </SplashScreen>
-  );
-}
-
-function ClientRootOptions({ mx }: { mx?: MatrixClient }) {
-  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
-
-  const handleToggle: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    const cords = evt.currentTarget.getBoundingClientRect();
-    setMenuAnchor((currentState) => {
-      if (currentState) return undefined;
-      return cords;
-    });
-  };
-
-  return (
-    <IconButton
-      style={{
-        position: 'absolute',
-        top: config.space.S100,
-        right: config.space.S100,
-      }}
-      variant="Background"
-      fill="None"
-      onClick={handleToggle}
-    >
-      <Icon size="200" src={Icons.VerticalDots} />
-      <PopOut
-        anchor={menuAnchor}
-        position="Bottom"
-        align="End"
-        offset={6}
-        content={
-          <FocusTrap
-            focusTrapOptions={{
-              initialFocus: false,
-              returnFocusOnDeactivate: false,
-              onDeactivate: () => setMenuAnchor(undefined),
-              clickOutsideDeactivates: true,
-              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-              escapeDeactivates: stopPropagation,
-            }}
-          >
-            <Menu>
-              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-                {mx && (
-                  <MenuItem onClick={() => clearCacheAndReload(mx)} size="300" radii="300">
-                    <Text as="span" size="T300" truncate>
-                      Clear Cache and Reload
-                    </Text>
-                  </MenuItem>
-                )}
-                <MenuItem
-                  onClick={() => {
-                    if (mx) {
-                      logoutClient(mx);
-                      return;
-                    }
-                    clearLoginData();
-                  }}
-                  size="300"
-                  radii="300"
-                  variant="Critical"
-                  fill="None"
-                >
-                  <Text as="span" size="T300" truncate>
-                    Logout
-                  </Text>
-                </MenuItem>
-              </Box>
-            </Menu>
-          </FocusTrap>
-        }
-      />
-    </IconButton>
-  );
-}
-
-const useLogoutListener = (mx?: MatrixClient) => {
-  useEffect(() => {
-    const handleLogout: HttpApiEventHandlerMap[HttpApiEvent.SessionLoggedOut] = async () => {
-      mx?.stopClient();
-      await mx?.clearStores();
-      window.localStorage.clear();
-      window.location.reload();
-    };
-
-    mx?.on(HttpApiEvent.SessionLoggedOut, handleLogout);
-    return () => {
-      mx?.removeListener(HttpApiEvent.SessionLoggedOut, handleLogout);
-    };
-  }, [mx]);
-};
+import { initializeClient } from '../../../client/initialize';
+import { ClientContext } from '../../../client/context';
+import { ClientContextProvider } from '../../hooks/useClient';
+import { InitialSyncSplashScreen } from './InitialSyncSplashScreen';
 
 type ClientRootProps = {
   children: ReactNode;
 };
 export function ClientRoot({ children }: ClientRootProps) {
-  const [loading, setLoading] = useState(true);
   const { baseUrl } = getFallbackSession() ?? {};
 
-  const [loadState, loadMatrix] = useAsyncCallback<MatrixClient, Error, []>(
+  const [initState, initialize] = useAsyncCallback<ClientContext, Error, []>(
     useCallback(() => {
       const session = getFallbackSession();
       if (!session) {
         throw new Error('No session Found!');
       }
-      return initClient(session);
+      return initializeClient(session);
     }, [])
   );
-  const mx = loadState.status === AsyncStatus.Success ? loadState.data : undefined;
-  const [startState, startMatrix] = useAsyncCallback<void, Error, [MatrixClient]>(
-    useCallback((m) => startClient(m), [])
-  );
-
-  useLogoutListener(mx);
 
   useEffect(() => {
-    if (loadState.status === AsyncStatus.Idle) {
-      loadMatrix();
+    if (initState.status === AsyncStatus.Idle) {
+      initialize();
     }
-  }, [loadState, loadMatrix]);
+  }, [initState, initialize]);
 
   useEffect(() => {
-    if (mx && !mx.clientRunning) {
-      startMatrix(mx);
+    if (initState.status === AsyncStatus.Success) {
+      const ct = initState.data;
+      ct.sync.controller.start();
     }
-  }, [mx, startMatrix]);
-
-  useSyncState(
-    mx,
-    useCallback((state) => {
-      if (state === 'PREPARED') {
-        setLoading(false);
-      }
-    }, [])
-  );
+  }, [initState]);
 
   return (
     <SpecVersions baseUrl={baseUrl!}>
-      {mx && <SyncStatus mx={mx} />}
-      {loading && <ClientRootOptions mx={mx} />}
-      {(loadState.status === AsyncStatus.Error || startState.status === AsyncStatus.Error) && (
+      {initState.status === AsyncStatus.Error && (
         <SplashScreen>
           <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
             <Dialog>
               <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
-                {loadState.status === AsyncStatus.Error && (
-                  <Text>{`Failed to load. ${loadState.error.message}`}</Text>
-                )}
-                {startState.status === AsyncStatus.Error && (
-                  <Text>{`Failed to start. ${startState.error.message}`}</Text>
-                )}
-                <Button variant="Critical" onClick={mx ? () => startMatrix(mx) : loadMatrix}>
+                <Text>{`Failed to load. ${initState.error.message}`}</Text>
+                <Button variant="Critical" onClick={initialize}>
                   <Text as="span" size="B400">
                     Retry
                   </Text>
@@ -207,22 +61,48 @@ export function ClientRoot({ children }: ClientRootProps) {
           </Box>
         </SplashScreen>
       )}
-      {loading || !mx ? (
-        <ClientRootLoading />
-      ) : (
-        <MatrixClientProvider value={mx}>
-          <ServerConfigsLoader>
-            {(serverConfigs) => (
-              <CapabilitiesProvider value={serverConfigs.capabilities ?? {}}>
-                <MediaConfigProvider value={serverConfigs.mediaConfig ?? {}}>
-                  <AuthMetadataProvider value={serverConfigs.authMetadata}>
-                    {children}
-                  </AuthMetadataProvider>
-                </MediaConfigProvider>
-              </CapabilitiesProvider>
-            )}
-          </ServerConfigsLoader>
-        </MatrixClientProvider>
+      {(initState.status === AsyncStatus.Idle || initState.status === AsyncStatus.Loading) && (
+        <SplashScreen
+          footer={
+            <Box
+              style={{ maxWidth: toRem(280) }}
+              direction="Column"
+              grow="Yes"
+              alignItems="Center"
+              gap="200"
+            >
+              <Text size="T200" align="Center">
+                Initializing...
+              </Text>
+              <ProgressBar
+                style={{ width: '100%' }}
+                variant="Secondary"
+                size="300"
+                radii="Pill"
+                value={0}
+                outlined
+              />
+            </Box>
+          }
+        />
+      )}
+      {initState.status === AsyncStatus.Success && (
+        <ClientContextProvider value={initState.data}>
+          <InitialSyncSplashScreen sync={initState.data.sync}>
+            <SyncStatus />
+            <ServerConfigsLoader>
+              {(serverConfigs) => (
+                <CapabilitiesProvider value={serverConfigs.capabilities ?? {}}>
+                  <MediaConfigProvider value={serverConfigs.mediaConfig ?? {}}>
+                    <AuthMetadataProvider value={serverConfigs.authMetadata}>
+                      {children}
+                    </AuthMetadataProvider>
+                  </MediaConfigProvider>
+                </CapabilitiesProvider>
+              )}
+            </ServerConfigsLoader>
+          </InitialSyncSplashScreen>
+        </ClientContextProvider>
       )}
     </SpecVersions>
   );
diff --git a/src/app/pages/client/InitialSyncSplashScreen.tsx b/src/app/pages/client/InitialSyncSplashScreen.tsx
new file mode 100644
index 00000000..cfcb4f7a
--- /dev/null
+++ b/src/app/pages/client/InitialSyncSplashScreen.tsx
@@ -0,0 +1,129 @@
+import { Box, Button, color, config, Dialog, ProgressBar, Text, toRem } from 'folds';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { printMatrixError } from 'neurone/lib/matrix-request';
+import React, { ReactNode, useMemo } from 'react';
+import { SplashScreen } from '../../components/splash-screen';
+import { useObservableValue } from '../../hooks/useObservableValue';
+import { createFakeProgress } from '../../../client/responseProgress';
+import { bytesToSize } from '../../utils/common';
+import { SyncContext, SyncProgress } from '../../../client/sync';
+
+function InitialSyncProgressScreen({
+  sync,
+  progressObservable,
+}: {
+  sync: SyncContext;
+  progressObservable: ObservableValue<SyncProgress | undefined>;
+}) {
+  const progress = useObservableValue(progressObservable);
+  const getFakeProgress = useMemo(() => createFakeProgress(), []);
+
+  const syncValue = useObservableValue(sync.observable);
+  const [syncError] = syncValue ?? [];
+
+  let progressContent: ReactNode;
+
+  if (!progress) {
+    progressContent = (
+      <>
+        <Text size="T200" align="Center">
+          Preparing to download your conversations...
+        </Text>
+        <ProgressBar
+          style={{ width: '100%' }}
+          variant="Secondary"
+          size="300"
+          radii="Pill"
+          value={0}
+          outlined
+        />
+      </>
+    );
+  } else if (typeof progress.total === 'number' && progress.total === progress.received) {
+    progressContent = (
+      <>
+        <Text size="T200" align="Center">
+          Download complete. Saving conversations...
+        </Text>
+        <ProgressBar
+          style={{ width: '100%' }}
+          variant="Success"
+          size="300"
+          radii="Pill"
+          value={0}
+          outlined
+        />
+      </>
+    );
+  } else {
+    progressContent = (
+      <>
+        <Text size="T200" align="Center">
+          Downloading conversations ({bytesToSize(progress.received)})
+        </Text>
+        <ProgressBar
+          style={{ width: '100%' }}
+          variant="Secondary"
+          size="300"
+          radii="Pill"
+          value={
+            progress.total === undefined ? getFakeProgress(progress.received) : progress.received
+          }
+          max={progress.total ?? 1}
+          outlined
+        />
+      </>
+    );
+  }
+
+  return (
+    <SplashScreen
+      footer={
+        !syncError && (
+          <Box
+            style={{ maxWidth: toRem(280) }}
+            direction="Column"
+            grow="Yes"
+            alignItems="Center"
+            gap="200"
+          >
+            {progressContent}
+          </Box>
+        )
+      }
+    >
+      {syncError && (
+        <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
+          <Dialog>
+            <Box direction="Column" gap="400" style={{ padding: config.space.S400 }}>
+              <Text style={{ color: color.Critical.Main }}>
+                {syncError instanceof Error ? syncError.message : printMatrixError(syncError)}
+              </Text>
+              <Button variant="Critical" onClick={() => sync.controller.recover()}>
+                <Text as="span" size="B400">
+                  Retry
+                </Text>
+              </Button>
+            </Box>
+          </Dialog>
+        </Box>
+      )}
+    </SplashScreen>
+  );
+}
+
+export function InitialSyncSplashScreen({
+  sync,
+  children,
+}: {
+  sync: SyncContext;
+  children: ReactNode;
+}) {
+  const initialSync = useObservableValue(sync.controller.initialSync);
+
+  if (initialSync) {
+    return <InitialSyncProgressScreen sync={sync} progressObservable={initialSync.progress} />;
+  }
+
+  return children;
+}
diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx
index a2e1b682..b275f6f3 100644
--- a/src/app/pages/client/SidebarNav.tsx
+++ b/src/app/pages/client/SidebarNav.tsx
@@ -44,7 +44,7 @@ export function SidebarNav() {
             <SidebarStackSeparator />
             <SidebarStack>
               <SearchTab />
-              <UnverifiedTab />
+              {/* <UnverifiedTab /> */}
               <InboxTab />
               <SettingsTab />
             </SidebarStack>
diff --git a/src/app/pages/client/SpecVersions.tsx b/src/app/pages/client/SpecVersions.tsx
index 952885cd..1397ac98 100644
--- a/src/app/pages/client/SpecVersions.tsx
+++ b/src/app/pages/client/SpecVersions.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Box, Dialog, config, Text, Button, Spinner } from 'folds';
+import { Box, Dialog, config, Text, Button } from 'folds';
 import { SpecVersionsLoader } from '../../components/SpecVersionsLoader';
 import { SpecVersionsProvider } from '../../hooks/useSpecVersions';
 import { SplashScreen } from '../../components/splash-screen';
@@ -8,14 +8,7 @@ export function SpecVersions({ baseUrl, children }: { baseUrl: string; children:
   return (
     <SpecVersionsLoader
       baseUrl={baseUrl}
-      fallback={() => (
-        <SplashScreen>
-          <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
-            <Spinner variant="Secondary" size="600" />
-            <Text>Connecting to server</Text>
-          </Box>
-        </SplashScreen>
-      )}
+      fallback={() => <SplashScreen footer={<Text>Looking for server...</Text>} />}
       error={(err, retry, ignore) => (
         <SplashScreen>
           <Box direction="Column" grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
diff --git a/src/app/pages/client/SyncStatus.tsx b/src/app/pages/client/SyncStatus.tsx
index 9cd4b0b2..048da428 100644
--- a/src/app/pages/client/SyncStatus.tsx
+++ b/src/app/pages/client/SyncStatus.tsx
@@ -1,85 +1,130 @@
-import { MatrixClient, SyncState } from 'matrix-js-sdk';
-import React, { useCallback, useState } from 'react';
-import { Box, config, Line, Text } from 'folds';
-import { useSyncState } from '../../hooks/useSyncState';
+import React, { ReactNode, useCallback, useEffect, useState } from 'react';
+import { Box, config, ContainerColor as ContainerColorType, Line, Text } from 'folds';
 import { ContainerColor } from '../../styles/ContainerColor.css';
+import { SyncValue } from '../../../client/sync';
+import { useClient } from '../../hooks/useClient';
+import { getAttemptDelaySec, useRecoveryAttempt } from '../../hooks/useRecoveryAttempt';
+import { useSecondsCountdown } from '../../hooks/useSecondsCountdown';
+import { useNetworkOnlineCallback } from '../../hooks/useNetwork';
 
+type StatusBarProps = {
+  variant: ContainerColorType;
+  children: ReactNode;
+};
+function StatusBar({ variant, children }: StatusBarProps) {
+  return (
+    <Box direction="Column" shrink="No">
+      <Box className={ContainerColor({ variant })} style={{ padding: `${config.space.S100} 0` }}>
+        {children}
+      </Box>
+      <Line variant={variant} size="300" />
+    </Box>
+  );
+}
+
+function RecoverCountdownMessage({
+  afterSeconds,
+  onEnd,
+}: {
+  afterSeconds: number;
+  onEnd: () => void;
+}) {
+  const countdownSec = useSecondsCountdown(afterSeconds, onEnd);
+
+  return <span>Reconnecting after {countdownSec} seconds...</span>;
+}
+
+// undefined | OK        | undefined | Error     | undefined | OK        | undefined | OK
+// undefined | undefined | OK        | undefined | Error     | undefined | OK        | undefined
 type StateData = {
-  current: SyncState | null;
-  previous: SyncState | null | undefined;
+  current: SyncValue;
+  previous: SyncValue;
 };
 
-type SyncStatusProps = {
-  mx: MatrixClient;
-};
-export function SyncStatus({ mx }: SyncStatusProps) {
+export function SyncStatus() {
+  const ct = useClient();
+
   const [stateData, setStateData] = useState<StateData>({
-    current: null,
+    current: ct.sync.observable.read,
     previous: undefined,
   });
 
-  useSyncState(
-    mx,
-    useCallback((current, previous) => {
-      setStateData((s) => {
-        if (s.current === current && s.previous === previous) {
-          return s;
-        }
-        return { current, previous };
-      });
-    }, [])
-  );
+  useEffect(() => {
+    const unsubscribe = ct.sync.observable.subscribe((syncValue) => {
+      setStateData((data) => ({
+        current: syncValue,
+        previous: data.current,
+      }));
+    });
 
-  if (
-    (stateData.current === SyncState.Prepared ||
-      stateData.current === SyncState.Syncing ||
-      stateData.current === SyncState.Catchup) &&
-    stateData.previous !== SyncState.Syncing
-  ) {
+    return () => {
+      unsubscribe();
+    };
+  }, [ct]);
+
+  const [previousError] = stateData.previous ?? [];
+  const [currentError, currentResult] = stateData.current ?? [];
+  if (currentError) {
+    console.error(currentError);
+  }
+
+  const connecting = stateData.previous === undefined && stateData.current === undefined;
+  const recovering = previousError && stateData.current === undefined;
+
+  const recoverAttempt = useRecoveryAttempt(!!currentError, !!currentResult);
+
+  const handleRecover = useCallback(() => ct.sync.controller.recover(), [ct]);
+
+  useNetworkOnlineCallback(handleRecover);
+
+  if (connecting) {
     return (
-      <Box direction="Column" shrink="No">
-        <Box
-          className={ContainerColor({ variant: 'Success' })}
-          style={{ padding: `${config.space.S100} 0` }}
-          alignItems="Center"
-          justifyContent="Center"
-        >
-          <Text size="L400">Connecting...</Text>
+      <StatusBar variant="Success">
+        <Box grow="Yes" alignItems="Center" justifyContent="Center">
+          <Text size="T200">
+            <b>Connecting...</b>
+          </Text>
         </Box>
-        <Line variant="Success" size="300" />
-      </Box>
+      </StatusBar>
     );
   }
 
-  if (stateData.current === SyncState.Reconnecting) {
+  if (recovering) {
     return (
-      <Box direction="Column" shrink="No">
-        <Box
-          className={ContainerColor({ variant: 'Warning' })}
-          style={{ padding: `${config.space.S100} 0` }}
-          alignItems="Center"
-          justifyContent="Center"
-        >
-          <Text size="L400">Connection Lost! Reconnecting...</Text>
+      <StatusBar variant="Warning">
+        <Box grow="Yes" alignItems="Center" justifyContent="Center">
+          <Text size="T200">
+            <b>Connection Lost! Reconnecting...</b>
+          </Text>
         </Box>
-        <Line variant="Warning" size="300" />
-      </Box>
+      </StatusBar>
     );
   }
 
-  if (stateData.current === SyncState.Error) {
+  if (currentError) {
     return (
-      <Box direction="Column" shrink="No">
-        <Box
-          className={ContainerColor({ variant: 'Critical' })}
-          style={{ padding: `${config.space.S100} 0` }}
-          alignItems="Center"
-          justifyContent="Center"
-        >
-          <Text size="L400">Connection Lost!</Text>
+      <StatusBar variant="Critical">
+        <Box grow="Yes" alignItems="Center" justifyContent="Center" gap="400">
+          <Text size="T200">
+            Connection Lost!{' '}
+            <RecoverCountdownMessage
+              afterSeconds={getAttemptDelaySec(recoverAttempt)}
+              onEnd={handleRecover}
+            />
+          </Text>
+          <Box
+            style={{ cursor: 'pointer' }}
+            as="button"
+            type="button"
+            gap="100"
+            onClick={() => handleRecover()}
+          >
+            <Text as="a" size="B300">
+              Retry
+            </Text>
+          </Box>
         </Box>
-        <Line variant="Critical" size="300" />
-      </Box>
+      </StatusBar>
     );
   }
 
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 04edf109..498faa7f 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -19,7 +19,7 @@ import { useVirtualizer } from '@tanstack/react-virtual';
 import FocusTrap from 'focus-trap-react';
 import { useNavigate } from 'react-router-dom';
 import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { factoryRoomIdByActivity } from '../../../utils/sort';
+import { factoryRoomIdByActivity, factoryRoomIdByAtoZ } from '../../../utils/sort';
 import {
   NavButton,
   NavCategory,
@@ -30,18 +30,15 @@ import {
   NavItemContent,
 } from '../../../components/nav';
 import { getDirectCreatePath, getDirectRoomPath } from '../../pathUtils';
-import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { VirtualTile } from '../../../components/virtualizer';
 import { RoomNavCategoryButton, RoomNavItem } from '../../../features/room-nav';
 import { makeNavCategoryId } from '../../../state/closedNavCategories';
-import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
 import { useDirectRooms } from './useDirectRooms';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
-import { useRoomsUnread } from '../../../state/hooks/unread';
 import { markAsRead } from '../../../utils/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
@@ -51,19 +48,30 @@ import {
   useRoomsNotificationPreferencesContext,
 } from '../../../hooks/useRoomsNotificationPreferences';
 import { useDirectCreateSelected } from '../../../hooks/router/useDirectSelected';
+import { roomToNotificationsAtom } from '../../../state/room/roomToNotifications';
+import {
+  getRoomTotalNotifications,
+  useRoomsNotifications,
+  useRoomsTotalNotifications,
+} from '../../../state/hooks/roomNotifications';
+import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
+import { useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
+import { useObservableValue } from '../../../hooks/useObservableValue';
+import { useClient } from '../../../hooks/useClient';
 
 type DirectMenuProps = {
   requestClose: () => void;
 };
 const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
-  const mx = useMatrixClient();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const orphanRooms = useDirectRooms();
-  const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
+  const directRooms = useDirectRooms();
+  const roomsNotifications = useRoomsNotifications(directRooms, roomToNotificationsAtom);
+  const notifications = useRoomsTotalNotifications(roomsNotifications);
 
   const handleMarkAsRead = () => {
-    if (!unread) return;
-    orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
+    // if (!unread) return;
+    // directRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
     requestClose();
   };
 
@@ -75,7 +83,7 @@ const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }
           size="300"
           after={<Icon size="100" src={Icons.CheckTwice} />}
           radii="300"
-          aria-disabled={!unread}
+          aria-disabled={!notifications || notifications.count === 0}
         >
           <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
             Mark as Read
@@ -169,12 +177,18 @@ function DirectEmpty() {
 
 const DEFAULT_CATEGORY_ID = makeNavCategoryId('direct', 'direct');
 export function Direct() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   useNavToActivePathMapper('direct');
   const scrollRef = useRef<HTMLDivElement>(null);
   const directs = useDirectRooms();
+
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(directs);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
+  const roomToNotifications = useRoomsNotifications(directs, roomToNotificationsAtom);
+
   const notificationPreferences = useRoomsNotificationPreferencesContext();
-  const roomToUnread = useAtomValue(roomToUnreadAtom);
   const navigate = useNavigate();
 
   const createDirectSelected = useDirectCreateSelected();
@@ -184,12 +198,20 @@ export function Direct() {
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
   const sortedDirects = useMemo(() => {
-    const items = Array.from(directs).sort(factoryRoomIdByActivity(mx));
+    // TODO: sort by activity
     if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
-      return items.filter((rId) => roomToUnread.has(rId) || rId === selectedRoomId);
+      return directs
+        .filter((roomId) => {
+          if (roomId === selectedRoomId) return true;
+          const notification = roomToNotifications.get(roomId);
+          if (!notification) return false;
+          const total = getRoomTotalNotifications(notification);
+          return total.count > 0;
+        })
+        .sort(factoryRoomIdByAtoZ(getRoomName));
     }
-    return items;
-  }, [mx, directs, closedCategories, roomToUnread, selectedRoomId]);
+    return Array.from(directs).sort(factoryRoomIdByAtoZ(getRoomName));
+  }, [directs, closedCategories, roomToNotifications, selectedRoomId, getRoomName]);
 
   const virtualizer = useVirtualizer({
     count: sortedDirects.length,
@@ -246,9 +268,9 @@ export function Direct() {
               >
                 {virtualizer.getVirtualItems().map((vItem) => {
                   const roomId = sortedDirects[vItem.index];
-                  const room = mx.getRoom(roomId);
-                  if (!room) return null;
                   const selected = selectedRoomId === roomId;
+                  const n = roomToNotifications.get(roomId);
+                  const notifications = n && getRoomTotalNotifications(n);
 
                   return (
                     <VirtualTile
@@ -257,15 +279,15 @@ export function Direct() {
                       ref={virtualizer.measureElement}
                     >
                       <RoomNavItem
-                        room={room}
+                        roomId={roomId}
+                        roomName={getRoomName(roomId) ?? 'Unknown'}
+                        avatarUrl={getRoomAvatar(roomId)}
                         selected={selected}
                         showAvatar
-                        direct
-                        linkPath={getDirectRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
-                        notificationMode={getRoomNotificationMode(
-                          notificationPreferences,
-                          room.roomId
-                        )}
+                        joinRule={roomToJoinRule.get(roomId)}
+                        linkPath={getDirectRoomPath(ct.roomToAlias.read.get(roomId) ?? roomId)}
+                        notificationMode={getRoomNotificationMode(notificationPreferences, roomId)}
+                        notifications={notifications}
                       />
                     </VirtualTile>
                   );
diff --git a/src/app/pages/client/direct/DirectCreate.tsx b/src/app/pages/client/direct/DirectCreate.tsx
index 3deb0b6d..5ee4d4df 100644
--- a/src/app/pages/client/direct/DirectCreate.tsx
+++ b/src/app/pages/client/direct/DirectCreate.tsx
@@ -1,11 +1,9 @@
 import React, { useEffect } from 'react';
 import { useNavigate, useSearchParams } from 'react-router-dom';
 import { Box, Icon, IconButton, Icons, Scroll } from 'folds';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { getDirectCreateSearchParams } from '../../pathSearchParam';
 import { getDirectRoomPath } from '../../pathUtils';
-import { getDMRoomFor } from '../../../utils/matrix';
-import { useDirectRooms } from './useDirectRooms';
+import { getUserDirectRooms } from '../../../utils/matrix';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import {
   Page,
@@ -17,25 +15,25 @@ import {
 } from '../../../components/page';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { CreateChat } from '../../../features/create-chat';
+import { useClient } from '../../../hooks/useClient';
 
 export function DirectCreate() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const screenSize = useScreenSizeContext();
 
   const navigate = useNavigate();
   const [searchParams] = useSearchParams();
   const { userId } = getDirectCreateSearchParams(searchParams);
 
-  const directs = useDirectRooms();
-
   useEffect(() => {
     if (userId) {
-      const roomId = getDMRoomFor(mx, userId)?.roomId;
-      if (roomId && directs.includes(roomId)) {
+      const directRooms = getUserDirectRooms(ct, userId);
+      if (directRooms.length > 0) {
+        const roomId = directRooms[0];
         navigate(getDirectRoomPath(roomId), { replace: true });
       }
     }
-  }, [mx, navigate, directs, userId]);
+  }, [ct, navigate, userId]);
 
   return (
     <Page>
diff --git a/src/app/pages/client/direct/RoomProvider.tsx b/src/app/pages/client/direct/RoomProvider.tsx
index 7c26ec54..f839838c 100644
--- a/src/app/pages/client/direct/RoomProvider.tsx
+++ b/src/app/pages/client/direct/RoomProvider.tsx
@@ -2,24 +2,21 @@ import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useDirectRooms } from './useDirectRooms';
 
 export function DirectRouteRoomProvider({ children }: { children: ReactNode }) {
-  const mx = useMatrixClient();
   const rooms = useDirectRooms();
 
   const { roomIdOrAlias, eventId } = useParams();
   const roomId = useSelectedRoom();
-  const room = mx.getRoom(roomId);
 
-  if (!room || !rooms.includes(room.roomId)) {
+  if (!roomId || !rooms.includes(roomId)) {
     return <JoinBeforeNavigate roomIdOrAlias={roomIdOrAlias!} eventId={eventId} />;
   }
 
   return (
-    <RoomProvider key={room.roomId} value={room}>
+    <RoomProvider key={roomId} value={roomId}>
       <IsDirectRoomProvider value>{children}</IsDirectRoomProvider>
     </RoomProvider>
   );
diff --git a/src/app/pages/client/direct/useDirectRooms.ts b/src/app/pages/client/direct/useDirectRooms.ts
index 00009927..abe8eb07 100644
--- a/src/app/pages/client/direct/useDirectRooms.ts
+++ b/src/app/pages/client/direct/useDirectRooms.ts
@@ -1,12 +1,12 @@
 import { useAtomValue } from 'jotai';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mDirectAtom } from '../../../state/mDirectList';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { useDirects } from '../../../state/hooks/roomList';
+import { useClient } from '../../../hooks/useClient';
 
 export const useDirectRooms = () => {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const mDirects = useAtomValue(mDirectAtom);
-  const directs = useDirects(mx, allRoomsAtom, mDirects);
+  const directs = useDirects(ct, allRoomsAtom, mDirects);
   return directs;
 };
diff --git a/src/app/pages/client/explore/Explore.tsx b/src/app/pages/client/explore/Explore.tsx
index dae83166..fb9b71c1 100644
--- a/src/app/pages/client/explore/Explore.tsx
+++ b/src/app/pages/client/explore/Explore.tsx
@@ -18,6 +18,8 @@ import {
   color,
   config,
 } from 'folds';
+import { getPublicRooms } from 'neurone/lib/api/matrix/client/v3/publicRooms';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import {
   NavCategory,
   NavCategoryHeader,
@@ -31,21 +33,38 @@ import {
   useExploreFeaturedSelected,
   useExploreServer,
 } from '../../../hooks/router/useExploreSelected';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { getMxIdServer } from '../../../utils/matrix';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
 import { stopPropagation } from '../../../utils/keyboard';
+import { useClient } from '../../../hooks/useClient';
 
 export function AddServer() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const navigate = useNavigate();
   const [dialog, setDialog] = useState(false);
   const serverInputRef = useRef<HTMLInputElement>(null);
 
   const [exploreState] = useAsyncCallback(
-    useCallback((server: string) => mx.publicRooms({ server, limit: 1 }), [mx])
+    useCallback(
+      async (server: string) => {
+        const response = await ct.requestAuthJSON(
+          getPublicRooms({
+            searchParams: {
+              server,
+              limit: 1,
+            },
+          })
+        );
+        const [err, result] = await parseMatrixResp(response);
+        if (err) {
+          throw new Error(printMatrixError(err));
+        }
+        return result;
+      },
+      [ct]
+    )
   );
 
   const getInputServer = (): string | undefined => {
@@ -156,9 +175,9 @@ export function AddServer() {
 }
 
 export function Explore() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   useNavToActivePathMapper('explore');
-  const userId = mx.getUserId();
+  const { userId } = ct.session;
   const clientConfig = useClientConfig();
   const userServer = userId ? getMxIdServer(userId) : undefined;
   const servers =
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index d87db963..ca5119c9 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -18,7 +18,7 @@ import {
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useAtom, useAtomValue } from 'jotai';
 import FocusTrap from 'focus-trap-react';
-import { factoryRoomIdByActivity, factoryRoomIdByAtoZ } from '../../../utils/sort';
+import { factoryRoomIdByAtoZ } from '../../../utils/sort';
 import {
   NavButton,
   NavCategory,
@@ -37,23 +37,18 @@ import {
   getHomeSearchPath,
   withSearchParam,
 } from '../../pathUtils';
-import { getCanonicalAliasOrRoomId } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import {
   useHomeCreateSelected,
   useHomeSearchSelected,
 } from '../../../hooks/router/useHomeSelected';
 import { useHomeRooms } from './useHomeRooms';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { VirtualTile } from '../../../components/virtualizer';
 import { RoomNavCategoryButton, RoomNavItem } from '../../../features/room-nav';
 import { makeNavCategoryId } from '../../../state/closedNavCategories';
-import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
 import { PageNav, PageNavHeader, PageNavContent } from '../../../components/page';
-import { useRoomsUnread } from '../../../state/hooks/unread';
-import { markAsRead } from '../../../utils/notifications';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
@@ -65,6 +60,18 @@ import {
 import { UseStateProvider } from '../../../components/UseStateProvider';
 import { JoinAddressPrompt } from '../../../components/join-address-prompt';
 import { _RoomSearchParams } from '../../paths';
+import { useClient } from '../../../hooks/useClient';
+import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
+import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
+import { useObservableValue } from '../../../hooks/useObservableValue';
+import {
+  getRoomTotalNotifications,
+  useRoomsNotifications,
+  useRoomsTotalNotifications,
+} from '../../../state/hooks/roomNotifications';
+import { roomToNotificationsAtom } from '../../../state/room/roomToNotifications';
+import { useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
+import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
 
 type HomeMenuProps = {
   requestClose: () => void;
@@ -72,12 +79,12 @@ type HomeMenuProps = {
 const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
   const orphanRooms = useHomeRooms();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
-  const mx = useMatrixClient();
+  const roomsNotifications = useRoomsNotifications(orphanRooms, roomToNotificationsAtom);
+  const notifications = useRoomsTotalNotifications(roomsNotifications);
 
   const handleMarkAsRead = () => {
-    if (!unread) return;
-    orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
+    // if (!unread) return;
+    // orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
     requestClose();
   };
 
@@ -89,7 +96,7 @@ const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, re
           size="300"
           after={<Icon size="100" src={Icons.CheckTwice} />}
           radii="300"
-          aria-disabled={!unread}
+          aria-disabled={!notifications || notifications.count === 0}
         >
           <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
             Mark as Read
@@ -195,12 +202,19 @@ function HomeEmpty() {
 
 const DEFAULT_CATEGORY_ID = makeNavCategoryId('home', 'room');
 export function Home() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   useNavToActivePathMapper('home');
   const scrollRef = useRef<HTMLDivElement>(null);
   const rooms = useHomeRooms();
+
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(rooms);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
+  const roomToNotifications = useRoomsNotifications(rooms, roomToNotificationsAtom);
+  const unreadRooms = useAtomValue(unreadRoomsAtom);
+
   const notificationPreferences = useRoomsNotificationPreferencesContext();
-  const roomToUnread = useAtomValue(roomToUnreadAtom);
   const navigate = useNavigate();
 
   const selectedRoomId = useSelectedRoom();
@@ -210,16 +224,20 @@ export function Home() {
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
   const sortedRooms = useMemo(() => {
-    const items = Array.from(rooms).sort(
-      closedCategories.has(DEFAULT_CATEGORY_ID)
-        ? factoryRoomIdByActivity(mx)
-        : factoryRoomIdByAtoZ(mx)
-    );
     if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
-      return items.filter((rId) => roomToUnread.has(rId) || rId === selectedRoomId);
+      // TODO: sort by activity
+      return rooms
+        .filter((roomId) => {
+          if (roomId === selectedRoomId) return true;
+          const notification = roomToNotifications.get(roomId);
+          if (!notification) return false;
+          const total = getRoomTotalNotifications(notification);
+          return total.count > 0;
+        })
+        .sort(factoryRoomIdByAtoZ(getRoomName));
     }
-    return items;
-  }, [mx, rooms, closedCategories, roomToUnread, selectedRoomId]);
+    return Array.from(rooms).sort(factoryRoomIdByAtoZ(getRoomName));
+  }, [getRoomName, rooms, closedCategories, roomToNotifications, selectedRoomId]);
 
   const virtualizer = useVirtualizer({
     count: sortedRooms.length,
@@ -330,9 +348,9 @@ export function Home() {
               >
                 {virtualizer.getVirtualItems().map((vItem) => {
                   const roomId = sortedRooms[vItem.index];
-                  const room = mx.getRoom(roomId);
-                  if (!room) return null;
                   const selected = selectedRoomId === roomId;
+                  const n = roomToNotifications.get(roomId);
+                  const notifications = n && getRoomTotalNotifications(n);
 
                   return (
                     <VirtualTile
@@ -341,13 +359,15 @@ export function Home() {
                       ref={virtualizer.measureElement}
                     >
                       <RoomNavItem
-                        room={room}
+                        roomId={roomId}
+                        roomName={getRoomName(roomId) ?? 'Unknown'}
+                        avatarUrl={getRoomAvatar(roomId)}
                         selected={selected}
-                        linkPath={getHomeRoomPath(getCanonicalAliasOrRoomId(mx, roomId))}
-                        notificationMode={getRoomNotificationMode(
-                          notificationPreferences,
-                          room.roomId
-                        )}
+                        joinRule={roomToJoinRule.get(roomId)}
+                        linkPath={getHomeRoomPath(ct.roomToAlias.read.get(roomId) ?? roomId)}
+                        notificationMode={getRoomNotificationMode(notificationPreferences, roomId)}
+                        notifications={notifications}
+                        unread={unreadRooms.has(roomId)}
                       />
                     </VirtualTile>
                   );
diff --git a/src/app/pages/client/home/RoomProvider.tsx b/src/app/pages/client/home/RoomProvider.tsx
index 4e16f797..6195e607 100644
--- a/src/app/pages/client/home/RoomProvider.tsx
+++ b/src/app/pages/client/home/RoomProvider.tsx
@@ -2,21 +2,18 @@ import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useHomeRooms } from './useHomeRooms';
 import { useSearchParamsViaServers } from '../../../hooks/router/useSearchParamsViaServers';
 
 export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
-  const mx = useMatrixClient();
   const rooms = useHomeRooms();
 
   const { roomIdOrAlias, eventId } = useParams();
   const viaServers = useSearchParamsViaServers();
   const roomId = useSelectedRoom();
-  const room = mx.getRoom(roomId);
 
-  if (!room || !rooms.includes(room.roomId)) {
+  if (!roomId || !rooms.includes(roomId)) {
     return (
       <JoinBeforeNavigate
         roomIdOrAlias={roomIdOrAlias!}
@@ -27,7 +24,7 @@ export function HomeRouteRoomProvider({ children }: { children: ReactNode }) {
   }
 
   return (
-    <RoomProvider key={room.roomId} value={room}>
+    <RoomProvider key={roomId} value={roomId}>
       <IsDirectRoomProvider value={false}>{children}</IsDirectRoomProvider>
     </RoomProvider>
   );
diff --git a/src/app/pages/client/home/useHomeRooms.ts b/src/app/pages/client/home/useHomeRooms.ts
index b0181b08..3b1658ca 100644
--- a/src/app/pages/client/home/useHomeRooms.ts
+++ b/src/app/pages/client/home/useHomeRooms.ts
@@ -1,14 +1,14 @@
 import { useAtomValue } from 'jotai';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { mDirectAtom } from '../../../state/mDirectList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { useOrphanRooms } from '../../../state/hooks/roomList';
+import { useClient } from '../../../hooks/useClient';
 
 export const useHomeRooms = () => {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const mDirects = useAtomValue(mDirectAtom);
   const roomToParents = useAtomValue(roomToParentsAtom);
-  const rooms = useOrphanRooms(mx, allRoomsAtom, mDirects, roomToParents);
+  const rooms = useOrphanRooms(ct, allRoomsAtom, mDirects, roomToParents);
   return rooms;
 };
diff --git a/src/app/pages/client/sidebar/DirectTab.tsx b/src/app/pages/client/sidebar/DirectTab.tsx
index dcd44e2f..c39a77f1 100644
--- a/src/app/pages/client/sidebar/DirectTab.tsx
+++ b/src/app/pages/client/sidebar/DirectTab.tsx
@@ -3,13 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Box, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useAtomValue } from 'jotai';
-import { useDirects } from '../../../state/hooks/roomList';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { mDirectAtom } from '../../../state/mDirectList';
-import { allRoomsAtom } from '../../../state/room-list/roomList';
-import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { getDirectPath, joinPathComponent } from '../../pathUtils';
-import { useRoomsUnread } from '../../../state/hooks/unread';
 import {
   SidebarAvatar,
   SidebarItem,
@@ -25,50 +19,64 @@ import { markAsRead } from '../../../utils/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { settingsAtom } from '../../../state/settings';
 import { useSetting } from '../../../state/hooks/settings';
+import {
+  TotalNotifications,
+  useRoomsNotifications,
+  useRoomsTotalNotifications,
+} from '../../../state/hooks/roomNotifications';
+import {
+  RoomToNotifications,
+  roomToNotificationsAtom,
+} from '../../../state/room/roomToNotifications';
 
 type DirectMenuProps = {
+  directRooms: string[];
+  roomToNotifications: RoomToNotifications;
+  notifications: TotalNotifications;
   requestClose: () => void;
 };
-const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
-  const orphanRooms = useDirectRooms();
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
-  const mx = useMatrixClient();
+const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(
+  ({ directRooms, roomToNotifications, notifications, requestClose }, ref) => {
+    const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
-  const handleMarkAsRead = () => {
-    if (!unread) return;
-    orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
-    requestClose();
-  };
+    const handleMarkAsRead = () => {
+      directRooms.forEach((rId) => {
+        const n = roomToNotifications.get(rId);
+        if (n?.notification_count && n.notification_count > 0) {
+          // markAsRead(mx, rId, hideActivity)
+        }
+      });
+      requestClose();
+    };
 
-  return (
-    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-        <MenuItem
-          onClick={handleMarkAsRead}
-          size="300"
-          after={<Icon size="100" src={Icons.CheckTwice} />}
-          radii="300"
-          aria-disabled={!unread}
-        >
-          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-            Mark as Read
-          </Text>
-        </MenuItem>
-      </Box>
-    </Menu>
-  );
-});
+    return (
+      <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+          <MenuItem
+            onClick={handleMarkAsRead}
+            size="300"
+            after={<Icon size="100" src={Icons.CheckTwice} />}
+            radii="300"
+            aria-disabled={notifications.count === 0}
+          >
+            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+              Mark as Read
+            </Text>
+          </MenuItem>
+        </Box>
+      </Menu>
+    );
+  }
+);
 
 export function DirectTab() {
   const navigate = useNavigate();
-  const mx = useMatrixClient();
   const screenSize = useScreenSizeContext();
   const navToActivePath = useAtomValue(useNavToActivePathAtom());
 
-  const mDirects = useAtomValue(mDirectAtom);
-  const directs = useDirects(mx, allRoomsAtom, mDirects);
-  const directUnread = useRoomsUnread(directs, roomToUnreadAtom);
+  const directRooms = useDirectRooms();
+  const roomsNotifications = useRoomsNotifications(directRooms, roomToNotificationsAtom);
+  const notifications = useRoomsTotalNotifications(roomsNotifications);
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
   const directSelected = useDirectSelected();
@@ -106,9 +114,9 @@ export function DirectTab() {
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
-      {directUnread && (
-        <SidebarItemBadge hasCount={directUnread.total > 0}>
-          <UnreadBadge highlight={directUnread.highlight > 0} count={directUnread.total} />
+      {notifications.count > 0 && (
+        <SidebarItemBadge hasCount={notifications.count > 0}>
+          <UnreadBadge highlight={notifications.highlight} count={notifications.count} />
         </SidebarItemBadge>
       )}
       {menuAnchor && (
@@ -128,7 +136,12 @@ export function DirectTab() {
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <DirectMenu requestClose={() => setMenuAnchor(undefined)} />
+              <DirectMenu
+                directRooms={directRooms}
+                roomToNotifications={roomsNotifications}
+                notifications={notifications}
+                requestClose={() => setMenuAnchor(undefined)}
+              />
             </FocusTrap>
           }
         />
diff --git a/src/app/pages/client/sidebar/ExploreTab.tsx b/src/app/pages/client/sidebar/ExploreTab.tsx
index a45b5830..0fe3b879 100644
--- a/src/app/pages/client/sidebar/ExploreTab.tsx
+++ b/src/app/pages/client/sidebar/ExploreTab.tsx
@@ -11,13 +11,13 @@ import {
   joinPathComponent,
 } from '../../pathUtils';
 import { useClientConfig } from '../../../hooks/useClientConfig';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { getMxIdServer } from '../../../utils/matrix';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
+import { useClient } from '../../../hooks/useClient';
 
 export function ExploreTab() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const screenSize = useScreenSizeContext();
   const clientConfig = useClientConfig();
   const navigate = useNavigate();
@@ -41,7 +41,7 @@ export function ExploreTab() {
       navigate(getExploreFeaturedPath());
       return;
     }
-    const userId = mx.getUserId();
+    const { userId } = ct.session;
     const userServer = userId ? getMxIdServer(userId) : undefined;
     if (userServer) {
       navigate(getExploreServerPath(userServer));
diff --git a/src/app/pages/client/sidebar/HomeTab.tsx b/src/app/pages/client/sidebar/HomeTab.tsx
index 778b729e..5b7b1a46 100644
--- a/src/app/pages/client/sidebar/HomeTab.tsx
+++ b/src/app/pages/client/sidebar/HomeTab.tsx
@@ -3,14 +3,7 @@ import { useNavigate } from 'react-router-dom';
 import { Box, Icon, Icons, Menu, MenuItem, PopOut, RectCords, Text, config, toRem } from 'folds';
 import { useAtomValue } from 'jotai';
 import FocusTrap from 'focus-trap-react';
-import { useOrphanRooms } from '../../../state/hooks/roomList';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { mDirectAtom } from '../../../state/mDirectList';
-import { roomToParentsAtom } from '../../../state/room/roomToParents';
-import { allRoomsAtom } from '../../../state/room-list/roomList';
-import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { getHomePath, joinPathComponent } from '../../pathUtils';
-import { useRoomsUnread } from '../../../state/hooks/unread';
 import {
   SidebarAvatar,
   SidebarItem,
@@ -26,51 +19,64 @@ import { markAsRead } from '../../../utils/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
+import {
+  TotalNotifications,
+  useRoomsNotifications,
+  useRoomsTotalNotifications,
+} from '../../../state/hooks/roomNotifications';
+import {
+  RoomToNotifications,
+  roomToNotificationsAtom,
+} from '../../../state/room/roomToNotifications';
 
 type HomeMenuProps = {
+  homeRooms: string[];
+  roomToNotifications: RoomToNotifications;
+  notifications: TotalNotifications;
   requestClose: () => void;
 };
-const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
-  const orphanRooms = useHomeRooms();
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const unread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
-  const mx = useMatrixClient();
+const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(
+  ({ homeRooms, roomToNotifications, notifications, requestClose }, ref) => {
+    const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
-  const handleMarkAsRead = () => {
-    if (!unread) return;
-    orphanRooms.forEach((rId) => markAsRead(mx, rId, hideActivity));
-    requestClose();
-  };
+    const handleMarkAsRead = () => {
+      homeRooms.forEach((rId) => {
+        const n = roomToNotifications.get(rId);
+        if (n?.notification_count && n.notification_count > 0) {
+          // markAsRead(mx, rId, hideActivity)
+        }
+      });
+      requestClose();
+    };
 
-  return (
-    <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-      <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-        <MenuItem
-          onClick={handleMarkAsRead}
-          size="300"
-          after={<Icon size="100" src={Icons.CheckTwice} />}
-          radii="300"
-          aria-disabled={!unread}
-        >
-          <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-            Mark as Read
-          </Text>
-        </MenuItem>
-      </Box>
-    </Menu>
-  );
-});
+    return (
+      <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
+        <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+          <MenuItem
+            onClick={handleMarkAsRead}
+            size="300"
+            after={<Icon size="100" src={Icons.CheckTwice} />}
+            radii="300"
+            aria-disabled={notifications.count === 0}
+          >
+            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+              Mark as Read
+            </Text>
+          </MenuItem>
+        </Box>
+      </Menu>
+    );
+  }
+);
 
 export function HomeTab() {
   const navigate = useNavigate();
-  const mx = useMatrixClient();
   const screenSize = useScreenSizeContext();
   const navToActivePath = useAtomValue(useNavToActivePathAtom());
 
-  const mDirects = useAtomValue(mDirectAtom);
-  const roomToParents = useAtomValue(roomToParentsAtom);
-  const orphanRooms = useOrphanRooms(mx, allRoomsAtom, mDirects, roomToParents);
-  const homeUnread = useRoomsUnread(orphanRooms, roomToUnreadAtom);
+  const homeRooms = useHomeRooms();
+  const roomsNotifications = useRoomsNotifications(homeRooms, roomToNotificationsAtom);
+  const notifications = useRoomsTotalNotifications(roomsNotifications);
   const homeSelected = useHomeSelected();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
@@ -108,9 +114,9 @@ export function HomeTab() {
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
-      {homeUnread && (
-        <SidebarItemBadge hasCount={homeUnread.total > 0}>
-          <UnreadBadge highlight={homeUnread.highlight > 0} count={homeUnread.total} />
+      {notifications.count > 0 && (
+        <SidebarItemBadge hasCount={notifications.count > 0}>
+          <UnreadBadge highlight={notifications.highlight} count={notifications.count} />
         </SidebarItemBadge>
       )}
       {menuAnchor && (
@@ -130,7 +136,12 @@ export function HomeTab() {
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <HomeMenu requestClose={() => setMenuAnchor(undefined)} />
+              <HomeMenu
+                homeRooms={homeRooms}
+                roomToNotifications={roomsNotifications}
+                notifications={notifications}
+                requestClose={() => setMenuAnchor(undefined)}
+              />
             </FocusTrap>
           }
         />
diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index bb212184..f9c0ef6e 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -2,25 +2,30 @@ import React, { useState } from 'react';
 import { Text } from 'folds';
 import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
 import { UserAvatar } from '../../../components/user-avatar';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
+import { getMxIdLocalPart } from '../../../utils/matrix';
 import { nameInitials } from '../../../utils/common';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { Settings } from '../../../features/settings';
 import { useUserProfile } from '../../../hooks/useUserProfile';
 import { Modal500 } from '../../../components/Modal500';
+import { useClient } from '../../../hooks/useClient';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
 
 export function SettingsTab() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const userId = mx.getUserId()!;
+  const { userId, baseUrl } = ct.session;
   const profile = useUserProfile(userId);
 
   const [settings, setSettings] = useState(false);
 
-  const displayName = profile.displayName ?? getMxIdLocalPart(userId) ?? userId;
-  const avatarUrl = profile.avatarUrl
-    ? mxcUrlToHttp(mx, profile.avatarUrl, useAuthentication, 96, 96, 'crop') ?? undefined
+  const displayName = profile?.displayName ?? getMxIdLocalPart(userId) ?? userId;
+  const avatarUrl = profile?.avatarUrl
+    ? mxcToHttp(baseUrl, profile.avatarUrl, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
   const openSettings = () => setSettings(true);
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index 6fc528a1..18736eb5 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -25,7 +25,8 @@ import {
   toRem,
 } from 'folds';
 import { useAtom, useAtomValue } from 'jotai';
-import { Room } from 'matrix-js-sdk';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
+import { AccountDataEvent } from 'neurone/lib/api/types';
 import {
   draggable,
   dropTargetForElements,
@@ -43,8 +44,8 @@ import {
   useOrphanSpaces,
   useRecursiveChildScopeFactory,
   useSpaceChildren,
+  useSpacesChildren,
 } from '../../../state/hooks/roomList';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { getSpaceLobbyPath, getSpacePath, joinPathComponent } from '../../pathUtils';
@@ -58,34 +59,31 @@ import {
   SidebarFolder,
   SidebarFolderDropTarget,
 } from '../../../components/sidebar';
-import { RoomUnreadProvider, RoomsUnreadProvider } from '../../../components/RoomUnreadProvider';
 import { useSelectedSpace } from '../../../hooks/router/useSelectedSpace';
 import { UnreadBadge } from '../../../components/unread-badge';
-import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../../utils/matrix';
 import { RoomAvatar } from '../../../components/room-avatar';
 import { nameInitials, randomStr } from '../../../utils/common';
 import {
   ISidebarFolder,
+  InCinnySpacesContent,
   SidebarItems,
   TSidebarItem,
   makeCinnySpacesContent,
   parseSidebar,
   sidebarItemWithout,
   useSidebarItems,
+  useSidebarRooms,
 } from '../../../hooks/useSidebarItems';
-import { AccountDataEvent } from '../../../../types/matrix/accountData';
+import { AccountDataType } from '../../../../types/matrix/accountData';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useOpenedSidebarFolderAtom } from '../../../state/hooks/openedSidebarFolder';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
-import { useRoomsUnread } from '../../../state/hooks/unread';
-import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
+import { usePowerLevels, usePowerLevelsState } from '../../../hooks/usePowerLevels';
 import { markAsRead } from '../../../utils/notifications';
 import { copyToClipboard } from '../../../utils/dom';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
-import { getRoomAvatarUrl } from '../../../utils/room';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
@@ -93,47 +91,53 @@ import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../../components/invite-user-prompt';
+import { useClient } from '../../../hooks/useClient';
+import { useAccountData } from '../../../hooks/storage/useAccountData';
+import { GetRoomNameCallback, useGetRoomName } from '../../../hooks/storage/useGetRoomName';
+import {
+  TotalNotifications,
+  useRoomsNotifications,
+  useRoomsTotalNotifications,
+} from '../../../state/hooks/roomNotifications';
+import { roomToNotificationsAtom } from '../../../state/room/roomToNotifications';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
+import { GetRoomAvatarCallback, useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
 
 type SpaceMenuProps = {
-  room: Room;
+  spaceId: string;
   requestClose: () => void;
   onUnpin?: (roomId: string) => void;
+  notifications?: TotalNotifications;
 };
 const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
-  ({ room, requestClose, onUnpin }, ref) => {
-    const mx = useMatrixClient();
+  ({ spaceId, requestClose, onUnpin, notifications }, ref) => {
+    const ct = useClient();
     const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-    const roomToParents = useAtomValue(roomToParentsAtom);
-    const powerLevels = usePowerLevels(room);
-    const creators = useRoomCreators(room);
+    const powerLevelState = usePowerLevelsState(spaceId);
+    const powerLevels = usePowerLevels(powerLevelState.value);
+    const creators = useRoomCreators(spaceId);
 
     const permissions = useRoomPermissions(creators, powerLevels);
-    const canInvite = permissions.action('invite', mx.getSafeUserId());
+    const canInvite = permissions.action('invite', ct.session.userId);
     const openSpaceSettings = useOpenSpaceSettings();
 
     const [invitePrompt, setInvitePrompt] = useState(false);
 
-    const allChild = useSpaceChildren(
-      allRoomsAtom,
-      room.roomId,
-      useRecursiveChildScopeFactory(mx, roomToParents)
-    );
-    const unread = useRoomsUnread(allChild, roomToUnreadAtom);
-
     const handleMarkAsRead = () => {
-      allChild.forEach((childRoomId) => markAsRead(mx, childRoomId, hideActivity));
+      // allChild.forEach((childRoomId) => markAsRead(mx, childRoomId, hideActivity));
       requestClose();
     };
 
     const handleUnpin = () => {
-      onUnpin?.(room.roomId);
+      onUnpin?.(spaceId);
       requestClose();
     };
 
     const handleCopyLink = () => {
-      const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-      const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-      copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
+      const alias = ct.roomToAlias.read.get(spaceId);
+      const viaServers = alias ? undefined : getViaServers(creators, powerLevels);
+      copyToClipboard(getMatrixToRoom(alias ?? spaceId, viaServers));
       requestClose();
     };
 
@@ -142,15 +146,15 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
     };
 
     const handleRoomSettings = () => {
-      openSpaceSettings(room.roomId);
+      openSpaceSettings(spaceId);
       requestClose();
     };
 
     return (
       <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
-        {invitePrompt && room && (
+        {invitePrompt && (
           <InviteUserPrompt
-            room={room}
+            roomId={spaceId}
             requestClose={() => {
               setInvitePrompt(false);
               requestClose();
@@ -163,7 +167,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
             size="300"
             after={<Icon size="100" src={Icons.CheckTwice} />}
             radii="300"
-            disabled={!unread}
+            disabled={!notifications || notifications.count === 0}
           >
             <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
               Mark as Read
@@ -383,25 +387,47 @@ const useDnDMonitor = (
 };
 
 type SpaceTabProps = {
-  space: Room;
+  spaceId: string;
   selected: boolean;
   onClick: MouseEventHandler<HTMLButtonElement>;
+  getName: GetRoomNameCallback;
+  getAvatar: GetRoomAvatarCallback;
   folder?: ISidebarFolder;
   onDragging: (dragItem?: SidebarDraggable) => void;
   disabled?: boolean;
   onUnpin?: (roomId: string) => void;
 };
 function SpaceTab({
-  space,
+  spaceId,
   selected,
+  getName,
+  getAvatar,
   onClick,
   folder,
   onDragging,
   disabled,
   onUnpin,
 }: SpaceTabProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
+
+  const roomToParents = useAtomValue(roomToParentsAtom);
+  const childRooms = useSpaceChildren(
+    allRoomsAtom,
+    spaceId,
+    useRecursiveChildScopeFactory(ct, roomToParents)
+  );
+  const roomsNotifications = useRoomsNotifications(childRooms, roomToNotificationsAtom);
+  const notifications = useRoomsTotalNotifications(roomsNotifications);
+
+  const spaceName = getName(spaceId) ?? spaceId;
+  const avatarMxc = getAvatar(spaceId);
+  const avatarUrl =
+    avatarMxc &&
+    mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+      height: 96,
+      width: 96,
+    });
   const targetRef = useRef<HTMLDivElement>(null);
 
   const spaceDraggable: SidebarDraggable = useMemo(
@@ -409,10 +435,10 @@ function SpaceTab({
       folder
         ? {
             folder,
-            spaceId: space.roomId,
+            spaceId,
           }
-        : space.roomId,
-    [folder, space]
+        : spaceId,
+    [folder, spaceId]
   );
 
   useDraggableItem(spaceDraggable, targetRef, onDragging);
@@ -431,72 +457,69 @@ function SpaceTab({
   };
 
   return (
-    <RoomUnreadProvider roomId={space.roomId}>
-      {(unread) => (
-        <SidebarItem
-          active={selected}
-          ref={targetRef}
-          aria-disabled={disabled}
-          data-drop-child={dropType === 'make-child'}
-          data-drop-above={dropType === 'reorder-above'}
-          data-drop-below={dropType === 'reorder-below'}
-          data-inside-folder={!!folder}
-        >
-          <SidebarItemTooltip tooltip={disabled ? undefined : space.name}>
-            {(triggerRef) => (
-              <SidebarAvatar
-                as="button"
-                data-id={space.roomId}
-                ref={triggerRef}
-                size={folder ? '300' : '400'}
-                onClick={onClick}
-                onContextMenu={handleContextMenu}
-              >
-                <RoomAvatar
-                  roomId={space.roomId}
-                  src={getRoomAvatarUrl(mx, space, 96, useAuthentication) ?? undefined}
-                  alt={space.name}
-                  renderFallback={() => (
-                    <Text size={folder ? 'H6' : 'H4'}>{nameInitials(space.name, 2)}</Text>
-                  )}
-                />
-              </SidebarAvatar>
-            )}
-          </SidebarItemTooltip>
-          {unread && (
-            <SidebarItemBadge hasCount={unread.total > 0}>
-              <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
-            </SidebarItemBadge>
-          )}
-          {menuAnchor && (
-            <PopOut
-              anchor={menuAnchor}
-              position="Right"
-              align="Start"
-              content={
-                <FocusTrap
-                  focusTrapOptions={{
-                    initialFocus: false,
-                    returnFocusOnDeactivate: false,
-                    onDeactivate: () => setMenuAnchor(undefined),
-                    clickOutsideDeactivates: true,
-                    isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
-                    isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
-                    escapeDeactivates: stopPropagation,
-                  }}
-                >
-                  <SpaceMenu
-                    room={space}
-                    requestClose={() => setMenuAnchor(undefined)}
-                    onUnpin={onUnpin}
-                  />
-                </FocusTrap>
-              }
+    <SidebarItem
+      active={selected}
+      ref={targetRef}
+      aria-disabled={disabled}
+      data-drop-child={dropType === 'make-child'}
+      data-drop-above={dropType === 'reorder-above'}
+      data-drop-below={dropType === 'reorder-below'}
+      data-inside-folder={!!folder}
+    >
+      <SidebarItemTooltip tooltip={disabled ? undefined : spaceName}>
+        {(triggerRef) => (
+          <SidebarAvatar
+            as="button"
+            data-id={spaceId}
+            ref={triggerRef}
+            size={folder ? '300' : '400'}
+            onClick={onClick}
+            onContextMenu={handleContextMenu}
+          >
+            <RoomAvatar
+              roomId={spaceId}
+              src={avatarUrl}
+              alt={spaceName}
+              renderFallback={() => (
+                <Text size={folder ? 'H6' : 'H4'}>{nameInitials(spaceName, 2)}</Text>
+              )}
             />
-          )}
-        </SidebarItem>
+          </SidebarAvatar>
+        )}
+      </SidebarItemTooltip>
+      {notifications.count > 0 && (
+        <SidebarItemBadge hasCount={notifications.count > 0}>
+          <UnreadBadge highlight={notifications.highlight} count={notifications.count} />
+        </SidebarItemBadge>
       )}
-    </RoomUnreadProvider>
+      {menuAnchor && (
+        <PopOut
+          anchor={menuAnchor}
+          position="Right"
+          align="Start"
+          content={
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                returnFocusOnDeactivate: false,
+                onDeactivate: () => setMenuAnchor(undefined),
+                clickOutsideDeactivates: true,
+                isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+                isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <SpaceMenu
+                spaceId={spaceId}
+                requestClose={() => setMenuAnchor(undefined)}
+                onUnpin={onUnpin}
+                notifications={notifications}
+              />
+            </FocusTrap>
+          }
+        />
+      )}
+    </SidebarItem>
   );
 }
 
@@ -535,6 +558,8 @@ function OpenedSpaceFolder({ folder, onClose, children }: OpenedSpaceFolderProps
 type ClosedSpaceFolderProps = {
   folder: ISidebarFolder;
   selected: boolean;
+  getName: GetRoomNameCallback;
+  getAvatar: GetRoomAvatarCallback;
   onOpen: MouseEventHandler<HTMLButtonElement>;
   onDragging: (dragItem?: SidebarDraggable) => void;
   disabled?: boolean;
@@ -542,12 +567,24 @@ type ClosedSpaceFolderProps = {
 function ClosedSpaceFolder({
   folder,
   selected,
+  getName,
+  getAvatar,
   onOpen,
   onDragging,
   disabled,
 }: ClosedSpaceFolderProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
+
+  const roomToParents = useAtomValue(roomToParentsAtom);
+  const childRooms = useSpacesChildren(
+    allRoomsAtom,
+    folder.content,
+    useRecursiveChildScopeFactory(ct, roomToParents)
+  );
+  const roomsNotifications = useRoomsNotifications(childRooms, roomToNotificationsAtom);
+  const notifications = useRoomsTotalNotifications(roomsNotifications);
+
   const handlerRef = useRef<HTMLDivElement>(null);
 
   const spaceDraggable: FolderDraggable = useMemo(() => ({ folder }), [folder]);
@@ -555,53 +592,54 @@ function ClosedSpaceFolder({
   const dropState = useDropTarget(spaceDraggable, handlerRef);
   const dropType = dropState?.type;
 
-  const tooltipName =
-    folder.name ?? folder.content.map((i) => mx.getRoom(i)?.name ?? '').join(', ') ?? 'Unnamed';
+  const tooltipName = folder.name ?? folder.content.map((i) => getName(i) ?? i).join(', ');
 
   return (
-    <RoomsUnreadProvider rooms={folder.content}>
-      {(unread) => (
-        <SidebarItem
-          active={selected}
-          ref={handlerRef}
-          aria-disabled={disabled}
-          data-drop-child={dropType === 'make-child'}
-          data-drop-above={dropType === 'reorder-above'}
-          data-drop-below={dropType === 'reorder-below'}
-        >
-          <SidebarItemTooltip tooltip={disabled ? undefined : tooltipName}>
-            {(tooltipRef) => (
-              <SidebarFolder data-id={folder.id} as="button" ref={tooltipRef} onClick={onOpen}>
-                {folder.content.map((sId) => {
-                  const space = mx.getRoom(sId);
-                  if (!space) return null;
+    <SidebarItem
+      active={selected}
+      ref={handlerRef}
+      aria-disabled={disabled}
+      data-drop-child={dropType === 'make-child'}
+      data-drop-above={dropType === 'reorder-above'}
+      data-drop-below={dropType === 'reorder-below'}
+    >
+      <SidebarItemTooltip tooltip={disabled ? undefined : tooltipName}>
+        {(tooltipRef) => (
+          <SidebarFolder data-id={folder.id} as="button" ref={tooltipRef} onClick={onOpen}>
+            {folder.content.map((spaceId) => {
+              const spaceName = getName(spaceId) ?? spaceId;
+              const avatarMxc = getAvatar(spaceId);
+              const avatarUrl =
+                avatarMxc &&
+                mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+                  height: 96,
+                  width: 96,
+                });
 
-                  return (
-                    <SidebarAvatar key={sId} size="200" radii="300">
-                      <RoomAvatar
-                        roomId={space.roomId}
-                        src={getRoomAvatarUrl(mx, space, 96, useAuthentication) ?? undefined}
-                        alt={space.name}
-                        renderFallback={() => (
-                          <Text size="Inherit">
-                            <b>{nameInitials(space.name, 2)}</b>
-                          </Text>
-                        )}
-                      />
-                    </SidebarAvatar>
-                  );
-                })}
-              </SidebarFolder>
-            )}
-          </SidebarItemTooltip>
-          {unread && (
-            <SidebarItemBadge hasCount={unread.total > 0}>
-              <UnreadBadge highlight={unread.highlight > 0} count={unread.total} />
-            </SidebarItemBadge>
-          )}
-        </SidebarItem>
+              return (
+                <SidebarAvatar key={spaceId} size="200" radii="300">
+                  <RoomAvatar
+                    roomId={spaceId}
+                    src={avatarUrl}
+                    alt={spaceName}
+                    renderFallback={() => (
+                      <Text size="Inherit">
+                        <b>{nameInitials(spaceName, 2)}</b>
+                      </Text>
+                    )}
+                  />
+                </SidebarAvatar>
+              );
+            })}
+          </SidebarFolder>
+        )}
+      </SidebarItemTooltip>
+      {notifications.count > 0 && (
+        <SidebarItemBadge hasCount={notifications.count > 0}>
+          <UnreadBadge highlight={notifications.highlight} count={notifications.count} />
+        </SidebarItemBadge>
       )}
-    </RoomsUnreadProvider>
+    </SidebarItem>
   );
 }
 
@@ -610,15 +648,30 @@ type SpaceTabsProps = {
 };
 export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
   const navigate = useNavigate();
-  const mx = useMatrixClient();
+  const ct = useClient();
   const screenSize = useScreenSizeContext();
+
   const roomToParents = useAtomValue(roomToParentsAtom);
-  const orphanSpaces = useOrphanSpaces(mx, allRoomsAtom, roomToParents);
-  const [sidebarItems, localEchoSidebarItem] = useSidebarItems(orphanSpaces);
+  const orphanSpaces = useOrphanSpaces(ct, allRoomsAtom, roomToParents);
+  const { value: cinnySpacesEvent } = useAccountData<AccountDataEvent<InCinnySpacesContent>>(
+    AccountDataType.CinnySpaces
+  );
+  const originalSidebarItems = useSidebarItems(orphanSpaces, cinnySpacesEvent);
+  const [sidebarItems, localEchoSidebarItem] = useState(originalSidebarItems);
   const navToActivePath = useAtomValue(useNavToActivePathAtom());
   const [openedFolder, setOpenedFolder] = useAtom(useOpenedSidebarFolderAtom());
   const [draggingItem, setDraggingItem] = useState<SidebarDraggable>();
 
+  const sidebarRooms = useSidebarRooms(originalSidebarItems);
+  const [getRoomHeroes, roomToHeroResult] = useRoomHeroes(sidebarRooms);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroResult.value);
+
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroResult.value);
+
+  useEffect(() => {
+    localEchoSidebarItem(originalSidebarItems);
+  }, [originalSidebarItems]);
+
   useDnDMonitor(
     scrollRef,
     setDraggingItem,
@@ -744,11 +797,19 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
           newItems.push(i);
         });
 
-        const newSpacesContent = makeCinnySpacesContent(mx, newItems);
-        localEchoSidebarItem(parseSidebar(mx, orphanSpaces, newSpacesContent));
-        mx.setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
+        const newSpacesContent = makeCinnySpacesContent(newItems, cinnySpacesEvent);
+        localEchoSidebarItem(parseSidebar(ct, orphanSpaces, newSpacesContent));
+        ct.requestAuthJSON(
+          putAccountData({
+            pathParams: {
+              userId: ct.session.userId,
+              type: AccountDataType.CinnySpaces,
+            },
+            body: newSpacesContent,
+          })
+        );
       },
-      [mx, sidebarItems, setOpenedFolder, localEchoSidebarItem, orphanSpaces]
+      [ct, sidebarItems, cinnySpacesEvent, setOpenedFolder, localEchoSidebarItem, orphanSpaces]
     )
   );
 
@@ -758,8 +819,9 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
     const target = evt.currentTarget;
     const targetSpaceId = target.getAttribute('data-id');
     if (!targetSpaceId) return;
+    const targetSpaceAlias = ct.roomToAlias.read.get(targetSpaceId);
 
-    const spacePath = getSpacePath(getCanonicalAliasOrRoomId(mx, targetSpaceId));
+    const spacePath = getSpacePath(targetSpaceAlias ?? targetSpaceId);
     if (screenSize === ScreenSize.Mobile) {
       navigate(spacePath);
       return;
@@ -771,7 +833,7 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
       return;
     }
 
-    navigate(getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, targetSpaceId)));
+    navigate(getSpaceLobbyPath(targetSpaceAlias ?? targetSpaceId));
   };
 
   const handleFolderToggle: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -790,11 +852,19 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
       if (orphanSpaces.includes(roomId)) return;
       const newItems = sidebarItemWithout(sidebarItems, roomId);
 
-      const newSpacesContent = makeCinnySpacesContent(mx, newItems);
-      localEchoSidebarItem(parseSidebar(mx, orphanSpaces, newSpacesContent));
-      mx.setAccountData(AccountDataEvent.CinnySpaces, newSpacesContent);
+      const newSpacesContent = makeCinnySpacesContent(newItems, cinnySpacesEvent);
+      localEchoSidebarItem(parseSidebar(ct, orphanSpaces, newSpacesContent));
+      ct.requestAuthJSON(
+        putAccountData({
+          pathParams: {
+            userId: ct.session.userId,
+            type: AccountDataType.CinnySpaces,
+          },
+          body: newSpacesContent,
+        })
+      );
     },
-    [mx, sidebarItems, orphanSpaces, localEchoSidebarItem]
+    [ct, sidebarItems, orphanSpaces, cinnySpacesEvent, localEchoSidebarItem]
   );
 
   if (sidebarItems.length === 0) return null;
@@ -807,26 +877,22 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
             if (openedFolder.has(item.id)) {
               return (
                 <OpenedSpaceFolder key={item.id} folder={item} onClose={handleFolderToggle}>
-                  {item.content.map((sId) => {
-                    const space = mx.getRoom(sId);
-                    if (!space) return null;
-                    return (
-                      <SpaceTab
-                        key={space.roomId}
-                        space={space}
-                        selected={space.roomId === selectedSpaceId}
-                        onClick={handleSpaceClick}
-                        folder={item}
-                        onDragging={setDraggingItem}
-                        disabled={
-                          typeof draggingItem === 'object'
-                            ? draggingItem.spaceId === space.roomId
-                            : false
-                        }
-                        onUnpin={orphanSpaces.includes(space.roomId) ? undefined : handleUnpin}
-                      />
-                    );
-                  })}
+                  {item.content.map((spaceId) => (
+                    <SpaceTab
+                      key={spaceId}
+                      spaceId={spaceId}
+                      getName={getRoomName}
+                      getAvatar={getRoomAvatar}
+                      selected={spaceId === selectedSpaceId}
+                      onClick={handleSpaceClick}
+                      folder={item}
+                      onDragging={setDraggingItem}
+                      disabled={
+                        typeof draggingItem === 'object' ? draggingItem.spaceId === spaceId : false
+                      }
+                      onUnpin={orphanSpaces.includes(spaceId) ? undefined : handleUnpin}
+                    />
+                  ))}
                 </OpenedSpaceFolder>
               );
             }
@@ -835,6 +901,8 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
               <ClosedSpaceFolder
                 key={item.id}
                 folder={item}
+                getName={getRoomName}
+                getAvatar={getRoomAvatar}
                 selected={!!selectedSpaceId && item.content.includes(selectedSpaceId)}
                 onOpen={handleFolderToggle}
                 onDragging={setDraggingItem}
@@ -845,18 +913,17 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
             );
           }
 
-          const space = mx.getRoom(item);
-          if (!space) return null;
-
           return (
             <SpaceTab
-              key={space.roomId}
-              space={space}
-              selected={space.roomId === selectedSpaceId}
+              key={item}
+              spaceId={item}
+              getName={getRoomName}
+              getAvatar={getRoomAvatar}
+              selected={item === selectedSpaceId}
               onClick={handleSpaceClick}
               onDragging={setDraggingItem}
-              disabled={typeof draggingItem === 'string' ? draggingItem === space.roomId : false}
-              onUnpin={orphanSpaces.includes(space.roomId) ? undefined : handleUnpin}
+              disabled={typeof draggingItem === 'string' ? draggingItem === item : false}
+              onUnpin={orphanSpaces.includes(item) ? undefined : handleUnpin}
             />
           );
         })}
diff --git a/src/app/pages/client/space/RoomProvider.tsx b/src/app/pages/client/space/RoomProvider.tsx
index 0fd52ab6..702afeac 100644
--- a/src/app/pages/client/space/RoomProvider.tsx
+++ b/src/app/pages/client/space/RoomProvider.tsx
@@ -1,34 +1,27 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtomValue } from 'jotai';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import { IsDirectRoomProvider, RoomProvider } from '../../../hooks/useRoom';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useSpace } from '../../../hooks/useSpace';
-import { getAllParents, getSpaceChildren } from '../../../utils/room';
+import { getAllParents } from '../../../utils/room';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { useSearchParamsViaServers } from '../../../hooks/router/useSearchParamsViaServers';
 import { mDirectAtom } from '../../../state/mDirectList';
-import { settingsAtom } from '../../../state/settings';
-import { useSetting } from '../../../state/hooks/settings';
 
 export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
-  const mx = useMatrixClient();
-  const space = useSpace();
-  const [developerTools] = useSetting(settingsAtom, 'developerTools');
-  const [roomToParents, setRoomToParents] = useAtom(roomToParentsAtom);
+  const spaceId = useSpace();
+  const roomToParents = useAtomValue(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useAtomValue(allRoomsAtom);
 
   const { roomIdOrAlias, eventId } = useParams();
   const viaServers = useSearchParamsViaServers();
   const roomId = useSelectedRoom();
-  const room = mx.getRoom(roomId);
 
-  if (!room || !allRooms.includes(room.roomId)) {
-    // room is not joined
+  if (!roomId || !allRooms.includes(roomId)) {
     return (
       <JoinBeforeNavigate
         roomIdOrAlias={roomIdOrAlias!}
@@ -38,25 +31,7 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
     );
   }
 
-  if (developerTools && room.isSpaceRoom() && room.roomId === space.roomId) {
-    // allow to view space timeline
-    return (
-      <RoomProvider key={room.roomId} value={room}>
-        <IsDirectRoomProvider value={mDirects.has(room.roomId)}>{children}</IsDirectRoomProvider>
-      </RoomProvider>
-    );
-  }
-
-  if (!getAllParents(roomToParents, room.roomId).has(space.roomId)) {
-    if (getSpaceChildren(space).includes(room.roomId)) {
-      // fill missing roomToParent mapping
-      setRoomToParents({
-        type: 'PUT',
-        parent: space.roomId,
-        children: [room.roomId],
-      });
-    }
-
+  if (!getAllParents(roomToParents, roomId).has(spaceId)) {
     return (
       <JoinBeforeNavigate
         roomIdOrAlias={roomIdOrAlias!}
@@ -67,8 +42,8 @@ export function SpaceRouteRoomProvider({ children }: { children: ReactNode }) {
   }
 
   return (
-    <RoomProvider key={room.roomId} value={room}>
-      <IsDirectRoomProvider value={mDirects.has(room.roomId)}>{children}</IsDirectRoomProvider>
+    <RoomProvider key={roomId} value={roomId}>
+      <IsDirectRoomProvider value={mDirects.has(roomId)}>{children}</IsDirectRoomProvider>
     </RoomProvider>
   );
 }
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 3f60d2a9..99e9b879 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -26,10 +26,9 @@ import {
   toRem,
 } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { JoinRule, Room } from 'matrix-js-sdk';
-import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { postJoin, PostJoinOK } from 'neurone/lib/api/matrix/client/v3/join';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import { mDirectAtom } from '../../../state/mDirectList';
 import {
   NavCategory,
@@ -39,7 +38,7 @@ import {
   NavLink,
 } from '../../../components/nav';
 import { getSpaceLobbyPath, getSpaceRoomPath, getSpaceSearchPath } from '../../pathUtils';
-import { getCanonicalAliasOrRoomId, isRoomAlias } from '../../../utils/matrix';
+import { getMxIdServer } from '../../../utils/matrix';
 import { useSelectedRoom } from '../../../hooks/router/useSelectedRoom';
 import {
   useSpaceLobbySelected,
@@ -49,24 +48,19 @@ import { useSpace } from '../../../hooks/useSpace';
 import { VirtualTile } from '../../../components/virtualizer';
 import { RoomNavCategoryButton, RoomNavItem } from '../../../features/room-nav';
 import { makeNavCategoryId } from '../../../state/closedNavCategories';
-import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
-import { useRoomName } from '../../../hooks/useRoomMeta';
 import { useSpaceJoinedHierarchy } from '../../../hooks/useSpaceHierarchy';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsState } from '../../../hooks/usePowerLevels';
 import { useRecursiveChildScopeFactory, useSpaceChildren } from '../../../state/hooks/roomList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
-import { markAsRead } from '../../../utils/notifications';
-import { useRoomsUnread } from '../../../state/hooks/unread';
 import { UseStateProvider } from '../../../components/UseStateProvider';
 import { LeaveSpacePrompt } from '../../../components/leave-space-prompt';
 import { copyToClipboard } from '../../../utils/dom';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
-import { useStateEvent } from '../../../hooks/useStateEvent';
-import { Membership, StateEvent } from '../../../../types/matrix/room';
+import { StateEventType } from '../../../../types/matrix/room';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
@@ -84,21 +78,36 @@ import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { BreakWord } from '../../../styles/Text.css';
 import { InviteUserPrompt } from '../../../components/invite-user-prompt';
+import { useObservableValue } from '../../../hooks/useObservableValue';
+import { useClient } from '../../../hooks/useClient';
+import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
+import { useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
+import { roomToNotificationsAtom } from '../../../state/room/roomToNotifications';
+import {
+  getRoomTotalNotifications,
+  useRoomsNotifications,
+  useRoomsTotalNotifications,
+} from '../../../state/hooks/roomNotifications';
+import { getJoinRoomStateId } from '../../../../client/storage/collections';
+import { useAllJoinedRoomsSet } from '../../../hooks/useGetRoom';
 
 type SpaceMenuProps = {
-  room: Room;
   requestClose: () => void;
 };
-const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClose }, ref) => {
-  const mx = useMatrixClient();
+const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ requestClose }, ref) => {
+  const ct = useClient();
+  const { userId } = ct.session;
+  const spaceId = useSpace();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [developerTools] = useSetting(settingsAtom, 'developerTools');
   const roomToParents = useAtomValue(roomToParentsAtom);
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
+  const powerLevelsStateResult = usePowerLevelsState(spaceId);
+  const powerLevels = usePowerLevels(powerLevelsStateResult.value);
+  const creators = useRoomCreators(spaceId);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const canInvite = permissions.action('invite', mx.getSafeUserId());
+  const canInvite = permissions.action('invite', userId);
   const openSpaceSettings = useOpenSpaceSettings();
   const { navigateRoom } = useRoomNavigate();
 
@@ -106,20 +115,21 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
 
   const allChild = useSpaceChildren(
     allRoomsAtom,
-    room.roomId,
-    useRecursiveChildScopeFactory(mx, roomToParents)
+    spaceId,
+    useRecursiveChildScopeFactory(ct, roomToParents)
   );
-  const unread = useRoomsUnread(allChild, roomToUnreadAtom);
+  const roomToNotifications = useRoomsNotifications(allChild, roomToNotificationsAtom);
+  const notifications = useRoomsTotalNotifications(roomToNotifications);
 
   const handleMarkAsRead = () => {
-    allChild.forEach((childRoomId) => markAsRead(mx, childRoomId, hideActivity));
+    // allChild.forEach((childRoomId) => markAsRead(mx, childRoomId, hideActivity));
     requestClose();
   };
 
   const handleCopyLink = () => {
-    const roomIdOrAlias = getCanonicalAliasOrRoomId(mx, room.roomId);
-    const viaServers = isRoomAlias(roomIdOrAlias) ? undefined : getViaServers(room);
-    copyToClipboard(getMatrixToRoom(roomIdOrAlias, viaServers));
+    const alias = ct.roomToAlias.read.get(spaceId);
+    const viaServers = alias ? undefined : getViaServers(creators, powerLevels);
+    copyToClipboard(getMatrixToRoom(alias ?? spaceId, viaServers));
     requestClose();
   };
 
@@ -128,21 +138,21 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   };
 
   const handleRoomSettings = () => {
-    openSpaceSettings(room.roomId);
+    openSpaceSettings(spaceId);
     requestClose();
   };
 
   const handleOpenTimeline = () => {
-    navigateRoom(room.roomId);
+    navigateRoom(spaceId);
     requestClose();
   };
 
   return (
     <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
-        {invitePrompt && room && (
+        {invitePrompt && (
           <InviteUserPrompt
-            room={room}
+            roomId={spaceId}
             requestClose={() => {
               setInvitePrompt(false);
               requestClose();
@@ -154,7 +164,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
           size="300"
           after={<Icon size="100" src={Icons.CheckTwice} />}
           radii="300"
-          disabled={!unread}
+          disabled={!notifications || notifications.count === 0}
         >
           <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
             Mark as Read
@@ -230,7 +240,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
               </MenuItem>
               {promptLeave && (
                 <LeaveSpacePrompt
-                  roomId={room.roomId}
+                  roomId={spaceId}
                   onDone={requestClose}
                   onCancel={() => setPromptLeave(false)}
                 />
@@ -243,15 +253,15 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ room, requestClo
   );
 });
 
-function SpaceHeader() {
-  const space = useSpace();
-  const spaceName = useRoomName(space);
+type SpaceHeaderProps = {
+  spaceName: string;
+};
+function SpaceHeader({ spaceName }: SpaceHeaderProps) {
+  const ct = useClient();
+  const spaceId = useSpace();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
-
-  const joinRules = useStateEvent(
-    space,
-    StateEvent.RoomJoinRules
-  )?.getContent<RoomJoinRulesEventContent>();
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
+  const joinRule = roomToJoinRule.get(spaceId);
 
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
     const cords = evt.currentTarget.getBoundingClientRect();
@@ -269,7 +279,7 @@ function SpaceHeader() {
             <Text size="H4" truncate>
               {spaceName}
             </Text>
-            {joinRules?.join_rule !== JoinRule.Public && <Icon src={Icons.Lock} size="50" />}
+            {joinRule !== 'public' && <Icon src={Icons.Lock} size="50" />}
           </Box>
           <Box shrink="No">
             <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>
@@ -296,7 +306,7 @@ function SpaceHeader() {
                 escapeDeactivates: stopPropagation,
               }}
             >
-              <SpaceMenu room={space} requestClose={() => setMenuAnchor(undefined)} />
+              <SpaceMenu requestClose={() => setMenuAnchor(undefined)} />
             </FocusTrap>
           }
         />
@@ -307,23 +317,35 @@ function SpaceHeader() {
 
 type SpaceTombstoneProps = { roomId: string; replacementRoomId: string };
 export function SpaceTombstone({ roomId, replacementRoomId }: SpaceTombstoneProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const { navigateSpace } = useRoomNavigate();
+  const allJoinedRooms = useAllJoinedRoomsSet();
 
-  const [joinState, handleJoin] = useAsyncCallback(
-    useCallback(() => {
-      const currentRoom = mx.getRoom(roomId);
-      const via = currentRoom ? getViaServers(currentRoom) : [];
-      return mx.joinRoom(replacementRoomId, {
-        viaServers: via,
-      });
-    }, [mx, roomId, replacementRoomId])
+  const [joinState, handleJoin] = useAsyncCallback<PostJoinOK, Error, []>(
+    useCallback(async () => {
+      const tombstoneEvent = await ct.storage.joinRoomState.read.get(
+        getJoinRoomStateId(roomId, StateEventType.RoomTombstone, '')
+      );
+      const sender = tombstoneEvent?.event.sender;
+      const senderServer = sender && getMxIdServer(sender);
+      const via = senderServer ? [senderServer] : undefined;
+      const response = await ct.requestAuthJSON(
+        postJoin({
+          pathParams: { roomIdOrAlias: replacementRoomId },
+          searchParams: { via, server_name: via },
+        })
+      );
+
+      const [err, result] = await parseMatrixResp<PostJoinOK>(response);
+      if (err) {
+        throw new Error(printMatrixError(err));
+      }
+      return result;
+    }, [ct, roomId, replacementRoomId])
   );
-  const replacementRoom = mx.getRoom(replacementRoomId);
 
   const handleOpen = () => {
-    if (replacementRoom) navigateSpace(replacementRoom.roomId);
-    if (joinState.status === AsyncStatus.Success) navigateSpace(joinState.data.roomId);
+    navigateSpace(replacementRoomId);
   };
 
   return (
@@ -347,8 +369,7 @@ export function SpaceTombstone({ roomId, replacementRoomId }: SpaceTombstoneProp
         )}
       </Box>
       <Box direction="Column" shrink="No">
-        {replacementRoom?.getMyMembership() === Membership.Join ||
-        joinState.status === AsyncStatus.Success ? (
+        {allJoinedRooms.has(replacementRoomId) || joinState.status === AsyncStatus.Success ? (
           <Button onClick={handleOpen} size="300" variant="Success" fill="Solid" radii="300">
             <Text size="B300">Open New Space</Text>
           </Button>
@@ -375,18 +396,19 @@ export function SpaceTombstone({ roomId, replacementRoomId }: SpaceTombstoneProp
 }
 
 export function Space() {
-  const mx = useMatrixClient();
-  const space = useSpace();
-  useNavToActivePathMapper(space.roomId);
-  const spaceIdOrAlias = getCanonicalAliasOrRoomId(mx, space.roomId);
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const mDirects = useAtomValue(mDirectAtom);
-  const roomToUnread = useAtomValue(roomToUnreadAtom);
-  const allRooms = useAtomValue(allRoomsAtom);
-  const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
-  const notificationPreferences = useRoomsNotificationPreferencesContext();
+  const ct = useClient();
+  const spaceId = useSpace();
+  useNavToActivePathMapper(spaceId);
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+  const roomToAlias = useObservableValue(ct.roomToAlias);
+  const roomToReplacement = useObservableValue(ct.roomToReplacement);
+  const replacementRoomId = roomToReplacement.get(spaceId);
 
-  const tombstoneEvent = useStateEvent(space, StateEvent.RoomTombstone);
+  const spaceIdOrAlias = roomToAlias.get(spaceId) ?? spaceId;
+  const scrollRef = useRef<HTMLDivElement>(null);
+
+  const mDirects = useAtomValue(mDirectAtom);
+  const notificationPreferences = useRoomsNotificationPreferencesContext();
 
   const selectedRoomId = useSelectedRoom();
   const lobbySelected = useSpaceLobbySelected(spaceIdOrAlias);
@@ -394,35 +416,14 @@ export function Space() {
 
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
-  const getRoom = useCallback(
-    (rId: string) => {
-      if (allJoinedRooms.has(rId)) {
-        return mx.getRoom(rId) ?? undefined;
-      }
-      return undefined;
-    },
-    [mx, allJoinedRooms]
-  );
+  const hierarchy = useSpaceJoinedHierarchy(spaceId);
 
-  const hierarchy = useSpaceJoinedHierarchy(
-    space.roomId,
-    getRoom,
-    useCallback(
-      (parentId, roomId) => {
-        if (!closedCategories.has(makeNavCategoryId(space.roomId, parentId))) {
-          return false;
-        }
-        const showRoom = roomToUnread.has(roomId) || roomId === selectedRoomId;
-        if (showRoom) return false;
-        return true;
-      },
-      [space.roomId, closedCategories, roomToUnread, selectedRoomId]
-    ),
-    useCallback(
-      (sId) => closedCategories.has(makeNavCategoryId(space.roomId, sId)),
-      [closedCategories, space.roomId]
-    )
-  );
+  const rooms = useMemo(() => hierarchy.map((item) => item.roomId), [hierarchy]);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(rooms);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
+  const roomToNotifications = useRoomsNotifications(rooms, roomToNotificationsAtom);
 
   const virtualizer = useVirtualizer({
     count: hierarchy.length,
@@ -436,22 +437,19 @@ export function Space() {
   );
 
   const getToLink = (roomId: string) =>
-    getSpaceRoomPath(spaceIdOrAlias, getCanonicalAliasOrRoomId(mx, roomId));
+    getSpaceRoomPath(spaceIdOrAlias, roomToAlias.get(roomId) ?? roomId);
 
   return (
     <PageNav>
-      <SpaceHeader />
+      <SpaceHeader spaceName={getRoomName(spaceId) ?? 'Unknown'} />
       <PageNavContent scrollRef={scrollRef}>
         <Box direction="Column" gap="300">
-          {tombstoneEvent && (
-            <SpaceTombstone
-              roomId={space.roomId}
-              replacementRoomId={tombstoneEvent.getContent().replacement_room}
-            />
+          {replacementRoomId && (
+            <SpaceTombstone roomId={spaceId} replacementRoomId={replacementRoomId} />
           )}
           <NavCategory>
             <NavItem variant="Background" radii="400" aria-selected={lobbySelected}>
-              <NavLink to={getSpaceLobbyPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>
+              <NavLink to={getSpaceLobbyPath(spaceIdOrAlias)}>
                 <NavItemContent>
                   <Box as="span" grow="Yes" alignItems="Center" gap="200">
                     <Avatar size="200" radii="400">
@@ -467,7 +465,7 @@ export function Space() {
               </NavLink>
             </NavItem>
             <NavItem variant="Background" radii="400" aria-selected={searchSelected}>
-              <NavLink to={getSpaceSearchPath(getCanonicalAliasOrRoomId(mx, space.roomId))}>
+              <NavLink to={getSpaceSearchPath(spaceIdOrAlias)}>
                 <NavItemContent>
                   <Box as="span" grow="Yes" alignItems="Center" gap="200">
                     <Avatar size="200" radii="400">
@@ -490,12 +488,12 @@ export function Space() {
             }}
           >
             {virtualizer.getVirtualItems().map((vItem) => {
-              const { roomId } = hierarchy[vItem.index] ?? {};
-              const room = mx.getRoom(roomId);
-              if (!room) return null;
+              const item = hierarchy[vItem.index] ?? {};
+              if (!item) return null;
+              const { roomId } = item;
 
-              if (room.isSpaceRoom()) {
-                const categoryId = makeNavCategoryId(space.roomId, roomId);
+              if (spaceRooms.has(roomId)) {
+                const categoryId = makeNavCategoryId(spaceId, roomId);
 
                 return (
                   <VirtualTile
@@ -510,7 +508,7 @@ export function Space() {
                           onClick={handleCategoryClick}
                           closed={closedCategories.has(categoryId)}
                         >
-                          {roomId === space.roomId ? 'Rooms' : room?.name}
+                          {roomId === spaceId ? 'Rooms' : getRoomName(roomId) ?? 'Unknown'}
                         </RoomNavCategoryButton>
                       </NavCategoryHeader>
                     </div>
@@ -518,15 +516,21 @@ export function Space() {
                 );
               }
 
+              // TODO: closedCategories.has(makeNavCategoryId(spaceId, parentId)
+              const n = roomToNotifications.get(roomId);
+              const notifications = n && getRoomTotalNotifications(n);
               return (
                 <VirtualTile virtualItem={vItem} key={vItem.index} ref={virtualizer.measureElement}>
                   <RoomNavItem
-                    room={room}
+                    roomId={roomId}
+                    roomName={getRoomName(roomId) ?? 'Unknown'}
+                    avatarUrl={getRoomAvatar(roomId)}
                     selected={selectedRoomId === roomId}
                     showAvatar={mDirects.has(roomId)}
-                    direct={mDirects.has(roomId)}
+                    joinRule={roomToJoinRule.get(roomId)}
                     linkPath={getToLink(roomId)}
-                    notificationMode={getRoomNotificationMode(notificationPreferences, room.roomId)}
+                    notificationMode={getRoomNotificationMode(notificationPreferences, roomId)}
+                    notifications={notifications}
                   />
                 </VirtualTile>
               );
diff --git a/src/app/pages/client/space/SpaceProvider.tsx b/src/app/pages/client/space/SpaceProvider.tsx
index 2e0f79a2..70a8c740 100644
--- a/src/app/pages/client/space/SpaceProvider.tsx
+++ b/src/app/pages/client/space/SpaceProvider.tsx
@@ -1,32 +1,30 @@
 import React, { ReactNode } from 'react';
 import { useParams } from 'react-router-dom';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useSpaces } from '../../../state/hooks/roomList';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { useSelectedSpace } from '../../../hooks/router/useSelectedSpace';
 import { SpaceProvider } from '../../../hooks/useSpace';
 import { JoinBeforeNavigate } from '../../../features/join-before-navigate';
 import { useSearchParamsViaServers } from '../../../hooks/router/useSearchParamsViaServers';
+import { useClient } from '../../../hooks/useClient';
 
 type RouteSpaceProviderProps = {
   children: ReactNode;
 };
 export function RouteSpaceProvider({ children }: RouteSpaceProviderProps) {
-  const mx = useMatrixClient();
-  const joinedSpaces = useSpaces(mx, allRoomsAtom);
+  const ct = useClient();
+  const joinedSpaces = useSpaces(ct, allRoomsAtom);
+  const selectedSpaceId = useSelectedSpace();
 
   const { spaceIdOrAlias } = useParams();
   const viaServers = useSearchParamsViaServers();
 
-  const selectedSpaceId = useSelectedSpace();
-  const space = mx.getRoom(selectedSpaceId);
-
-  if (!space || !joinedSpaces.includes(space.roomId)) {
+  if (!selectedSpaceId || !joinedSpaces.includes(selectedSpaceId)) {
     return <JoinBeforeNavigate roomIdOrAlias={spaceIdOrAlias ?? ''} viaServers={viaServers} />;
   }
 
   return (
-    <SpaceProvider key={space.roomId} value={space}>
+    <SpaceProvider key={selectedSpaceId} value={selectedSpaceId}>
       {children}
     </SpaceProvider>
   );
diff --git a/src/app/plugins/custom-emoji/ImagePack.ts b/src/app/plugins/custom-emoji/ImagePack.ts
index 1685362e..7d8714f2 100644
--- a/src/app/plugins/custom-emoji/ImagePack.ts
+++ b/src/app/plugins/custom-emoji/ImagePack.ts
@@ -1,4 +1,4 @@
-import { MatrixEvent } from 'matrix-js-sdk';
+import { AccountDataEvent, StateEventWithoutRoomId } from 'neurone/lib/api/types';
 import { PackAddress } from './PackAddress';
 import { PackImageReader } from './PackImageReader';
 import { PackImagesReader } from './PackImagesReader';
@@ -31,16 +31,15 @@ export class ImagePack {
     this.images = new PackImagesReader(content.images ?? {});
   }
 
-  static fromMatrixEvent(id: string, matrixEvent: MatrixEvent) {
-    const roomId = matrixEvent.getRoomId();
-    const stateKey = matrixEvent.getStateKey();
+  static fromAccountData(userId: string, accountDataEvent: AccountDataEvent) {
+    const imagePack: ImagePack = new ImagePack(userId, accountDataEvent.content, undefined);
 
-    const address =
-      roomId && typeof stateKey === 'string' ? new PackAddress(roomId, stateKey) : undefined;
+    return imagePack;
+  }
 
-    const content = matrixEvent.getContent<PackContent>();
-
-    const imagePack: ImagePack = new ImagePack(id, content, address);
+  static fromStateEvent(roomId: string, stateEvent: StateEventWithoutRoomId) {
+    const address = new PackAddress(roomId, stateEvent.state_key);
+    const imagePack: ImagePack = new ImagePack(stateEvent.event_id, stateEvent.content, address);
 
     return imagePack;
   }
diff --git a/src/app/plugins/custom-emoji/utils.ts b/src/app/plugins/custom-emoji/utils.ts
index cb80bb1c..987b602f 100644
--- a/src/app/plugins/custom-emoji/utils.ts
+++ b/src/app/plugins/custom-emoji/utils.ts
@@ -1,9 +1,4 @@
-import { MatrixClient, MatrixEvent, Room } from 'matrix-js-sdk';
-import { ImagePack } from './ImagePack';
-import { EmoteRoomsContent, ImageUsage } from './types';
-import { StateEvent } from '../../../types/matrix/room';
-import { getAccountData, getStateEvent, getStateEvents } from '../../utils/room';
-import { AccountDataEvent } from '../../../types/matrix/accountData';
+import { ImageUsage } from './types';
 import { PackMetaReader } from './PackMetaReader';
 import { PackAddress } from './PackAddress';
 
@@ -26,63 +21,29 @@ export function packMetaEqual(a: PackMetaReader, b: PackMetaReader): boolean {
   );
 }
 
-export function makeImagePacks(packEvents: MatrixEvent[]): ImagePack[] {
-  return packEvents.reduce<ImagePack[]>((imagePacks, packEvent) => {
-    const packId = packEvent.getId();
-    if (!packId) return imagePacks;
-    imagePacks.push(ImagePack.fromMatrixEvent(packId, packEvent));
-    return imagePacks;
-  }, []);
-}
+export function getGlobalPackRoomToStateKey(content?: object): Record<string, string[]> {
+  if (typeof content !== 'object') return {};
 
-export function getRoomImagePack(room: Room, stateKey: string): ImagePack | undefined {
-  const packEvent = getStateEvent(room, StateEvent.PoniesRoomEmotes, stateKey);
-  if (!packEvent) return undefined;
-  const packId = packEvent.getId();
-  if (!packId) return undefined;
-  return ImagePack.fromMatrixEvent(packId, packEvent);
-}
+  if (!('rooms' in content) || typeof content.rooms !== 'object' || content.rooms === null)
+    return {};
 
-export function getRoomImagePacks(room: Room): ImagePack[] {
-  const packEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
-  return makeImagePacks(packEvents);
-}
+  const { rooms } = content;
+  const rToKeys: Record<string, string[]> = {};
 
-export function getGlobalImagePacks(mx: MatrixClient): ImagePack[] {
-  const emoteRoomsContent = getAccountData(mx, AccountDataEvent.PoniesEmoteRooms)?.getContent() as
-    | EmoteRoomsContent
-    | undefined;
-  if (typeof emoteRoomsContent !== 'object') return [];
+  Object.keys(rooms).forEach((roomId) => {
+    const keys = rToKeys[roomId] ?? [];
 
-  const { rooms: roomIdToPackInfo } = emoteRoomsContent;
-  if (typeof roomIdToPackInfo !== 'object') return [];
+    const stateKeys = (rooms as Record<string, unknown>)[roomId];
+    if (typeof stateKeys !== 'object' || stateKeys === null) return;
 
-  const roomIds = Object.keys(roomIdToPackInfo);
-
-  const packs = roomIds.flatMap((roomId) => {
-    if (typeof roomIdToPackInfo[roomId] !== 'object') return [];
-    const room = mx.getRoom(roomId);
-    if (!room) return [];
-    const packStateKeyToUnknown = roomIdToPackInfo[roomId];
-    const packEvents = getStateEvents(room, StateEvent.PoniesRoomEmotes);
-    const globalPackEvents = packEvents.filter((mE) => {
-      const stateKey = mE.getStateKey();
-      if (typeof stateKey === 'string') return !!packStateKeyToUnknown[stateKey];
-      return false;
+    Object.keys(stateKeys).forEach((stateKey) => {
+      const result = (stateKeys as Record<string, unknown>)[stateKey];
+      if (typeof result !== 'object' || result === null) return;
+      keys.push(stateKey);
     });
-    return makeImagePacks(globalPackEvents);
+
+    rToKeys[roomId] = keys;
   });
 
-  return packs;
-}
-
-export function getUserImagePack(mx: MatrixClient): ImagePack | undefined {
-  const packEvent = getAccountData(mx, AccountDataEvent.PoniesUserEmotes);
-  const userId = mx.getUserId();
-  if (!packEvent || !userId) {
-    return undefined;
-  }
-
-  const userImagePack = ImagePack.fromMatrixEvent(userId, packEvent);
-  return userImagePack;
+  return rToKeys;
 }
diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx
index ba40c978..a6c18231 100644
--- a/src/app/plugins/react-custom-html-parser.tsx
+++ b/src/app/plugins/react-custom-html-parser.tsx
@@ -14,7 +14,6 @@ import {
   attributesToProps,
   domToReact,
 } from 'html-react-parser';
-import { MatrixClient } from 'matrix-js-sdk';
 import classNames from 'classnames';
 import { Box, Chip, config, Header, Icon, IconButton, Icons, Scroll, Text, toRem } from 'folds';
 import { IntermediateRepresentation, Opts as LinkifyOpts, OptFn } from 'linkifyjs';
@@ -22,13 +21,7 @@ import Linkify from 'linkify-react';
 import { ErrorBoundary } from 'react-error-boundary';
 import { ChildNode } from 'domhandler';
 import * as css from '../styles/CustomHtml.css';
-import {
-  getMxIdLocalPart,
-  getCanonicalAliasRoomId,
-  isRoomAlias,
-  mxcUrlToHttp,
-} from '../utils/matrix';
-import { getMemberDisplayName } from '../utils/room';
+import { isRoomAlias } from '../utils/matrix';
 import { EMOJI_PATTERN, sanitizeForRegex, URL_NEG_LB } from '../utils/regex';
 import { getHexcodeForEmoji, getShortcodeFor } from './emoji';
 import { findAndReplace } from '../utils/findAndReplace';
@@ -41,6 +34,10 @@ import {
 import { onEnterOrSpace } from '../utils/keyboard';
 import { copyToClipboard, tryDecodeURIComponent } from '../utils/dom';
 import { useTimeoutToggle } from '../hooks/useTimeoutToggle';
+import { ClientContext } from '../../client/context';
+import { GetRoomMemberNameCallback } from '../hooks/useRoomMembers';
+import { GetRoomNameCallback } from '../hooks/storage/useGetRoomName';
+import { mxcToHttp } from '../../client/mxcToHttp';
 
 const ReactPrism = lazy(() => import('./react-prism/ReactPrism'));
 
@@ -72,25 +69,23 @@ export const makeMentionCustomProps = (
 });
 
 export const renderMatrixMention = (
-  mx: MatrixClient,
+  ct: ClientContext,
   currentRoomId: string | undefined,
   href: string,
-  customProps: ComponentPropsWithoutRef<'a'>
+  customProps: ComponentPropsWithoutRef<'a'>,
+  getMemberName: GetRoomMemberNameCallback,
+  getRoomName: GetRoomNameCallback
 ) => {
   const userId = parseMatrixToUser(href);
   if (userId) {
-    const currentRoom = mx.getRoom(currentRoomId);
-
     return (
       <a
         href={href}
         {...customProps}
-        className={css.Mention({ highlight: mx.getUserId() === userId })}
+        className={css.Mention({ highlight: ct.session.userId === userId })}
         data-mention-id={userId}
       >
-        {`@${
-          (currentRoom && getMemberDisplayName(currentRoom, userId)) ?? getMxIdLocalPart(userId)
-        }`}
+        {`@${getMemberName(userId)}`}
       </a>
     );
   }
@@ -98,20 +93,21 @@ export const renderMatrixMention = (
   const matrixToRoom = parseMatrixToRoom(href);
   if (matrixToRoom) {
     const { roomIdOrAlias, viaServers } = matrixToRoom;
-    const mentionRoom = mx.getRoom(
-      isRoomAlias(roomIdOrAlias) ? getCanonicalAliasRoomId(mx, roomIdOrAlias) : roomIdOrAlias
-    );
 
-    const fallbackContent = mentionRoom ? `#${mentionRoom.name}` : roomIdOrAlias;
+    const mentionRoomId = isRoomAlias(roomIdOrAlias)
+      ? ct.rooms.join.read.find((roomId) => ct.roomToAlias.read.get(roomId) === roomIdOrAlias)
+      : undefined;
+
+    const fallbackContent = mentionRoomId ? `#${getRoomName(mentionRoomId)}` : roomIdOrAlias;
 
     return (
       <a
         href={href}
         {...customProps}
         className={css.Mention({
-          highlight: currentRoomId === (mentionRoom?.roomId ?? roomIdOrAlias),
+          highlight: currentRoomId === (mentionRoomId ?? roomIdOrAlias),
         })}
-        data-mention-id={mentionRoom?.roomId ?? roomIdOrAlias}
+        data-mention-id={mentionRoomId ?? roomIdOrAlias}
         data-mention-via={viaServers?.join(',')}
       >
         {customProps.children ? customProps.children : fallbackContent}
@@ -122,24 +118,24 @@ export const renderMatrixMention = (
   const matrixToRoomEvent = parseMatrixToRoomEvent(href);
   if (matrixToRoomEvent) {
     const { roomIdOrAlias, eventId, viaServers } = matrixToRoomEvent;
-    const mentionRoom = mx.getRoom(
-      isRoomAlias(roomIdOrAlias) ? getCanonicalAliasRoomId(mx, roomIdOrAlias) : roomIdOrAlias
-    );
+    const mentionRoomId = isRoomAlias(roomIdOrAlias)
+      ? ct.rooms.join.read.find((roomId) => ct.roomToAlias.read.get(roomId) === roomIdOrAlias)
+      : undefined;
 
     return (
       <a
         href={href}
         {...customProps}
         className={css.Mention({
-          highlight: currentRoomId === (mentionRoom?.roomId ?? roomIdOrAlias),
+          highlight: currentRoomId === (mentionRoomId ?? roomIdOrAlias),
         })}
-        data-mention-id={mentionRoom?.roomId ?? roomIdOrAlias}
+        data-mention-id={mentionRoomId ?? roomIdOrAlias}
         data-mention-event-id={eventId}
         data-mention-via={viaServers?.join(',')}
       >
         {customProps.children
           ? customProps.children
-          : `Message: ${mentionRoom ? `#${mentionRoom.name}` : roomIdOrAlias}`}
+          : `Message: ${mentionRoomId ? `#${getRoomName(mentionRoomId)}` : roomIdOrAlias}`}
       </a>
     );
   }
@@ -310,7 +306,7 @@ export function CodeBlock({
 }
 
 export const getReactCustomHtmlParser = (
-  mx: MatrixClient,
+  ct: ClientContext,
   roomId: string | undefined,
   params: {
     linkifyOpts: LinkifyOpts;
@@ -318,6 +314,8 @@ export const getReactCustomHtmlParser = (
     handleSpoilerClick?: ReactEventHandler<HTMLElement>;
     handleMentionClick?: ReactEventHandler<HTMLElement>;
     useAuthentication?: boolean;
+    getMemberName: GetRoomMemberNameCallback;
+    getRoomName: GetRoomNameCallback;
   }
 ): HTMLReactParserOptions => {
   const opts: HTMLReactParserOptions = {
@@ -446,10 +444,12 @@ export const getReactCustomHtmlParser = (
             : children.map((c) => (c instanceof DOMText ? c.data : '')).join();
 
           const mention = renderMatrixMention(
-            mx,
+            ct,
             roomId,
             tryDecodeURIComponent(props.href),
-            makeMentionCustomProps(params.handleMentionClick, content)
+            makeMentionCustomProps(params.handleMentionClick, content),
+            params.getMemberName,
+            params.getRoomName
           );
 
           if (mention) return mention;
@@ -473,7 +473,7 @@ export const getReactCustomHtmlParser = (
         }
 
         if (name === 'img') {
-          const htmlSrc = mxcUrlToHttp(mx, props.src, params.useAuthentication);
+          const htmlSrc = mxcToHttp(ct.session.baseUrl, props.src, params.useAuthentication).url();
           if (htmlSrc && props.src.startsWith('mxc://') === false) {
             return (
               <a href={htmlSrc} target="_blank" rel="noreferrer noopener">
diff --git a/src/app/plugins/recent-emoji.ts b/src/app/plugins/recent-emoji.ts
index 3634538f..d20f848b 100644
--- a/src/app/plugins/recent-emoji.ts
+++ b/src/app/plugins/recent-emoji.ts
@@ -1,22 +1,32 @@
-import { MatrixClient } from 'matrix-js-sdk';
-import { getAccountData } from '../utils/room';
+import { AccountDataEvent } from 'neurone/lib/api/types';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
 import { IEmoji, emojis } from './emoji';
-import { AccountDataEvent } from '../../types/matrix/accountData';
+import { ClientContext } from '../../client/context';
+import { AccountDataType } from '../../types/matrix/accountData';
 
 type EmojiUnicode = string;
 type EmojiUsageCount = number;
 
 export type IRecentEmojiContent = {
-  recent_emoji?: [EmojiUnicode, EmojiUsageCount][];
+  recent_emoji?: Array<[EmojiUnicode, EmojiUsageCount]>;
 };
 
-export const getRecentEmojis = (mx: MatrixClient, limit?: number): IEmoji[] => {
-  const recentEmojiEvent = getAccountData(mx, AccountDataEvent.ElementRecentEmoji);
-  const recentEmoji = recentEmojiEvent?.getContent<IRecentEmojiContent>().recent_emoji;
+const parseRecentEmojis = (content: object): Array<[EmojiUnicode, EmojiUsageCount]> => {
+  if (!('recent_emoji' in content)) return [];
+  const { recent_emoji: recentEmoji } = content;
   if (!Array.isArray(recentEmoji)) return [];
 
+  return recentEmoji.filter(
+    (i) =>
+      Array.isArray(i) && i.length === 2 && typeof i[0] === 'string' && typeof i[1] === 'number'
+  );
+};
+
+export const getRecentEmojis = (event: AccountDataEvent, limit?: number): IEmoji[] => {
+  const recentEmoji = parseRecentEmojis(event.content);
+
   return recentEmoji
-    .sort((e1, e2) => e2[1] - e1[1])
+    .sort((i1, i2) => i2[1] - i1[1])
     .slice(0, limit)
     .reduce<IEmoji[]>((list, [unicode]) => {
       const emoji = emojis.find((e) => e.unicode === unicode);
@@ -25,9 +35,9 @@ export const getRecentEmojis = (mx: MatrixClient, limit?: number): IEmoji[] => {
     }, []);
 };
 
-export function addRecentEmoji(mx: MatrixClient, unicode: string) {
-  const recentEmojiEvent = getAccountData(mx, AccountDataEvent.ElementRecentEmoji);
-  const recentEmoji = recentEmojiEvent?.getContent<IRecentEmojiContent>().recent_emoji ?? [];
+export async function addRecentEmoji(ct: ClientContext, unicode: string) {
+  const recentEmojiObj = await ct.storage.accountData.read.get(AccountDataType.ElementRecentEmoji);
+  const recentEmoji = parseRecentEmojis(recentEmojiObj?.event.content ?? {});
 
   const emojiIndex = recentEmoji.findIndex(([u]) => u === unicode);
   let entry: [EmojiUnicode, EmojiUsageCount];
@@ -38,7 +48,18 @@ export function addRecentEmoji(mx: MatrixClient, unicode: string) {
     entry[1] += 1;
   }
   recentEmoji.unshift(entry);
-  mx.setAccountData(AccountDataEvent.ElementRecentEmoji, {
+
+  const newContent: IRecentEmojiContent = {
     recent_emoji: recentEmoji.slice(0, 100),
-  });
+  };
+
+  await ct.requestAuthJSON(
+    putAccountData({
+      pathParams: {
+        userId: ct.session.userId,
+        type: AccountDataType.ElementRecentEmoji,
+      },
+      body: newContent,
+    })
+  );
 }
diff --git a/src/app/plugins/via-servers.ts b/src/app/plugins/via-servers.ts
index d825a1fd..bbd35746 100644
--- a/src/app/plugins/via-servers.ts
+++ b/src/app/plugins/via-servers.ts
@@ -1,73 +1,52 @@
-import { Room } from 'matrix-js-sdk';
-import { IPowerLevels } from '../hooks/usePowerLevels';
-import { creatorsSupported, getMxIdServer } from '../utils/matrix';
-import { IRoomCreateContent, StateEvent } from '../../types/matrix/room';
-import { getStateEvent } from '../utils/room';
+import { IPowerLevels, readPowerLevel } from '../hooks/usePowerLevels';
+import { getMxIdServer } from '../utils/matrix';
 
-export const getViaServers = (room: Room): string[] => {
-  const getHighestPowerUserId = (): string | undefined => {
-    const creatorEvent = getStateEvent(room, StateEvent.RoomCreate);
-    if (
-      creatorEvent &&
-      creatorsSupported(creatorEvent.getContent<IRoomCreateContent>().room_version)
-    ) {
-      return creatorEvent.getSender();
+export const getViaServers = (
+  creators?: Set<string>,
+  powerLevels?: IPowerLevels,
+  users?: string[]
+): string[] => {
+  const servers = new Set<string>();
+
+  Array.from(creators ?? new Set<string>()).forEach((creator) => {
+    if (powerLevels?.users?.[creator] === undefined) {
+      const server = getMxIdServer(creator);
+      if (server) servers.add(server);
     }
+  });
 
-    const powerLevels = getStateEvent(room, StateEvent.RoomPowerLevels)?.getContent<IPowerLevels>();
-
-    if (!powerLevels) return undefined;
-    const userIdToPower = powerLevels.users;
-    if (!userIdToPower) return undefined;
-    let powerUserId: string | undefined;
-
-    Object.keys(userIdToPower).forEach((userId) => {
-      if (userIdToPower[userId] <= (powerLevels.users_default ?? 0)) return;
-
-      if (!powerUserId) {
-        powerUserId = userId;
-        return;
-      }
-      if (userIdToPower[userId] > userIdToPower[powerUserId]) {
-        powerUserId = userId;
-      }
-    });
-    return powerUserId;
-  };
-
-  const getServerToPopulation = (): Record<string, number> => {
-    const members = room.getMembers();
-    const serverToPop: Record<string, number> = {};
-
-    members?.forEach((member) => {
-      const { userId } = member;
-      const server = getMxIdServer(userId);
-      if (!server) return;
-      const serverPop = serverToPop[server];
-      if (serverPop === undefined) {
-        serverToPop[server] = 1;
-        return;
-      }
-      serverToPop[server] = serverPop + 1;
+  const getTwoPopularServers = (us: string[]) => {
+    const serverToMemberCount = new Map<string, number>();
+    us.forEach((user) => {
+      const server = getMxIdServer(user);
+      if (server === undefined) return;
+      const count = serverToMemberCount.get(server) ?? 0;
+      serverToMemberCount.set(server, count + 1);
     });
 
-    return serverToPop;
+    const sortedUsers = Array.from(serverToMemberCount.keys()).sort((s1, s2) => {
+      const c1 = serverToMemberCount.get(s1) ?? 0;
+      const c2 = serverToMemberCount.get(s2) ?? 0;
+
+      return c2 - c1;
+    });
+
+    return sortedUsers.slice(0, 2);
   };
 
-  const via: string[] = [];
-  const userId = getHighestPowerUserId();
-  if (userId) {
-    const server = getMxIdServer(userId);
-    if (server) via.push(server);
+  if (powerLevels && powerLevels.users) {
+    const userDefaultPower = readPowerLevel.user(powerLevels, undefined);
+
+    const powerUsers = Object.keys(powerLevels.users).filter(
+      (userId) => readPowerLevel.user(powerLevels, userId) > userDefaultPower
+    );
+
+    getTwoPopularServers(powerUsers).forEach((server) => servers.add(server));
   }
-  const serverToPop = getServerToPopulation();
-  const sortedServers = Object.keys(serverToPop).sort(
-    (svrA, svrB) => serverToPop[svrB] - serverToPop[svrA]
-  );
-  const mostPop3 = sortedServers.slice(0, 3);
-  if (via.length === 0) return mostPop3;
-  if (mostPop3.includes(via[0])) {
-    mostPop3.splice(mostPop3.indexOf(via[0]), 1);
+
+  if (users) {
+    getTwoPopularServers(users).forEach((server) => servers.add(server));
   }
-  return via.concat(mostPop3.slice(0, 2));
+
+  return Array.from(servers).slice(0, 3);
 };
diff --git a/src/app/state/hooks/roomList.ts b/src/app/state/hooks/roomList.ts
index d64ecd5b..916b8b34 100644
--- a/src/app/state/hooks/roomList.ts
+++ b/src/app/state/hooks/roomList.ts
@@ -1,114 +1,132 @@
 import { Atom, useAtomValue } from 'jotai';
 import { selectAtom } from 'jotai/utils';
-import { MatrixClient } from 'matrix-js-sdk';
 import { useCallback, useMemo } from 'react';
-import { getAllParents, isRoom, isSpace, isUnsupportedRoom } from '../../utils/room';
+import { getAllParents } from '../../utils/room';
 import { compareRoomsEqual } from '../room-list/utils';
 import { RoomToParents } from '../../../types/matrix/room';
+import { ClientContext } from '../../../client/context';
+import { useObservableValue } from '../../hooks/useObservableValue';
 
-export type RoomsAtom = Atom<string[]>;
-export type RoomSelector = (roomId: string) => boolean | undefined;
+type RoomsAtom = Atom<string[]>;
+type RoomSelector = (roomId: string) => boolean | undefined;
 
-export const selectedRoomsAtom = (
+const selectedRoomsAtom = (
   roomsAtom: RoomsAtom,
   selector: (roomId: string) => boolean | undefined
 ) => selectAtom(roomsAtom, (rooms) => rooms.filter(selector), compareRoomsEqual);
 
-export const useSelectedRooms = (roomsAtom: RoomsAtom, selector: RoomSelector) => {
+const useSelectedRooms = (roomsAtom: RoomsAtom, selector: RoomSelector) => {
   const anAtom = useMemo(() => selectedRoomsAtom(roomsAtom, selector), [roomsAtom, selector]);
 
   return useAtomValue(anAtom);
 };
 
-export type SpaceChildSelectorFactory = (parentId: string) => RoomSelector;
+type SpaceChildSelectorFactory = (parentId: string) => RoomSelector;
 
 export const useRecursiveChildScopeFactory = (
-  mx: MatrixClient,
+  ct: ClientContext,
   roomToParents: RoomToParents
-): SpaceChildSelectorFactory =>
-  useCallback(
+): SpaceChildSelectorFactory => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
+  return useCallback(
     (parentId: string) => (roomId) =>
-      isRoom(mx.getRoom(roomId)) &&
+      !spaceRooms.has(roomId) &&
       roomToParents.has(roomId) &&
       getAllParents(roomToParents, roomId).has(parentId),
-    [mx, roomToParents]
+    [spaceRooms, roomToParents]
   );
+};
 
 export const useChildSpaceScopeFactory = (
-  mx: MatrixClient,
+  ct: ClientContext,
   roomToParents: RoomToParents
-): SpaceChildSelectorFactory =>
-  useCallback(
+): SpaceChildSelectorFactory => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
+  return useCallback(
     (parentId: string) => (roomId) =>
-      isSpace(mx.getRoom(roomId)) && roomToParents.get(roomId)?.has(parentId),
-    [mx, roomToParents]
+      spaceRooms.has(roomId) && roomToParents.get(roomId)?.has(parentId),
+    [spaceRooms, roomToParents]
   );
+};
 
 export const useRecursiveChildSpaceScopeFactory = (
-  mx: MatrixClient,
+  ct: ClientContext,
   roomToParents: RoomToParents
-): SpaceChildSelectorFactory =>
-  useCallback(
+): SpaceChildSelectorFactory => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
+  return useCallback(
     (parentId: string) => (roomId) =>
-      isSpace(mx.getRoom(roomId)) &&
+      spaceRooms.has(roomId) &&
       roomToParents.has(roomId) &&
       getAllParents(roomToParents, roomId).has(parentId),
-    [mx, roomToParents]
+    [spaceRooms, roomToParents]
   );
+};
 
 export const useChildRoomScopeFactory = (
-  mx: MatrixClient,
+  ct: ClientContext,
   mDirects: Set<string>,
   roomToParents: RoomToParents
-): SpaceChildSelectorFactory =>
-  useCallback(
+): SpaceChildSelectorFactory => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
+  return useCallback(
     (parentId: string) => (roomId) =>
-      isRoom(mx.getRoom(roomId)) &&
-      !mDirects.has(roomId) &&
-      roomToParents.get(roomId)?.has(parentId),
-    [mx, mDirects, roomToParents]
+      !spaceRooms.has(roomId) && !mDirects.has(roomId) && roomToParents.get(roomId)?.has(parentId),
+    [spaceRooms, mDirects, roomToParents]
   );
+};
 
 export const useRecursiveChildRoomScopeFactory = (
-  mx: MatrixClient,
+  ct: ClientContext,
   mDirects: Set<string>,
   roomToParents: RoomToParents
-): SpaceChildSelectorFactory =>
-  useCallback(
+): SpaceChildSelectorFactory => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
+  return useCallback(
     (parentId: string) => (roomId) =>
-      isRoom(mx.getRoom(roomId)) &&
+      !spaceRooms.has(roomId) &&
       !mDirects.has(roomId) &&
       roomToParents.has(roomId) &&
       getAllParents(roomToParents, roomId).has(parentId),
-    [mx, mDirects, roomToParents]
+    [spaceRooms, mDirects, roomToParents]
   );
+};
 
 export const useChildDirectScopeFactory = (
-  mx: MatrixClient,
+  ct: ClientContext,
   mDirects: Set<string>,
   roomToParents: RoomToParents
-): SpaceChildSelectorFactory =>
-  useCallback(
+): SpaceChildSelectorFactory => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
+  return useCallback(
     (parentId: string) => (roomId) =>
-      isRoom(mx.getRoom(roomId)) &&
-      mDirects.has(roomId) &&
-      roomToParents.get(roomId)?.has(parentId),
-    [mx, mDirects, roomToParents]
+      !spaceRooms.has(roomId) && mDirects.has(roomId) && roomToParents.get(roomId)?.has(parentId),
+    [spaceRooms, mDirects, roomToParents]
   );
+};
 
 export const useRecursiveChildDirectScopeFactory = (
-  mx: MatrixClient,
+  ct: ClientContext,
   mDirects: Set<string>,
   roomToParents: RoomToParents
-): SpaceChildSelectorFactory =>
-  useCallback(
+): SpaceChildSelectorFactory => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
+  return useCallback(
     (parentId: string) => (roomId) =>
-      isRoom(mx.getRoom(roomId)) &&
+      !spaceRooms.has(roomId) &&
       mDirects.has(roomId) &&
       roomToParents.has(roomId) &&
       getAllParents(roomToParents, roomId).has(parentId),
-    [mx, mDirects, roomToParents]
+    [spaceRooms, mDirects, roomToParents]
   );
+};
 
 export const useSpaceChildren = (
   roomsAtom: RoomsAtom,
@@ -122,56 +140,71 @@ export const useSpaceChildren = (
   return useSelectedRooms(roomsAtom, recursiveChildRoomSelector);
 };
 
-export const useSpaces = (mx: MatrixClient, roomsAtom: RoomsAtom) => {
-  const selector: RoomSelector = useCallback((roomId) => isSpace(mx.getRoom(roomId)), [mx]);
+export const useSpacesChildren = (
+  roomsAtom: RoomsAtom,
+  spaces: string[],
+  selectorFactory: SpaceChildSelectorFactory
+) => {
+  const recursiveChildRoomSelector = useMemo(() => {
+    const selector: RoomSelector = (roomId) =>
+      spaces.some((spaceId) => selectorFactory(spaceId)(roomId));
+    return selector;
+  }, [selectorFactory, spaces]);
+  return useSelectedRooms(roomsAtom, recursiveChildRoomSelector);
+};
+
+export const useSpaces = (ct: ClientContext, roomsAtom: RoomsAtom) => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
+  const selector: RoomSelector = useCallback((roomId) => spaceRooms.has(roomId), [spaceRooms]);
   return useSelectedRooms(roomsAtom, selector);
 };
 
 export const useOrphanSpaces = (
-  mx: MatrixClient,
+  ct: ClientContext,
   roomsAtom: RoomsAtom,
   roomToParents: RoomToParents
 ) => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
   const selector: RoomSelector = useCallback(
-    (roomId) => isSpace(mx.getRoom(roomId)) && !roomToParents.has(roomId),
-    [mx, roomToParents]
+    (roomId) => spaceRooms.has(roomId) && !roomToParents.has(roomId),
+    [spaceRooms, roomToParents]
   );
   return useSelectedRooms(roomsAtom, selector);
 };
 
-export const useRooms = (mx: MatrixClient, roomsAtom: RoomsAtom, mDirects: Set<string>) => {
+export const useRooms = (ct: ClientContext, roomsAtom: RoomsAtom, mDirects: Set<string>) => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
   const selector: RoomSelector = useCallback(
-    (roomId: string) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId),
-    [mx, mDirects]
+    (roomId: string) => !spaceRooms.has(roomId) && !mDirects.has(roomId),
+    [spaceRooms, mDirects]
   );
   return useSelectedRooms(roomsAtom, selector);
 };
 
 export const useOrphanRooms = (
-  mx: MatrixClient,
+  ct: ClientContext,
   roomsAtom: RoomsAtom,
   mDirects: Set<string>,
   roomToParents: RoomToParents
 ) => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
   const selector: RoomSelector = useCallback(
-    (roomId) => isRoom(mx.getRoom(roomId)) && !mDirects.has(roomId) && !roomToParents.has(roomId),
-    [mx, mDirects, roomToParents]
+    (roomId) => !spaceRooms.has(roomId) && !mDirects.has(roomId) && !roomToParents.has(roomId),
+    [spaceRooms, mDirects, roomToParents]
   );
   return useSelectedRooms(roomsAtom, selector);
 };
 
-export const useDirects = (mx: MatrixClient, roomsAtom: RoomsAtom, mDirects: Set<string>) => {
-  const selector: RoomSelector = useCallback(
-    (roomId) => isRoom(mx.getRoom(roomId)) && mDirects.has(roomId),
-    [mx, mDirects]
-  );
-  return useSelectedRooms(roomsAtom, selector);
-};
+export const useDirects = (ct: ClientContext, roomsAtom: RoomsAtom, mDirects: Set<string>) => {
+  const spaceRooms = useObservableValue(ct.spaceRooms);
 
-export const useUnsupportedRooms = (mx: MatrixClient, roomsAtom: RoomsAtom) => {
   const selector: RoomSelector = useCallback(
-    (roomId) => isUnsupportedRoom(mx.getRoom(roomId)),
-    [mx]
+    (roomId) => !spaceRooms.has(roomId) && mDirects.has(roomId),
+    [mDirects, spaceRooms]
   );
   return useSelectedRooms(roomsAtom, selector);
 };
diff --git a/src/app/state/hooks/roomNotifications.ts b/src/app/state/hooks/roomNotifications.ts
new file mode 100644
index 00000000..0e591f31
--- /dev/null
+++ b/src/app/state/hooks/roomNotifications.ts
@@ -0,0 +1,134 @@
+import { useCallback, useMemo } from 'react';
+import { useAtomValue } from 'jotai';
+import { selectAtom } from 'jotai/utils';
+import { UnreadNotificationCounts } from 'neurone/lib/api/types';
+import {
+  Notifications,
+  RoomToNotifications,
+  roomToNotificationsAtom,
+} from '../room/roomToNotifications';
+
+const compareUnreadNotifications = (
+  n1?: UnreadNotificationCounts,
+  n2?: UnreadNotificationCounts
+): boolean =>
+  n1?.highlight_count === n2?.highlight_count && n1?.notification_count === n2?.notification_count;
+
+const compareNotifications = (n1?: Notifications, n2?: Notifications): boolean => {
+  if (n1 && n2) {
+    return (
+      compareUnreadNotifications(n1, n2) &&
+      n1.threads.size === n2.threads.size &&
+      Array.from(n1.threads.keys()).every((threadId) =>
+        compareUnreadNotifications(n1.threads.get(threadId), n2.threads.get(threadId))
+      )
+    );
+  }
+
+  return n1 === n2;
+};
+
+const compareRoomsNotifications = (rn1: RoomToNotifications, rn2: RoomToNotifications): boolean =>
+  rn1.size === rn2.size &&
+  Array.from(rn1.keys()).every((roomId) => compareNotifications(rn1.get(roomId), rn2.get(roomId)));
+
+export const useRoomsNotifications = (
+  rooms: string[],
+  notificationsAtom: typeof roomToNotificationsAtom
+): RoomToNotifications => {
+  const selector = useCallback(
+    (roomToNotifications: RoomToNotifications) => {
+      const selectedNotifications: RoomToNotifications = new Map();
+      rooms.forEach((roomId) => {
+        const n = roomToNotifications.get(roomId);
+        if (n) selectedNotifications.set(roomId, n);
+      });
+
+      return selectedNotifications;
+    },
+    [rooms]
+  );
+  return useAtomValue(selectAtom(notificationsAtom, selector, compareRoomsNotifications));
+};
+
+export const useRoomNotifications = (
+  roomId: string,
+  notificationsAtom: typeof roomToNotificationsAtom
+): Notifications | undefined => {
+  const selector = useCallback(
+    (roomToNotifications: RoomToNotifications) => roomToNotifications.get(roomId),
+    [roomId]
+  );
+  return useAtomValue(selectAtom(notificationsAtom, selector, compareNotifications));
+};
+
+export type TotalNotifications = {
+  count: number;
+  highlight: boolean;
+};
+
+const getTotalCount = (n: UnreadNotificationCounts): number => {
+  const highlight = n.highlight_count ?? 0;
+  const total = n.notification_count ?? 0;
+
+  return total >= highlight ? total : highlight;
+};
+
+const setTotal = (total: TotalNotifications, n: UnreadNotificationCounts) => {
+  // eslint-disable-next-line no-param-reassign
+  total.count += getTotalCount(n);
+
+  if (!total.highlight && n.highlight_count && n.highlight_count > 0) {
+    // eslint-disable-next-line no-param-reassign
+    total.highlight = true;
+  }
+};
+
+export const getRoomsTotalNotifications = (
+  roomsToNotifications: RoomToNotifications
+): TotalNotifications => {
+  const total: TotalNotifications = {
+    count: 0,
+    highlight: false,
+  };
+
+  roomsToNotifications.forEach((n) => {
+    setTotal(total, n);
+    n.threads.forEach((tn) => setTotal(total, tn));
+  });
+
+  return total;
+};
+
+export const useRoomsTotalNotifications = (roomsToNotifications: RoomToNotifications) =>
+  useMemo(() => getRoomsTotalNotifications(roomsToNotifications), [roomsToNotifications]);
+
+export const getRoomTotalNotifications = (notifications?: Notifications): TotalNotifications => {
+  const total: TotalNotifications = {
+    count: 0,
+    highlight: false,
+  };
+
+  setTotal(total, notifications ?? {});
+  notifications?.threads.forEach((tn) => setTotal(total, tn));
+
+  return total;
+};
+
+export const useRoomTotalNotifications = (notifications?: Notifications) =>
+  useMemo(() => getRoomTotalNotifications(notifications), [notifications]);
+
+export const getThreadsTotalNotifications = (
+  threadsNotifications: Map<string, UnreadNotificationCounts>
+): TotalNotifications => {
+  const total: TotalNotifications = {
+    count: 0,
+    highlight: false,
+  };
+  threadsNotifications.forEach((tn) => setTotal(total, tn));
+
+  return total;
+};
+export const useThreadsTotalNotifications = (
+  threadsNotifications: Map<string, UnreadNotificationCounts>
+) => useMemo(() => getThreadsTotalNotifications(threadsNotifications), [threadsNotifications]);
diff --git a/src/app/state/hooks/unread.ts b/src/app/state/hooks/unread.ts
index 62386d02..bcd42693 100644
--- a/src/app/state/hooks/unread.ts
+++ b/src/app/state/hooks/unread.ts
@@ -1,46 +1,12 @@
-import { useCallback } from 'react';
-import { useAtomValue } from 'jotai';
-import { selectAtom } from 'jotai/utils';
-import { RoomToUnread, Unread } from '../../../types/matrix/room';
-import { roomToUnreadAtom, unreadEqual } from '../room/roomToUnread';
-
-const compareUnreadEqual = (u1?: Unread, u2?: Unread): boolean => {
-  if (!u1 || !u2) return false;
-  return unreadEqual(u1, u2);
-};
-
-const getRoomsUnread = (rooms: string[], roomToUnread: RoomToUnread): Unread | undefined => {
-  const unread = rooms.reduce<Unread | undefined>((u, roomId) => {
-    const roomUnread = roomToUnread.get(roomId);
-    if (!roomUnread) return u;
-    const newUnread: Unread = u ?? {
-      total: 0,
-      highlight: 0,
-      from: new Set(),
-    };
-    newUnread.total += roomUnread.total;
-    newUnread.highlight += roomUnread.highlight;
-    newUnread.from?.add(roomId);
-    return newUnread;
-  }, undefined);
-  return unread;
-};
+import { Unread } from '../../../types/matrix/room';
+import { roomToUnreadAtom } from '../room/roomToUnread';
 
 export const useRoomsUnread = (
   rooms: string[],
   roomToUnreadAtm: typeof roomToUnreadAtom
-): Unread | undefined => {
-  const selector = useCallback(
-    (roomToUnread: RoomToUnread) => getRoomsUnread(rooms, roomToUnread),
-    [rooms]
-  );
-  return useAtomValue(selectAtom(roomToUnreadAtm, selector, compareUnreadEqual));
-};
+): Unread | undefined => undefined;
 
 export const useRoomUnread = (
   roomId: string,
   roomToUnreadAtm: typeof roomToUnreadAtom
-): Unread | undefined => {
-  const selector = useCallback((roomToUnread: RoomToUnread) => roomToUnread.get(roomId), [roomId]);
-  return useAtomValue(selectAtom(roomToUnreadAtm, selector, compareUnreadEqual));
-};
+): Unread | undefined => undefined;
diff --git a/src/app/state/hooks/useBindAtoms.ts b/src/app/state/hooks/useBindAtoms.ts
index d4572ff4..eed9e68c 100644
--- a/src/app/state/hooks/useBindAtoms.ts
+++ b/src/app/state/hooks/useBindAtoms.ts
@@ -1,17 +1,22 @@
-import { MatrixClient } from 'matrix-js-sdk';
 import { allInvitesAtom, useBindAllInvitesAtom } from '../room-list/inviteList';
 import { allRoomsAtom, useBindAllRoomsAtom } from '../room-list/roomList';
 import { mDirectAtom, useBindMDirectAtom } from '../mDirectList';
-import { roomToUnreadAtom, useBindRoomToUnreadAtom } from '../room/roomToUnread';
 import { roomToParentsAtom, useBindRoomToParentsAtom } from '../room/roomToParents';
 import { roomIdToTypingMembersAtom, useBindRoomIdToTypingMembersAtom } from '../typingMembers';
+import {
+  roomToNotificationsAtom,
+  useBindRoomToNotificationsAtom,
+} from '../room/roomToNotifications';
+import { ClientContext } from '../../../client/context';
+import { unreadRoomsAtom, useBindUnreadRoomsAtom } from '../room/roomToUnread';
 
-export const useBindAtoms = (mx: MatrixClient) => {
-  useBindMDirectAtom(mx, mDirectAtom);
-  useBindAllInvitesAtom(mx, allInvitesAtom);
-  useBindAllRoomsAtom(mx, allRoomsAtom);
-  useBindRoomToParentsAtom(mx, roomToParentsAtom);
-  useBindRoomToUnreadAtom(mx, roomToUnreadAtom);
+export const useBindAtoms = (ct: ClientContext) => {
+  useBindMDirectAtom(ct, mDirectAtom);
+  useBindAllInvitesAtom(ct, allInvitesAtom);
+  useBindAllRoomsAtom(ct, allRoomsAtom);
+  useBindRoomToParentsAtom(ct, roomToParentsAtom);
+  useBindRoomToNotificationsAtom(ct, roomToNotificationsAtom);
+  useBindUnreadRoomsAtom(ct, unreadRoomsAtom);
 
-  useBindRoomIdToTypingMembersAtom(mx, roomIdToTypingMembersAtom);
+  useBindRoomIdToTypingMembersAtom(ct, roomIdToTypingMembersAtom);
 };
diff --git a/src/app/state/list.ts b/src/app/state/list.ts
index 4377e532..98336e88 100644
--- a/src/app/state/list.ts
+++ b/src/app/state/list.ts
@@ -6,9 +6,9 @@ export type ListAction<T> =
       item: T | T[];
     }
   | {
-    type: 'REPLACE';
-    item: T;
-    replacement: T;
+      type: 'REPLACE';
+      item: T;
+      replacement: T;
     }
   | {
       type: 'DELETE';
@@ -17,7 +17,7 @@ export type ListAction<T> =
 
 export const createListAtom = <T>() => {
   const baseListAtom = atom<T[]>([]);
-  return atom<T[], [ListAction<T>], undefined>(
+  return atom<T[], [ListAction<T>], void>(
     (get) => get(baseListAtom),
     (get, set, action) => {
       const items = get(baseListAtom);
@@ -34,9 +34,12 @@ export const createListAtom = <T>() => {
         return;
       }
       if (action.type === 'REPLACE') {
-        set(baseListAtom, items.map((item) => item === action.item ? action.replacement : item));
+        set(
+          baseListAtom,
+          items.map((item) => (item === action.item ? action.replacement : item))
+        );
       }
     }
   );
 };
-export type TListAtom<T> = ReturnType<typeof createListAtom<T>>;
\ No newline at end of file
+export type TListAtom<T> = ReturnType<typeof createListAtom<T>>;
diff --git a/src/app/state/mDirectList.ts b/src/app/state/mDirectList.ts
index 95165255..4f9b58ea 100644
--- a/src/app/state/mDirectList.ts
+++ b/src/app/state/mDirectList.ts
@@ -1,46 +1,19 @@
 import { atom, useSetAtom } from 'jotai';
-import { ClientEvent, MatrixClient, MatrixEvent } from 'matrix-js-sdk';
 import { useEffect } from 'react';
-import { AccountDataEvent } from '../../types/matrix/accountData';
-import { getAccountData, getMDirects } from '../utils/room';
+import { ClientContext } from '../../client/context';
 
-export type MDirectAction = {
-  type: 'INITIALIZE' | 'UPDATE';
-  rooms: Set<string>;
-};
+export const mDirectAtom = atom(new Set<string>());
 
-const baseMDirectAtom = atom(new Set<string>());
-export const mDirectAtom = atom<Set<string>, [MDirectAction], undefined>(
-  (get) => get(baseMDirectAtom),
-  (get, set, action) => {
-    set(baseMDirectAtom, action.rooms);
-  }
-);
-
-export const useBindMDirectAtom = (mx: MatrixClient, mDirect: typeof mDirectAtom) => {
+export const useBindMDirectAtom = (ct: ClientContext, mDirect: typeof mDirectAtom) => {
   const setMDirect = useSetAtom(mDirect);
 
   useEffect(() => {
-    const mDirectEvent = getAccountData(mx, AccountDataEvent.Direct);
-    if (mDirectEvent) {
-      setMDirect({
-        type: 'INITIALIZE',
-        rooms: getMDirects(mDirectEvent),
-      });
-    }
+    setMDirect(ct.directRooms.read);
 
-    const handleAccountData = (event: MatrixEvent) => {
-      if (event.getType() === AccountDataEvent.Direct) {
-        setMDirect({
-          type: 'UPDATE',
-          rooms: getMDirects(event),
-        });
-      }
-    };
+    const unsubscribe = ct.directRooms.subscribe((rooms) => {
+      setMDirect(rooms);
+    });
 
-    mx.on(ClientEvent.AccountData, handleAccountData);
-    return () => {
-      mx.removeListener(ClientEvent.AccountData, handleAccountData);
-    };
-  }, [mx, setMDirect]);
+    return unsubscribe;
+  }, [ct, setMDirect]);
 };
diff --git a/src/app/state/room-list/inviteList.ts b/src/app/state/room-list/inviteList.ts
index 4fa97be4..0b41f8dc 100644
--- a/src/app/state/room-list/inviteList.ts
+++ b/src/app/state/room-list/inviteList.ts
@@ -1,32 +1,19 @@
-import { atom, WritableAtom } from 'jotai';
-import { MatrixClient } from 'matrix-js-sdk';
-import { useMemo } from 'react';
-import { Membership } from '../../../types/matrix/room';
-import { RoomsAction, useBindRoomsWithMembershipsAtom } from './utils';
+import { atom, useSetAtom } from 'jotai';
+import { useEffect } from 'react';
+import { ClientContext } from '../../../client/context';
 
-const baseRoomsAtom = atom<string[]>([]);
-export const allInvitesAtom = atom<string[], [RoomsAction], undefined>(
-  (get) => get(baseRoomsAtom),
-  (get, set, action) => {
-    if (action.type === 'INITIALIZE') {
-      set(baseRoomsAtom, action.rooms);
-      return;
-    }
-    set(baseRoomsAtom, (ids) => {
-      const newIds = ids.filter((id) => id !== action.roomId);
-      if (action.type === 'PUT') newIds.push(action.roomId);
-      return newIds;
+export const allInvitesAtom = atom<string[]>([]);
+
+export const useBindAllInvitesAtom = (ct: ClientContext, allRooms: typeof allInvitesAtom) => {
+  const setRoomsAtom = useSetAtom(allRooms);
+
+  useEffect(() => {
+    setRoomsAtom(ct.rooms.invite.read);
+
+    const unsubscribe = ct.rooms.invite.subscribe((rooms) => {
+      setRoomsAtom(rooms);
     });
-  }
-);
 
-export const useBindAllInvitesAtom = (
-  mx: MatrixClient,
-  allRooms: WritableAtom<string[], [RoomsAction], undefined>
-) => {
-  useBindRoomsWithMembershipsAtom(
-    mx,
-    allRooms,
-    useMemo(() => [Membership.Invite], [])
-  );
+    return unsubscribe;
+  }, [ct, setRoomsAtom]);
 };
diff --git a/src/app/state/room-list/roomList.ts b/src/app/state/room-list/roomList.ts
index 736a0bc2..fbc60cc1 100644
--- a/src/app/state/room-list/roomList.ts
+++ b/src/app/state/room-list/roomList.ts
@@ -1,28 +1,19 @@
-import { atom } from 'jotai';
-import { MatrixClient } from 'matrix-js-sdk';
-import { useMemo } from 'react';
-import { Membership } from '../../../types/matrix/room';
-import { RoomsAction, useBindRoomsWithMembershipsAtom } from './utils';
+import { atom, useSetAtom } from 'jotai';
+import { useEffect } from 'react';
+import { ClientContext } from '../../../client/context';
 
-const baseRoomsAtom = atom<string[]>([]);
-export const allRoomsAtom = atom<string[], [RoomsAction], undefined>(
-  (get) => get(baseRoomsAtom),
-  (get, set, action) => {
-    if (action.type === 'INITIALIZE') {
-      set(baseRoomsAtom, action.rooms);
-      return;
-    }
-    set(baseRoomsAtom, (ids) => {
-      const newIds = ids.filter((id) => id !== action.roomId);
-      if (action.type === 'PUT') newIds.push(action.roomId);
-      return newIds;
+export const allRoomsAtom = atom<string[]>([]);
+
+export const useBindAllRoomsAtom = (ct: ClientContext, allRooms: typeof allRoomsAtom) => {
+  const setRoomsAtom = useSetAtom(allRooms);
+
+  useEffect(() => {
+    setRoomsAtom(ct.rooms.join.read);
+
+    const unsubscribe = ct.rooms.join.subscribe((rooms) => {
+      setRoomsAtom(rooms);
     });
-  }
-);
-export const useBindAllRoomsAtom = (mx: MatrixClient, allRooms: typeof allRoomsAtom) => {
-  useBindRoomsWithMembershipsAtom(
-    mx,
-    allRooms,
-    useMemo(() => [Membership.Join], [])
-  );
+
+    return unsubscribe;
+  }, [ct, setRoomsAtom]);
 };
diff --git a/src/app/state/room-list/utils.ts b/src/app/state/room-list/utils.ts
index 1ca7e7de..c8f20289 100644
--- a/src/app/state/room-list/utils.ts
+++ b/src/app/state/room-list/utils.ts
@@ -1,65 +1,3 @@
-import { useSetAtom, WritableAtom } from 'jotai';
-import { ClientEvent, MatrixClient, Room, RoomEvent } from 'matrix-js-sdk';
-import { useEffect } from 'react';
-import { Membership } from '../../../types/matrix/room';
-
-export type RoomsAction =
-  | {
-      type: 'INITIALIZE';
-      rooms: string[];
-    }
-  | {
-      type: 'PUT' | 'DELETE';
-      roomId: string;
-    };
-
-export const useBindRoomsWithMembershipsAtom = (
-  mx: MatrixClient,
-  roomsAtom: WritableAtom<string[], [RoomsAction], undefined>,
-  memberships: Membership[]
-) => {
-  const setRoomsAtom = useSetAtom(roomsAtom);
-
-  useEffect(() => {
-    const satisfyMembership = (room: Room): boolean =>
-      !!memberships.find((membership) => membership === room.getMyMembership());
-    setRoomsAtom({
-      type: 'INITIALIZE',
-      rooms: mx
-        .getRooms()
-        .filter(satisfyMembership)
-        .map((room) => room.roomId),
-    });
-
-    const handleAddRoom = (room: Room) => {
-      if (satisfyMembership(room)) {
-        setRoomsAtom({ type: 'PUT', roomId: room.roomId });
-      }
-    };
-
-    const handleMembershipChange = (room: Room) => {
-      if (satisfyMembership(room)) {
-        setRoomsAtom({ type: 'PUT', roomId: room.roomId });
-      } else {
-        setRoomsAtom({ type: 'DELETE', roomId: room.roomId });
-      }
-    };
-
-    const handleDeleteRoom = (roomId: string) => {
-      setRoomsAtom({ type: 'DELETE', roomId });
-    };
-
-    mx.on(ClientEvent.Room, handleAddRoom);
-    mx.on(RoomEvent.MyMembership, handleMembershipChange);
-    mx.on(ClientEvent.DeleteRoom, handleDeleteRoom);
-    return () => {
-      mx.removeListener(ClientEvent.Room, handleAddRoom);
-      mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
-      mx.removeListener(ClientEvent.DeleteRoom, handleDeleteRoom);
-    };
-  }, [mx, memberships, setRoomsAtom]);
-};
-
 export const compareRoomsEqual = (a: string[], b: string[]) => {
   if (a.length !== b.length) return false;
   return a.every((roomId, roomIdIndex) => roomId === b[roomIdIndex]);
diff --git a/src/app/state/room/roomInputDrafts.ts b/src/app/state/room/roomInputDrafts.ts
index 5d8ec8c7..f4d57415 100644
--- a/src/app/state/room/roomInputDrafts.ts
+++ b/src/app/state/room/roomInputDrafts.ts
@@ -2,29 +2,26 @@ import { atom } from 'jotai';
 import { atomFamily } from 'jotai/utils';
 import { Descendant } from 'slate';
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
-import { IEventRelation } from 'matrix-js-sdk';
-import { createUploadAtomFamily } from '../upload';
-import { TUploadContent } from '../../utils/matrix';
+import { createUploadContentToUploadAtom } from '../upload';
+import { UploadContent } from '../../utils/matrix';
 import { createListAtom } from '../list';
 
-export type TUploadMetadata = {
+export const getComposerId = (roomId: string, threadId?: string) => `${roomId}${threadId ?? ''}`;
+
+export type UploadMetadata = {
   markedAsSpoiler: boolean;
 };
 
-export type TUploadItem = {
-  file: TUploadContent;
-  originalFile: TUploadContent;
-  metadata: TUploadMetadata;
+export type UploadItem = {
+  file: UploadContent;
+  originalFile: UploadContent;
+  metadata: UploadMetadata;
   encInfo: EncryptedAttachmentInfo | undefined;
 };
+export type UploadListAtom = ReturnType<typeof createListAtom<UploadItem>>;
+export const composerToUploadItemsAtom = atomFamily<string, UploadListAtom>(createListAtom);
 
-export type TUploadListAtom = ReturnType<typeof createListAtom<TUploadItem>>;
-
-export const roomIdToUploadItemsAtomFamily = atomFamily<string, TUploadListAtom>(
-  createListAtom
-);
-
-export const roomUploadAtomFamily = createUploadAtomFamily();
+export const roomUploadContentToUploadAtom = createUploadContentToUploadAtom();
 
 export type RoomIdToMsgAction =
   | {
@@ -37,21 +34,16 @@ export type RoomIdToMsgAction =
       roomId: string;
     };
 
-const createMsgDraftAtom = () => atom<Descendant[]>([]);
-export type TMsgDraftAtom = ReturnType<typeof createMsgDraftAtom>;
-export const roomIdToMsgDraftAtomFamily = atomFamily<string, TMsgDraftAtom>(() =>
-  createMsgDraftAtom()
-);
+const createDraftAtom = () => atom<Descendant[]>([]);
+export type DraftAtom = ReturnType<typeof createDraftAtom>;
+export const composerToDraftAtom = atomFamily<string, DraftAtom>(() => createDraftAtom());
 
-export type IReplyDraft = {
+export type ReplyDraft = {
   userId: string;
   eventId: string;
-  body: string;
-  formattedBody?: string | undefined;
-  relation?: IEventRelation | undefined;
 };
-const createReplyDraftAtom = () => atom<IReplyDraft | undefined>(undefined);
-export type TReplyDraftAtom = ReturnType<typeof createReplyDraftAtom>;
-export const roomIdToReplyDraftAtomFamily = atomFamily<string, TReplyDraftAtom>(() =>
+const createReplyDraftAtom = () => atom<ReplyDraft | undefined>(undefined);
+export type ReplyDraftAtom = ReturnType<typeof createReplyDraftAtom>;
+export const composerToReplyDraftAtom = atomFamily<string, ReplyDraftAtom>(() =>
   createReplyDraftAtom()
 );
diff --git a/src/app/state/room/roomToNotifications.ts b/src/app/state/room/roomToNotifications.ts
new file mode 100644
index 00000000..8da2c82d
--- /dev/null
+++ b/src/app/state/room/roomToNotifications.ts
@@ -0,0 +1,84 @@
+import { atom, useSetAtom } from 'jotai';
+import { useCallback, useEffect } from 'react';
+import { UnreadNotificationCounts } from 'neurone/lib/api/types';
+import { useRoomsNotificationPreferencesContext } from '../../hooks/useRoomsNotificationPreferences';
+import { ClientContext } from '../../../client/context';
+import { AsyncStatus, useAsyncCallbackValue } from '../../hooks/useAsyncCallback';
+
+export type Notifications = UnreadNotificationCounts & {
+  threads: Map<string, UnreadNotificationCounts>;
+};
+export type RoomToNotifications = Map<string, Notifications>;
+
+export const roomToNotificationsAtom = atom<RoomToNotifications>(new Map());
+
+export const useBindRoomToNotificationsAtom = (
+  ct: ClientContext,
+  notificationsAtom: typeof roomToNotificationsAtom
+) => {
+  const setNotificationAtom = useSetAtom(notificationsAtom);
+  const roomsNotificationPreferences = useRoomsNotificationPreferencesContext();
+
+  const [unreadState] = useAsyncCallbackValue(
+    useCallback(async () => {
+      const notifications = await ct.storage.unreadNotifications.observableRead.getAll();
+      const threadNotifications =
+        await ct.storage.unreadThreadNotifications.observableRead.getAll();
+
+      return {
+        notifications,
+        threadNotifications,
+      };
+    }, [ct])
+  );
+
+  const unread = unreadState.status === AsyncStatus.Success ? unreadState.data : undefined;
+
+  const processNotifications = useCallback(() => {
+    console.log('roomToNotifications');
+    const notifications = unread?.notifications.read ?? [];
+    const threadNotifications = unread?.threadNotifications.read ?? [];
+    const { mute } = roomsNotificationPreferences;
+
+    const roomToThreadsNotifications = new Map<string, Map<string, UnreadNotificationCounts>>();
+    threadNotifications.forEach((item) => {
+      if (mute.has(item.roomId)) return;
+
+      const tn: Map<string, UnreadNotificationCounts> =
+        roomToThreadsNotifications.get(item.roomId) ?? new Map();
+      tn.set(item.threadId, item.unread);
+      roomToThreadsNotifications.set(item.roomId, tn);
+    });
+
+    const roomToNotifications: RoomToNotifications = new Map();
+    notifications.forEach((item) => {
+      if (mute.has(item.id)) return;
+
+      roomToNotifications.set(item.id, {
+        ...item.unread,
+        threads: new Map(),
+      });
+    });
+
+    roomToThreadsNotifications.forEach((tn, roomId) => {
+      const n = roomToNotifications.get(roomId) ?? { threads: new Map() };
+      n.threads = tn;
+      roomToNotifications.set(roomId, n);
+    });
+
+    setNotificationAtom(roomToNotifications);
+  }, [unread, setNotificationAtom, roomsNotificationPreferences]);
+
+  useEffect(() => {
+    if (unread) {
+      processNotifications();
+    }
+
+    const unsubscribeN = unread?.notifications.subscribe(() => processNotifications());
+    const unsubscribeTn = unread?.threadNotifications.subscribe(() => processNotifications());
+    return () => {
+      unsubscribeN?.();
+      unsubscribeTn?.();
+    };
+  }, [unread, processNotifications]);
+};
diff --git a/src/app/state/room/roomToParents.ts b/src/app/state/room/roomToParents.ts
index f66662ff..edc77cd4 100644
--- a/src/app/state/room/roomToParents.ts
+++ b/src/app/state/room/roomToParents.ts
@@ -1,124 +1,29 @@
-import produce from 'immer';
 import { atom, useSetAtom } from 'jotai';
-import {
-  ClientEvent,
-  MatrixClient,
-  MatrixEvent,
-  Room,
-  RoomEvent,
-  RoomStateEvent,
-} from 'matrix-js-sdk';
 import { useEffect } from 'react';
-import { Membership, RoomToParents, StateEvent } from '../../../types/matrix/room';
-import {
-  getRoomToParents,
-  getSpaceChildren,
-  isSpace,
-  isValidChild,
-  mapParentWithChildren,
-} from '../../utils/room';
-
-export type RoomToParentsAction =
-  | {
-      type: 'INITIALIZE';
-      roomToParents: RoomToParents;
-    }
-  | {
-      type: 'PUT';
-      parent: string;
-      children: string[];
-    }
-  | {
-      type: 'DELETE';
-      roomId: string;
-    };
+import { RoomToParents } from '../../../types/matrix/room';
+import { ClientContext } from '../../../client/context';
 
 const baseRoomToParents = atom<RoomToParents>(new Map());
-export const roomToParentsAtom = atom<RoomToParents, [RoomToParentsAction], undefined>(
+export const roomToParentsAtom = atom<RoomToParents, [RoomToParents], void>(
   (get) => get(baseRoomToParents),
-  (get, set, action) => {
-    if (action.type === 'INITIALIZE') {
-      set(baseRoomToParents, action.roomToParents);
-      return;
-    }
-    if (action.type === 'PUT') {
-      set(
-        baseRoomToParents,
-        produce(get(baseRoomToParents), (draftRoomToParents) => {
-          mapParentWithChildren(draftRoomToParents, action.parent, action.children);
-        })
-      );
-      return;
-    }
-    if (action.type === 'DELETE') {
-      set(
-        baseRoomToParents,
-        produce(get(baseRoomToParents), (draftRoomToParents) => {
-          const noParentRooms: string[] = [];
-          draftRoomToParents.delete(action.roomId);
-          draftRoomToParents.forEach((parents, child) => {
-            parents.delete(action.roomId);
-            if (parents.size === 0) noParentRooms.push(child);
-          });
-          noParentRooms.forEach((room) => draftRoomToParents.delete(room));
-        })
-      );
-    }
+  (get, set, roomToParents) => {
+    set(baseRoomToParents, roomToParents);
   }
 );
 
 export const useBindRoomToParentsAtom = (
-  mx: MatrixClient,
+  ct: ClientContext,
   roomToParents: typeof roomToParentsAtom
 ) => {
   const setRoomToParents = useSetAtom(roomToParents);
 
   useEffect(() => {
-    setRoomToParents({ type: 'INITIALIZE', roomToParents: getRoomToParents(mx) });
+    setRoomToParents(ct.roomToParents.read);
 
-    const handleAddRoom = (room: Room) => {
-      if (isSpace(room) && room.getMyMembership() !== Membership.Invite) {
-        setRoomToParents({ type: 'PUT', parent: room.roomId, children: getSpaceChildren(room) });
-      }
-    };
+    const unsubscribe = ct.roomToParents.subscribe((data) => {
+      setRoomToParents(data);
+    });
 
-    const handleMembershipChange = (room: Room, membership: string) => {
-      if (isSpace(room) && room.getMyMembership() === Membership.Leave) {
-        setRoomToParents({ type: 'DELETE', roomId: room.roomId });
-        return;
-      }
-      if (isSpace(room) && membership === Membership.Join) {
-        setRoomToParents({ type: 'PUT', parent: room.roomId, children: getSpaceChildren(room) });
-      }
-    };
-
-    const handleStateChange = (mEvent: MatrixEvent) => {
-      if (mEvent.getType() === StateEvent.SpaceChild) {
-        const childId = mEvent.getStateKey();
-        const roomId = mEvent.getRoomId();
-        if (childId && roomId) {
-          if (isValidChild(mEvent)) {
-            setRoomToParents({ type: 'PUT', parent: roomId, children: [childId] });
-          } else {
-            setRoomToParents({ type: 'DELETE', roomId: childId });
-          }
-        }
-      }
-    };
-
-    const handleDeleteRoom = (roomId: string) => {
-      setRoomToParents({ type: 'DELETE', roomId });
-    };
-
-    mx.on(ClientEvent.Room, handleAddRoom);
-    mx.on(RoomEvent.MyMembership, handleMembershipChange);
-    mx.on(RoomStateEvent.Events, handleStateChange);
-    mx.on(ClientEvent.DeleteRoom, handleDeleteRoom);
-    return () => {
-      mx.removeListener(ClientEvent.Room, handleAddRoom);
-      mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
-      mx.removeListener(RoomStateEvent.Events, handleStateChange);
-      mx.removeListener(ClientEvent.DeleteRoom, handleDeleteRoom);
-    };
-  }, [mx, setRoomToParents]);
+    return unsubscribe;
+  }, [ct, setRoomToParents]);
 };
diff --git a/src/app/state/room/roomToUnread.ts b/src/app/state/room/roomToUnread.ts
index f7ef1b79..e500caf8 100644
--- a/src/app/state/room/roomToUnread.ts
+++ b/src/app/state/room/roomToUnread.ts
@@ -1,282 +1,42 @@
-import produce from 'immer';
 import { atom, useSetAtom } from 'jotai';
-import {
-  IRoomTimelineData,
-  MatrixClient,
-  MatrixEvent,
-  Room,
-  RoomEvent,
-  SyncState,
-} from 'matrix-js-sdk';
-import { ReceiptContent, ReceiptType } from 'matrix-js-sdk/lib/@types/read_receipts';
-import { useCallback, useEffect } from 'react';
-import {
-  Membership,
-  NotificationType,
-  RoomToUnread,
-  UnreadInfo,
-  Unread,
-  StateEvent,
-} from '../../../types/matrix/room';
-import {
-  getAllParents,
-  getNotificationType,
-  getUnreadInfo,
-  getUnreadInfos,
-  isNotificationEvent,
-} from '../../utils/room';
-import { roomToParentsAtom } from './roomToParents';
-import { useStateEventCallback } from '../../hooks/useStateEventCallback';
-import { useSyncState } from '../../hooks/useSyncState';
-import { useRoomsNotificationPreferencesContext } from '../../hooks/useRoomsNotificationPreferences';
+import { useEffect, useMemo } from 'react';
+import { ThreadId } from '../../../types/matrix/room';
+import { useObservableValue, useObservableValuePromise } from '../../hooks/useObservableValue';
+import { getReadReceiptId } from '../../../client/storage/collections';
+import { ClientContext } from '../../../client/context';
 
-export type RoomToUnreadAction =
-  | {
-      type: 'RESET';
-      unreadInfos: UnreadInfo[];
-    }
-  | {
-      type: 'PUT';
-      unreadInfo: UnreadInfo;
-    }
-  | {
-      type: 'DELETE';
-      roomId: string;
-    };
+export const roomToUnreadAtom = atom(new Map());
 
-export const unreadInfoToUnread = (unreadInfo: UnreadInfo): Unread => ({
-  highlight: unreadInfo.highlight,
-  total: unreadInfo.total,
-  from: null,
-});
+export const unreadRoomsAtom = atom<Set<string>>(new Set<string>());
 
-const putUnreadInfo = (
-  roomToUnread: RoomToUnread,
-  allParents: Set<string>,
-  unreadInfo: UnreadInfo
-) => {
-  const oldUnread = roomToUnread.get(unreadInfo.roomId) ?? { highlight: 0, total: 0, from: null };
-  roomToUnread.set(unreadInfo.roomId, unreadInfoToUnread(unreadInfo));
+export const useBindUnreadRoomsAtom = (ct: ClientContext, unreadRooms: typeof unreadRoomsAtom) => {
+  const setUnreadRooms = useSetAtom(unreadRooms);
+  const roomToLatestEvent = useObservableValue(ct.roomToLatestEvent);
 
-  const newH = unreadInfo.highlight - oldUnread.highlight;
-  const newT = unreadInfo.total - oldUnread.total;
-
-  allParents.forEach((parentId) => {
-    const oldParentUnread = roomToUnread.get(parentId) ?? { highlight: 0, total: 0, from: null };
-    roomToUnread.set(parentId, {
-      highlight: (oldParentUnread.highlight += newH),
-      total: (oldParentUnread.total += newT),
-      from: new Set([...(oldParentUnread.from ?? []), unreadInfo.roomId]),
+  const receiptKeys: string[] = useMemo(() => {
+    const keys: string[] = [];
+    roomToLatestEvent.forEach((_, roomId) => {
+      keys.push(getReadReceiptId(roomId, ct.session.userId, ThreadId.Main));
     });
-  });
-};
 
-const deleteUnreadInfo = (roomToUnread: RoomToUnread, allParents: Set<string>, roomId: string) => {
-  const oldUnread = roomToUnread.get(roomId);
-  if (!oldUnread) return;
-  roomToUnread.delete(roomId);
+    return keys;
+  }, [roomToLatestEvent, ct]);
 
-  allParents.forEach((parentId) => {
-    const oldParentUnread = roomToUnread.get(parentId);
-    if (!oldParentUnread) return;
-    const newFrom = new Set([...(oldParentUnread.from ?? roomId)]);
-    newFrom.delete(roomId);
-    if (newFrom.size === 0) {
-      roomToUnread.delete(parentId);
-      return;
-    }
-    roomToUnread.set(parentId, {
-      highlight: oldParentUnread.highlight - oldUnread.highlight,
-      total: oldParentUnread.total - oldUnread.total,
-      from: newFrom,
-    });
-  });
-};
+  const receiptsResult = useObservableValuePromise(
+    useMemo(() => ct.storage.readReceipt.observableRead.getMultiple(receiptKeys), [ct, receiptKeys])
+  );
 
-export const unreadEqual = (u1: Unread, u2: Unread): boolean => {
-  const countEqual = u1.highlight === u2.highlight && u1.total === u2.total;
-
-  if (!countEqual) return false;
-
-  const f1 = u1.from;
-  const f2 = u2.from;
-  if (f1 === null && f2 === null) return true;
-  if (f1 === null || f2 === null) return false;
-
-  if (f1.size !== f2.size) return false;
-
-  let fromEqual = true;
-  f1?.forEach((item) => {
-    if (!f2?.has(item)) {
-      fromEqual = false;
-    }
-  });
-
-  return fromEqual;
-};
-
-const baseRoomToUnread = atom<RoomToUnread>(new Map());
-export const roomToUnreadAtom = atom<RoomToUnread, [RoomToUnreadAction], undefined>(
-  (get) => get(baseRoomToUnread),
-  (get, set, action) => {
-    if (action.type === 'RESET') {
-      const draftRoomToUnread: RoomToUnread = new Map();
-      action.unreadInfos.forEach((unreadInfo) => {
-        putUnreadInfo(
-          draftRoomToUnread,
-          getAllParents(get(roomToParentsAtom), unreadInfo.roomId),
-          unreadInfo
-        );
+  useEffect(() => {
+    const receipts = receiptsResult.value;
+    if (receipts) {
+      const rooms: string[] = [];
+      Array.from(roomToLatestEvent.entries()).forEach(([roomId, event], index) => {
+        const receipt = receipts[index];
+        if (!receipt || receipt.ts > event.origin_server_ts) return;
+        rooms.push(roomId);
       });
-      set(baseRoomToUnread, draftRoomToUnread);
-      return;
+
+      setUnreadRooms(new Set(rooms));
     }
-    if (action.type === 'PUT') {
-      const { unreadInfo } = action;
-      const currentUnread = get(baseRoomToUnread).get(unreadInfo.roomId);
-      if (currentUnread && unreadEqual(currentUnread, unreadInfoToUnread(unreadInfo))) {
-        // Do not update if unread data has not changes
-        // like total & highlight
-        return;
-      }
-      set(
-        baseRoomToUnread,
-        produce(get(baseRoomToUnread), (draftRoomToUnread) =>
-          putUnreadInfo(
-            draftRoomToUnread,
-            getAllParents(get(roomToParentsAtom), unreadInfo.roomId),
-            unreadInfo
-          )
-        )
-      );
-      return;
-    }
-    if (action.type === 'DELETE' && get(baseRoomToUnread).has(action.roomId)) {
-      set(
-        baseRoomToUnread,
-        produce(get(baseRoomToUnread), (draftRoomToUnread) =>
-          deleteUnreadInfo(
-            draftRoomToUnread,
-            getAllParents(get(roomToParentsAtom), action.roomId),
-            action.roomId
-          )
-        )
-      );
-    }
-  }
-);
-
-export const useBindRoomToUnreadAtom = (mx: MatrixClient, unreadAtom: typeof roomToUnreadAtom) => {
-  const setUnreadAtom = useSetAtom(unreadAtom);
-  const roomsNotificationPreferences = useRoomsNotificationPreferencesContext();
-
-  useEffect(() => {
-    setUnreadAtom({
-      type: 'RESET',
-      unreadInfos: getUnreadInfos(mx),
-    });
-  }, [mx, setUnreadAtom]);
-
-  useSyncState(
-    mx,
-    useCallback(
-      (state, prevState) => {
-        if (
-          (state === SyncState.Prepared && prevState === null) ||
-          (state === SyncState.Syncing && prevState !== SyncState.Syncing)
-        ) {
-          setUnreadAtom({
-            type: 'RESET',
-            unreadInfos: getUnreadInfos(mx),
-          });
-        }
-      },
-      [mx, setUnreadAtom]
-    )
-  );
-
-  useEffect(() => {
-    const handleTimelineEvent = (
-      mEvent: MatrixEvent,
-      room: Room | undefined,
-      toStartOfTimeline: boolean | undefined,
-      removed: boolean,
-      data: IRoomTimelineData
-    ) => {
-      if (!room || !data.liveEvent || room.isSpaceRoom() || !isNotificationEvent(mEvent)) return;
-      if (getNotificationType(mx, room.roomId) === NotificationType.Mute) {
-        setUnreadAtom({
-          type: 'DELETE',
-          roomId: room.roomId,
-        });
-        return;
-      }
-
-      if (mEvent.getSender() === mx.getUserId()) return;
-      setUnreadAtom({ type: 'PUT', unreadInfo: getUnreadInfo(room) });
-    };
-    mx.on(RoomEvent.Timeline, handleTimelineEvent);
-    return () => {
-      mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
-    };
-  }, [mx, setUnreadAtom]);
-
-  useEffect(() => {
-    const handleReceipt = (mEvent: MatrixEvent, room: Room) => {
-      const myUserId = mx.getUserId();
-      if (!myUserId) return;
-      if (room.isSpaceRoom()) return;
-      const content = mEvent.getContent<ReceiptContent>();
-
-      const isMyReceipt = Object.keys(content).find((eventId) =>
-        (Object.keys(content[eventId]) as ReceiptType[]).find(
-          (receiptType) => content[eventId][receiptType][myUserId]
-        )
-      );
-      if (isMyReceipt) {
-        setUnreadAtom({ type: 'DELETE', roomId: room.roomId });
-      }
-    };
-    mx.on(RoomEvent.Receipt, handleReceipt);
-    return () => {
-      mx.removeListener(RoomEvent.Receipt, handleReceipt);
-    };
-  }, [mx, setUnreadAtom]);
-
-  useEffect(() => {
-    setUnreadAtom({
-      type: 'RESET',
-      unreadInfos: getUnreadInfos(mx),
-    });
-  }, [mx, setUnreadAtom, roomsNotificationPreferences]);
-
-  useEffect(() => {
-    const handleMembershipChange = (room: Room, membership: string) => {
-      if (membership !== Membership.Join) {
-        setUnreadAtom({
-          type: 'DELETE',
-          roomId: room.roomId,
-        });
-      }
-    };
-    mx.on(RoomEvent.MyMembership, handleMembershipChange);
-    return () => {
-      mx.removeListener(RoomEvent.MyMembership, handleMembershipChange);
-    };
-  }, [mx, setUnreadAtom]);
-
-  useStateEventCallback(
-    mx,
-    useCallback(
-      (mEvent) => {
-        if (mEvent.getType() === StateEvent.SpaceChild) {
-          setUnreadAtom({
-            type: 'RESET',
-            unreadInfos: getUnreadInfos(mx),
-          });
-        }
-      },
-      [mx, setUnreadAtom]
-    )
-  );
+  }, [setUnreadRooms, receiptsResult, roomToLatestEvent]);
 };
diff --git a/src/app/state/spaceRooms.ts b/src/app/state/spaceRooms.ts
index 94abe2bc..ab6584e7 100644
--- a/src/app/state/spaceRooms.ts
+++ b/src/app/state/spaceRooms.ts
@@ -30,7 +30,7 @@ type SpaceRoomsAction =
       roomIds: string[];
     };
 
-export const spaceRoomsAtom = atom<Set<string>, [SpaceRoomsAction], undefined>(
+export const spaceRoomsAtom = atom<Set<string>, [SpaceRoomsAction], void>(
   (get) => get(baseSpaceRoomsAtom),
   (get, set, action) => {
     const current = get(baseSpaceRoomsAtom);
diff --git a/src/app/state/typingMembers.ts b/src/app/state/typingMembers.ts
index e94ba972..5ff57af6 100644
--- a/src/app/state/typingMembers.ts
+++ b/src/app/state/typingMembers.ts
@@ -1,155 +1,46 @@
-import produce from 'immer';
 import { atom, useSetAtom } from 'jotai';
-import { MatrixClient, RoomMemberEvent, RoomMemberEventHandlerMap } from 'matrix-js-sdk';
 import { useEffect } from 'react';
+import { roomTypingEphemeral } from 'neurone/lib/utils/sync/v3/join';
 import { useSetting } from './hooks/settings';
 import { settingsAtom } from './settings';
+import { ClientContext } from '../../client/context';
 
-export const TYPING_TIMEOUT_MS = 5000; // 5 seconds
+export type IRoomIdToTypingMembers = Map<string, string[]>;
 
-export type TypingReceipt = {
-  userId: string;
-  ts: number;
-};
-export type IRoomIdToTypingMembers = Map<string, TypingReceipt[]>;
-
-type TypingMemberPutAction = {
-  type: 'PUT';
-  roomId: string;
-  userId: string;
-  ts: number;
-};
-type TypingMemberDeleteAction = {
-  type: 'DELETE';
-  roomId: string;
-  userId: string;
-};
-export type IRoomIdToTypingMembersAction = TypingMemberPutAction | TypingMemberDeleteAction;
-
-const baseRoomIdToTypingMembersAtom = atom<IRoomIdToTypingMembers>(new Map());
-
-const putTypingMember = (
-  roomToMembers: IRoomIdToTypingMembers,
-  action: TypingMemberPutAction
-): IRoomIdToTypingMembers => {
-  let typingMembers = roomToMembers.get(action.roomId) ?? [];
-
-  typingMembers = typingMembers.filter((receipt) => receipt.userId !== action.userId);
-  typingMembers.push({
-    userId: action.userId,
-    ts: action.ts,
-  });
-  roomToMembers.set(action.roomId, typingMembers);
-  return roomToMembers;
-};
-
-const deleteTypingMember = (
-  roomToMembers: IRoomIdToTypingMembers,
-  action: TypingMemberDeleteAction
-): IRoomIdToTypingMembers => {
-  let typingMembers = roomToMembers.get(action.roomId) ?? [];
-
-  typingMembers = typingMembers.filter((receipt) => receipt.userId !== action.userId);
-  if (typingMembers.length === 0) {
-    roomToMembers.delete(action.roomId);
-  } else {
-    roomToMembers.set(action.roomId, typingMembers);
-  }
-  return roomToMembers;
-};
-
-const timeoutReceipt = (
-  roomToMembers: IRoomIdToTypingMembers,
-  roomId: string,
-  userId: string,
-  timeout: number
-): boolean | undefined => {
-  const typingMembers = roomToMembers.get(roomId) ?? [];
-
-  const target = typingMembers.find((receipt) => receipt.userId === userId);
-  if (!target) return undefined;
-
-  return Date.now() - target.ts >= timeout;
-};
-
-export const roomIdToTypingMembersAtom = atom<
-  IRoomIdToTypingMembers,
-  [IRoomIdToTypingMembersAction],
-  undefined
->(
-  (get) => get(baseRoomIdToTypingMembersAtom),
-  (get, set, action) => {
-    const rToTyping = get(baseRoomIdToTypingMembersAtom);
-
-    if (action.type === 'PUT') {
-      set(
-        baseRoomIdToTypingMembersAtom,
-        produce(rToTyping, (draft) => putTypingMember(draft, action))
-      );
-
-      // remove typing receipt after some timeout
-      // to prevent stuck typing members
-      setTimeout(() => {
-        const { roomId, userId } = action;
-        const timeout = timeoutReceipt(
-          get(baseRoomIdToTypingMembersAtom),
-          roomId,
-          userId,
-          TYPING_TIMEOUT_MS
-        );
-        if (timeout) {
-          set(
-            baseRoomIdToTypingMembersAtom,
-            produce(get(baseRoomIdToTypingMembersAtom), (draft) =>
-              deleteTypingMember(draft, {
-                type: 'DELETE',
-                roomId,
-                userId,
-              })
-            )
-          );
-        }
-      }, TYPING_TIMEOUT_MS);
-    }
-
-    if (
-      action.type === 'DELETE' &&
-      rToTyping.get(action.roomId)?.find((receipt) => receipt.userId === action.userId)
-    ) {
-      set(
-        baseRoomIdToTypingMembersAtom,
-        produce(rToTyping, (draft) => deleteTypingMember(draft, action))
-      );
-    }
-  }
-);
+export const roomIdToTypingMembersAtom = atom<IRoomIdToTypingMembers>(new Map());
 
 export const useBindRoomIdToTypingMembersAtom = (
-  mx: MatrixClient,
+  ct: ClientContext,
   typingMembersAtom: typeof roomIdToTypingMembersAtom
 ) => {
   const setTypingMembers = useSetAtom(typingMembersAtom);
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
   useEffect(() => {
-    const handleTypingEvent: RoomMemberEventHandlerMap[RoomMemberEvent.Typing] = (
-      event,
-      member
-    ) => {
+    const unsubscribe = ct.sync.observable.subscribe((syncValue) => {
       if (hideActivity) {
+        setTypingMembers(new Map());
         return;
       }
-      setTypingMembers({
-        type: member.typing ? 'PUT' : 'DELETE',
-        roomId: member.roomId,
-        userId: member.userId,
-        ts: Date.now(),
-      });
-    };
 
-    mx.on(RoomMemberEvent.Typing, handleTypingEvent);
-    return () => {
-      mx.removeListener(RoomMemberEvent.Typing, handleTypingEvent);
-    };
-  }, [mx, setTypingMembers, hideActivity]);
+      const [, data] = syncValue ?? [];
+      const { join } = data?.rooms ?? {};
+      if (!join) return;
+
+      const roomToUsers: IRoomIdToTypingMembers = new Map();
+
+      Object.keys(join).forEach((roomId) => {
+        const ephemeralEvents = join[roomId].ephemeral?.events;
+        const typingEvent = ephemeralEvents && roomTypingEphemeral(ephemeralEvents);
+        const users = typingEvent?.content.user_ids ?? [];
+        if (users.length > 0) {
+          roomToUsers.set(roomId, users);
+        }
+      });
+
+      setTypingMembers(roomToUsers);
+    });
+
+    return unsubscribe;
+  }, [ct, setTypingMembers, hideActivity]);
 };
diff --git a/src/app/state/upload.ts b/src/app/state/upload.ts
index 810c0d2e..35d599a7 100644
--- a/src/app/state/upload.ts
+++ b/src/app/state/upload.ts
@@ -1,9 +1,12 @@
 import { atom, useAtom } from 'jotai';
 import { atomFamily } from 'jotai/utils';
-import { MatrixClient, UploadResponse, UploadProgress, MatrixError } from 'matrix-js-sdk';
+import { MatrixError } from 'neurone/lib/matrix-request';
+import { postUpload, PostUploadOK } from 'neurone/lib/api/matrix/media/v3/upload';
 import { useCallback } from 'react';
 import { useThrottle } from '../hooks/useThrottle';
-import { uploadContent, TUploadContent } from '../utils/matrix';
+import { UploadContent } from '../utils/matrix';
+import { getAuthUploadRequest, UploadProgress } from '../../client/request';
+import { useClient } from '../hooks/useClient';
 
 export enum UploadStatus {
   Idle = 'idle',
@@ -13,34 +16,34 @@ export enum UploadStatus {
 }
 
 export type UploadIdle = {
-  file: TUploadContent;
+  file: UploadContent;
   status: UploadStatus.Idle;
 };
 
 export type UploadLoading = {
-  file: TUploadContent;
+  file: UploadContent;
   status: UploadStatus.Loading;
-  promise: Promise<UploadResponse>;
+  abortController: AbortController;
   progress: UploadProgress;
 };
 
 export type UploadSuccess = {
-  file: TUploadContent;
+  file: UploadContent;
   status: UploadStatus.Success;
   mxc: string;
 };
 
 export type UploadError = {
-  file: TUploadContent;
+  file: UploadContent;
   status: UploadStatus.Error;
-  error: MatrixError;
+  error: MatrixError | Error;
 };
 
 export type Upload = UploadIdle | UploadLoading | UploadSuccess | UploadError;
 
 export type UploadAtomAction =
   | {
-      promise: Promise<UploadResponse>;
+      abortController: AbortController;
     }
   | {
       progress: UploadProgress;
@@ -49,10 +52,10 @@ export type UploadAtomAction =
       mxc: string;
     }
   | {
-      error: MatrixError;
+      error: MatrixError | Error;
     };
 
-export const createUploadAtom = (file: TUploadContent) => {
+export const createUploadAtom = (file: UploadContent) => {
   const baseUploadAtom = atom<Upload>({
     file,
     status: UploadStatus.Idle,
@@ -61,11 +64,11 @@ export const createUploadAtom = (file: TUploadContent) => {
     (get) => get(baseUploadAtom),
     (get, set, update) => {
       const uploadState = get(baseUploadAtom);
-      if ('promise' in update) {
+      if ('abortController' in update) {
         set(baseUploadAtom, {
           status: UploadStatus.Loading,
           file,
-          promise: update.promise,
+          abortController: update.abortController,
           progress: { loaded: 0, total: file.size },
         });
         return;
@@ -95,13 +98,10 @@ export const createUploadAtom = (file: TUploadContent) => {
     }
   );
 };
-export type TUploadAtom = ReturnType<typeof createUploadAtom>;
+export type UploadAtom = ReturnType<typeof createUploadAtom>;
 
-export const useBindUploadAtom = (
-  mx: MatrixClient,
-  uploadAtom: TUploadAtom,
-  hideFilename?: boolean
-) => {
+export const useBindUploadAtom = (uploadAtom: UploadAtom, hideFilename?: boolean) => {
+  const ct = useClient();
   const [upload, setUpload] = useAtom(uploadAtom);
   const { file } = upload;
 
@@ -110,23 +110,46 @@ export const useBindUploadAtom = (
     { immediate: true, wait: 200 }
   );
 
-  const startUpload = useCallback(
-    () =>
-      uploadContent(mx, file, {
-        hideFilename,
-        onPromise: (promise: Promise<UploadResponse>) => setUpload({ promise }),
-        onProgress: handleProgress,
-        onSuccess: (mxc) => setUpload({ mxc }),
-        onError: (error) => setUpload({ error }),
+  const startUpload = useCallback(() => {
+    const request = getAuthUploadRequest<PostUploadOK>(
+      ct.session.baseUrl,
+      ct.session.accessToken,
+      handleProgress
+    );
+    const abortController = new AbortController();
+
+    request(
+      postUpload({
+        searchParams: {
+          filename: hideFilename ? undefined : file.name,
+        },
+        body: file,
       }),
-    [mx, file, hideFilename, setUpload, handleProgress]
-  );
+      abortController.signal
+    )
+      .then(([error, data]) => {
+        if (error) {
+          setUpload({ error });
+          return;
+        }
+        setUpload({ mxc: data.content_uri });
+      })
+      .catch((anyError) => {
+        if (anyError instanceof Error) {
+          setUpload({ error: anyError });
+          return;
+        }
+        setUpload({ error: new Error('Unknown Error') });
+      });
+
+    setUpload({ abortController });
+  }, [ct, file, hideFilename, setUpload, handleProgress]);
 
   const cancelUpload = useCallback(async () => {
     if (upload.status === UploadStatus.Loading) {
-      await mx.cancelUpload(upload.promise);
+      upload.abortController.abort();
     }
-  }, [mx, upload]);
+  }, [upload]);
 
   return {
     upload,
@@ -135,12 +158,11 @@ export const useBindUploadAtom = (
   };
 };
 
-export const createUploadAtomFamily = () =>
-  atomFamily<TUploadContent, TUploadAtom>(createUploadAtom);
-export type TUploadAtomFamily = ReturnType<typeof createUploadAtomFamily>;
+export const createUploadContentToUploadAtom = () =>
+  atomFamily<UploadContent, UploadAtom>(createUploadAtom);
 
-export const createUploadFamilyObserverAtom = (
-  uploadFamily: TUploadAtomFamily,
-  uploads: TUploadContent[]
+export const createUploadsAtom = (
+  uploadFamily: ReturnType<typeof createUploadContentToUploadAtom>,
+  uploads: UploadContent[]
 ) => atom<Upload[]>((get) => uploads.map((upload) => get(uploadFamily(upload))));
-export type TUploadFamilyObserverAtom = ReturnType<typeof createUploadFamilyObserverAtom>;
+export type UploadsAtom = ReturnType<typeof createUploadsAtom>;
diff --git a/src/app/utils/disposable.ts b/src/app/utils/disposable.ts
deleted file mode 100644
index 74424154..00000000
--- a/src/app/utils/disposable.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export type DisposeCallback<DisposeArgs extends unknown[] = [], DisposeReturn = void> = (
-  ...args: DisposeArgs
-) => DisposeReturn;
-export type DisposableContext<
-  DisposableArgs extends unknown[] = [],
-  DisposeArgs extends unknown[] = [],
-  DisposeReturn = void
-> = (...args: DisposableArgs) => DisposeCallback<DisposeArgs, DisposeReturn>;
-
-export const disposable = <
-  DisposableArgs extends unknown[],
-  DisposeArgs extends unknown[] = [],
-  DisposeReturn = void
->(
-  context: DisposableContext<DisposableArgs, DisposeArgs, DisposeReturn>
-) => context;
diff --git a/src/app/utils/dom.ts b/src/app/utils/dom.ts
index 80db3ae7..5b8a75a1 100644
--- a/src/app/utils/dom.ts
+++ b/src/app/utils/dom.ts
@@ -173,16 +173,16 @@ export type ScrollInfo = {
   scrollable: boolean;
 };
 export const getScrollInfo = (target: HTMLElement): ScrollInfo => ({
-  offsetTop: Math.round(target.offsetTop),
-  top: Math.round(target.scrollTop),
-  height: Math.round(target.scrollHeight),
-  viewHeight: Math.round(target.offsetHeight),
+  offsetTop: target.offsetTop,
+  top: target.scrollTop,
+  height: target.scrollHeight,
+  viewHeight: target.offsetHeight,
   scrollable: target.scrollHeight > target.offsetHeight,
 });
 
 export const scrollToBottom = (scrollEl: HTMLElement, behavior?: 'auto' | 'instant' | 'smooth') => {
   scrollEl.scrollTo({
-    top: Math.round(scrollEl.scrollHeight - scrollEl.offsetHeight),
+    top: scrollEl.scrollHeight - scrollEl.offsetHeight,
     behavior,
   });
 };
diff --git a/src/app/utils/featureCheck.ts b/src/app/utils/featureCheck.ts
index a9474c31..6b2cb2e4 100644
--- a/src/app/utils/featureCheck.ts
+++ b/src/app/utils/featureCheck.ts
@@ -1,21 +1,28 @@
 export const checkIndexedDBSupport = async (): Promise<boolean> => {
-  const ts = new Date().getTime();
-  const dbName = `checkIndexedDBSupport-${ts}`;
+  const dbName = `checkIndexedDBSupport-${Date.now()}`;
+
   return new Promise((resolve) => {
-    let db;
+    let request: IDBOpenDBRequest;
+
     try {
-      db = indexedDB.open(dbName);
+      request = indexedDB.open(dbName);
     } catch {
       resolve(false);
       return;
     }
-    db.onsuccess = () => {
+
+    request.onsuccess = () => {
+      const db = request.result;
+
+      db.close();
+
+      indexedDB.deleteDatabase(dbName);
+
       resolve(true);
-      indexedDB.deleteDatabase(dbName);
     };
-    db.onerror = () => {
+
+    request.onerror = () => {
       resolve(false);
-      indexedDB.deleteDatabase(dbName);
     };
   });
 };
diff --git a/src/app/utils/matrix-uia.ts b/src/app/utils/matrix-uia.ts
index 15c5799c..b174f678 100644
--- a/src/app/utils/matrix-uia.ts
+++ b/src/app/utils/matrix-uia.ts
@@ -1,4 +1,25 @@
-import { AuthType, IAuthData, UIAFlow } from 'matrix-js-sdk';
+export enum AuthType {
+  Password = 'm.login.password',
+  Recaptcha = 'm.login.recaptcha',
+  Terms = 'm.login.terms',
+  Email = 'm.login.email.identity',
+  Msisdn = 'm.login.msisdn',
+  Sso = 'm.login.sso',
+  SsoUnstable = 'org.matrix.login.sso',
+  Dummy = 'm.login.dummy',
+  RegistrationToken = 'm.login.registration_token',
+}
+
+export type UIAFlow = {
+  stages: Array<string>;
+};
+
+export type AuthResponse = {
+  session?: string;
+  completed?: string[];
+  flows?: UIAFlow[];
+  params?: Record<string, Record<string, any>>;
+};
 
 export const getSupportedUIAFlows = (uiaFlows: UIAFlow[], supportedStages: string[]): UIAFlow[] => {
   const supportedUIAFlows = uiaFlows.filter((flow) =>
@@ -8,30 +29,30 @@ export const getSupportedUIAFlows = (uiaFlows: UIAFlow[], supportedStages: strin
   return supportedUIAFlows;
 };
 
-export const getUIACompleted = (authData: IAuthData): string[] => {
+export const getUIACompleted = (authData: AuthResponse): string[] => {
   const completed = authData.completed ?? [];
   return completed;
 };
 
 export type UIAParams = Record<string, Record<string, unknown>>;
-export const getUIAParams = (authData: IAuthData): UIAParams => {
+export const getUIAParams = (authData: AuthResponse): UIAParams => {
   const params = authData.params ?? {};
   return params;
 };
 
-export const getUIASession = (authData: IAuthData): string | undefined => {
+export const getUIASession = (authData: AuthResponse): string | undefined => {
   const session = authData.session ?? undefined;
   return session;
 };
 
-export const getUIAErrorCode = (authData: IAuthData): string | undefined => {
+export const getUIAErrorCode = (authData: AuthResponse): string | undefined => {
   const errorCode =
     'errcode' in authData && typeof authData.errcode === 'string' ? authData.errcode : undefined;
 
   return errorCode;
 };
 
-export const getUIAError = (authData: IAuthData): string | undefined => {
+export const getUIAError = (authData: AuthResponse): string | undefined => {
   const errorCode =
     'error' in authData && typeof authData.error === 'string' ? authData.error : undefined;
 
diff --git a/src/app/utils/matrix.ts b/src/app/utils/matrix.ts
index 4c86c4e2..848fed57 100644
--- a/src/app/utils/matrix.ts
+++ b/src/app/utils/matrix.ts
@@ -3,21 +3,17 @@ import {
   decryptAttachment,
   encryptAttachment,
 } from 'browser-encrypt-attachment';
-import {
-  EventTimeline,
-  MatrixClient,
-  MatrixError,
-  MatrixEvent,
-  Room,
-  RoomMember,
-  UploadProgress,
-  UploadResponse,
-} from 'matrix-js-sdk';
+import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
 import to from 'await-to-js';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
+import { MatrixError } from 'neurone/lib/matrix-request';
 import { IImageInfo, IThumbnailContent, IVideoInfo } from '../../types/matrix/common';
-import { AccountDataEvent } from '../../types/matrix/accountData';
+import { AccountDataType } from '../../types/matrix/accountData';
 import { getStateEvent } from './room';
-import { Membership, StateEvent } from '../../types/matrix/room';
+import { StateEvent } from '../../types/matrix/room';
+import { ClientContext } from '../../client/context';
+import { JoinRoomMemberObject } from '../../client/storage/collections';
+import { rError } from '../../client/reader';
 
 const DOMAIN_REGEX = /\b(?:[a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}\b/;
 
@@ -133,43 +129,7 @@ export const decryptFile = async (
   return blob;
 };
 
-export type TUploadContent = File | Blob;
-
-export type ContentUploadOptions = {
-  name?: string;
-  fileType?: string;
-  hideFilename?: boolean;
-  onPromise?: (promise: Promise<UploadResponse>) => void;
-  onProgress?: (progress: UploadProgress) => void;
-  onSuccess: (mxc: string) => void;
-  onError: (error: MatrixError) => void;
-};
-
-export const uploadContent = async (
-  mx: MatrixClient,
-  file: TUploadContent,
-  options: ContentUploadOptions
-) => {
-  const { name, fileType, hideFilename, onProgress, onPromise, onSuccess, onError } = options;
-
-  const uploadPromise = mx.uploadContent(file, {
-    name,
-    type: fileType,
-    includeFilename: !hideFilename,
-    progressHandler: onProgress,
-  });
-  onPromise?.(uploadPromise);
-  try {
-    const data = await uploadPromise;
-    const mxc = data.content_uri;
-    if (mxc) onSuccess(mxc);
-    else onError(new MatrixError(data));
-  } catch (e: any) {
-    const error = typeof e?.message === 'string' ? e.message : undefined;
-    const errcode = typeof e?.name === 'string' ? e.message : undefined;
-    onError(new MatrixError({ error, errcode }));
-  }
-};
+export type UploadContent = File | Blob;
 
 export const matrixEventByRecency = (m1: MatrixEvent, m2: MatrixEvent) => m2.getTs() - m1.getTs();
 
@@ -179,62 +139,61 @@ export const factoryEventSentBy = (senderId: string) => (ev: MatrixEvent) =>
 export const eventWithShortcode = (ev: MatrixEvent) =>
   typeof ev.getContent().shortcode === 'string';
 
-export const getDMRoomFor = (mx: MatrixClient, userId: string): Room | undefined => {
-  const dmLikeRooms = mx
-    .getRooms()
-    .filter(
-      (room) =>
-        room.getMyMembership() === Membership.Join &&
-        room.hasEncryptionStateEvent() &&
-        room.getMembers().length <= 2
+export const getUserDirectRooms = (ct: ClientContext, userId: string): string[] => {
+  const rooms = Object.keys(ct.roomToSummary.read);
+  const directRooms = rooms.filter((roomId) => {
+    const summary = ct.roomToSummary.read.get(roomId);
+    const heroes = summary?.['m.heroes'];
+    return (
+      Array.isArray(heroes) &&
+      heroes.length === 1 &&
+      heroes[1] === userId &&
+      ct.directRooms.read.has(roomId)
     );
+  });
 
-  return dmLikeRooms.find((room) => room.getMember(userId));
+  return directRooms;
 };
 
-export const guessDmRoomUserId = (room: Room, myUserId: string): string => {
-  const getOldestMember = (members: RoomMember[]): RoomMember | undefined => {
-    let oldestMemberTs: number | undefined;
-    let oldestMember: RoomMember | undefined;
+export const guessDmRoomUserId = (members: JoinRoomMemberObject[], myUserId: string): string => {
+  let oldestMemberTs: number | undefined;
+  let oldestMember: JoinRoomMemberObject | undefined;
 
-    const pickOldestMember = (member: RoomMember) => {
-      if (member.userId === myUserId) return;
+  const pickOldestMember = (member: JoinRoomMemberObject) => {
+    if (member.userId === myUserId) return;
 
-      if (
-        oldestMemberTs === undefined ||
-        (member.events.member && member.events.member.getTs() < oldestMemberTs)
-      ) {
-        oldestMember = member;
-        oldestMemberTs = member.events.member?.getTs();
-      }
-    };
-
-    members.forEach(pickOldestMember);
-
-    return oldestMember;
+    if (oldestMemberTs === undefined || member.event.origin_server_ts < oldestMemberTs) {
+      oldestMember = member;
+      oldestMemberTs = member.event.origin_server_ts;
+    }
   };
 
-  // Pick the joined user who's been here longest (and isn't us),
-  const member = getOldestMember(room.getJoinedMembers());
-  if (member) return member.userId;
+  members.forEach(pickOldestMember);
 
-  // if there are no joined members other than us, use the oldest member
-  const member1 = getOldestMember(
-    room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getMembers() ?? []
-  );
-  return member1?.userId ?? myUserId;
+  return oldestMember?.userId ?? myUserId;
 };
 
+const getUserIdToRoomIds = (content?: Record<string, unknown>): Record<string, string[]> => {
+  const userIdToRoomIds: Record<string, string[]> = {};
+
+  if (typeof content === 'object' && content) {
+    Object.keys(content).forEach((uId) => {
+      const roomIds = content[uId];
+      if (Array.isArray(roomIds)) {
+        userIdToRoomIds[uId] = roomIds.filter((rId) => typeof rId === 'string');
+      }
+    });
+  }
+  return userIdToRoomIds;
+};
 export const addRoomIdToMDirect = async (
-  mx: MatrixClient,
+  ct: ClientContext,
   roomId: string,
   userId: string
 ): Promise<void> => {
-  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct as any);
-  let userIdToRoomIds: Record<string, string[]> = {};
-
-  if (typeof mDirectsEvent !== 'undefined')
-    userIdToRoomIds = structuredClone(mDirectsEvent.getContent());
+  const mDirectsEventObj = await ct.storage.accountData.read.get(AccountDataType.Direct);
+  const content = mDirectsEventObj?.event.content as Record<string, unknown> | undefined;
+  const userIdToRoomIds = getUserIdToRoomIds(content);
 
   // remove it from the lists of any others users
   // (it can only be a DM room for one person)
@@ -255,15 +214,18 @@ export const addRoomIdToMDirect = async (
   }
   userIdToRoomIds[userId] = roomIds;
 
-  await mx.setAccountData(AccountDataEvent.Direct as any, userIdToRoomIds as any);
+  await ct.requestAuthJSON(
+    putAccountData({
+      pathParams: { userId: ct.session.userId, type: AccountDataType.Direct },
+      body: userIdToRoomIds,
+    })
+  );
 };
 
-export const removeRoomIdFromMDirect = async (mx: MatrixClient, roomId: string): Promise<void> => {
-  const mDirectsEvent = mx.getAccountData(AccountDataEvent.Direct as any);
-  let userIdToRoomIds: Record<string, string[]> = {};
-
-  if (typeof mDirectsEvent !== 'undefined')
-    userIdToRoomIds = structuredClone(mDirectsEvent.getContent());
+export const removeRoomIdFromMDirect = async (ct: ClientContext, roomId: string): Promise<void> => {
+  const mDirectsEventObj = await ct.storage.accountData.read.get(AccountDataType.Direct);
+  const content = mDirectsEventObj?.event.content as Record<string, unknown> | undefined;
+  const userIdToRoomIds = getUserIdToRoomIds(content);
 
   Object.keys(userIdToRoomIds).forEach((targetUserId) => {
     const roomIds = userIdToRoomIds[targetUserId];
@@ -273,7 +235,12 @@ export const removeRoomIdFromMDirect = async (mx: MatrixClient, roomId: string):
     }
   });
 
-  await mx.setAccountData(AccountDataEvent.Direct as any, userIdToRoomIds as any);
+  await ct.requestAuthJSON(
+    putAccountData({
+      pathParams: { userId: ct.session.userId, type: AccountDataType.Direct },
+      body: userIdToRoomIds,
+    })
+  );
 };
 
 export const mxcUrlToHttp = (
@@ -313,9 +280,9 @@ export const downloadEncryptedMedia = async (
   return decryptedContent;
 };
 
-export const rateLimitedActions = async <T, R = void>(
+export const rateLimitedActions = async <T>(
   data: T[],
-  callback: (item: T, index: number) => Promise<R>,
+  callback: (item: T, index: number) => Promise<MatrixError | undefined>,
   maxRetryCount?: number
 ) => {
   let retryCount = 0;
@@ -328,14 +295,15 @@ export const rateLimitedActions = async <T, R = void>(
     });
 
   const performAction = async (dataItem: T, index: number) => {
-    const [err] = await to<R, MatrixError>(callback(dataItem, index));
+    const [, err] = await to<MatrixError | undefined>(callback(dataItem, index));
 
-    if (err?.httpStatus === 429) {
+    if (err?.status === 429) {
       if (retryCount === maxRetryCount) {
         return;
       }
 
-      const waitMS = err.getRetryAfterMs() ?? 3000;
+      const retryAfterMs = rError.retryAfterMs(err.data) ?? undefined;
+      const waitMS = retryAfterMs ?? 3000;
       actionInterval = waitMS * 1.5;
       await sleepForMs(waitMS);
       retryCount += 1;
diff --git a/src/app/utils/randomString.ts b/src/app/utils/randomString.ts
new file mode 100644
index 00000000..ec15bd74
--- /dev/null
+++ b/src/app/utils/randomString.ts
@@ -0,0 +1,84 @@
+// https://github.com/matrix-org/matrix-js-sdk/blob/c7a75c882479fc54f24eadce963a0c5c0d3c4788/src/randomstring.ts
+
+/**
+ * String representing the lowercase latin alphabet for use in {@link secureRandomStringFrom}
+ * (can be combined with other such exports or other characters by appending strings)
+ */
+export const LOWERCASE = 'abcdefghijklmnopqrstuvwxyz';
+
+/**
+ * String representing the uppercase latin alphabet for use in secureRandomStringFrom
+ * (can be combined with other such exports or other characters by appending strings)
+ */
+export const UPPERCASE = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
+
+/**
+ * String representing the arabic numerals for use in secureRandomStringFrom
+ * (can be combined with other such exports or other characters by appending strings)
+ */
+export const DIGITS = '0123456789';
+
+/**
+ * Generate a cryptographically secure random string using characters given.
+ *
+ * @param len - The length of the string to generate (must be positive and less than 32768).
+ * @param chars - The characters to use in the random string (between 2 and 256 characters long).
+ * @returns Random string of characters of length `len`.
+ */
+export function secureRandomStringFrom(len: number, chars: string): string {
+  // This is intended for latin strings so 256 possibilities should be more than enough and
+  // means we can use random bytes, minimising the amount of entropy we need to ask for.
+  if (chars.length < 2 || chars.length > 256) {
+    throw new Error('Character set must be between 2 and 256 characters long');
+  }
+
+  if (len < 1 || len > 32768) {
+    throw new Error('Requested random string length must be between 1 and 32768');
+  }
+
+  // We'll generate random unsigned bytes, so get the largest number less than 256 that is a multiple
+  // of the length of the character set: We'll need to discard any random values that are larger than
+  // this as we can't possibly map them onto the character set while keeping each character equally
+  // likely to be chosen (minus 1 to convert to indices in a string). (Essentially, we're using a d8
+  // to choose between 7 possibilities and re-rolling on an 8, keeping all 7 outcomes equally likely.)
+  // Our random values must be strictly less than this
+  const randomValueCutoff = 256 - (256 % chars.length);
+
+  // Grab 30% more entropy than we need. This should be enough that we can discard the values that are
+  // too high without having to go back and grab more unless we're super unlucky.
+  const entropyBuffer = new Uint8Array(Math.floor(len * 1.3));
+  // Mark all of this buffer as used to start with (we haven't populated it with entropy yet) so it will
+  // be filled on the first iteration.
+  let entropyBufferPos = entropyBuffer.length;
+
+  const result = [];
+  while (result.length < len) {
+    if (entropyBufferPos === entropyBuffer.length) {
+      globalThis.crypto.getRandomValues(entropyBuffer);
+      entropyBufferPos = 0;
+    }
+
+    const randomByte = entropyBuffer[entropyBufferPos];
+    entropyBufferPos += 1;
+
+    if (randomByte < randomValueCutoff) {
+      result.push(chars[randomByte % chars.length]);
+    }
+  }
+
+  return result.join('');
+}
+
+/**
+ * Generates a random string of uppercase and lowercase letters plus digits using a
+ * cryptographically secure random number generator.
+ * @param len The length of the string to generate
+ * @returns Random string of uppercase and lowercase letters plus digits of length `len`
+ */
+export function secureRandomString(len: number): string {
+  return secureRandomStringFrom(len, UPPERCASE + LOWERCASE + DIGITS);
+}
+
+export function generateClientSecret(): string {
+  return secureRandomString(32);
+}
diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts
index b4bba2ad..85318405 100644
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -1,26 +1,22 @@
 import { IconName, IconSrc } from 'folds';
-
 import {
   EventTimeline,
   EventTimelineSet,
   EventType,
-  IMentions,
-  IPowerLevelsContent,
   IPushRule,
   IPushRules,
-  JoinRule,
   MatrixClient,
   MatrixEvent,
   MsgType,
   NotificationCountType,
   RelationType,
   Room,
-  RoomMember,
 } from 'matrix-js-sdk';
 import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
+import { MessageEventWithoutRoomId, RoomMembership } from 'neurone/lib/api/types';
 import { AccountDataEvent } from '../../types/matrix/accountData';
 import {
-  IRoomCreateContent,
+  JoinRule,
   Membership,
   MessageEvent,
   NotificationType,
@@ -29,6 +25,10 @@ import {
   StateEvent,
   UnreadInfo,
 } from '../../types/matrix/room';
+import { JoinRoomMemberObject } from '../../client/storage/collections';
+import { MentionsContent, ReactionContent } from '../../types/matrix/common';
+import { ClientContext } from '../../client/context';
+import { rContent, rInReplyTo, rRelatesTo } from '../../client/reader';
 
 export const getStateEvent = (
   room: Room,
@@ -261,16 +261,16 @@ export const joinRuleToIconSrc = (
   joinRule: JoinRule,
   space: boolean
 ): IconSrc | undefined => {
-  if (joinRule === JoinRule.Restricted) {
+  if (joinRule === 'restricted') {
     return space ? icons.Space : icons.Hash;
   }
-  if (joinRule === JoinRule.Knock) {
+  if (joinRule === 'knock') {
     return space ? icons.SpaceLock : icons.HashLock;
   }
-  if (joinRule === JoinRule.Invite) {
+  if (joinRule === 'invite') {
     return space ? icons.SpaceLock : icons.HashLock;
   }
-  if (joinRule === JoinRule.Public) {
+  if (joinRule === 'public') {
     return space ? icons.SpaceGlobe : icons.HashGlobe;
   }
   return undefined;
@@ -344,13 +344,40 @@ export const getMemberDisplayName = (room: Room, userId: string): string | undef
   return name;
 };
 
+export const roomMemberContentDisplayname = (content: object): string | undefined => {
+  const name =
+    'displayname' in content && typeof content.displayname === 'string'
+      ? content.displayname.trim()
+      : undefined;
+
+  return name;
+};
+
+export const roomMemberContentAvatarUrl = (content: object): string | undefined => {
+  const url =
+    'avatar_url' in content && typeof content.avatar_url === 'string'
+      ? content.avatar_url.trim()
+      : undefined;
+
+  return url?.startsWith('mxc://') ? url : undefined;
+};
+
+export const roomMemberContentMembership = (content: object): RoomMembership | undefined => {
+  const membership =
+    'membership' in content && typeof content.membership === 'string'
+      ? (content.membership as RoomMembership)
+      : undefined;
+
+  return membership;
+};
+
 export const getMemberSearchStr = (
-  member: RoomMember,
+  member: JoinRoomMemberObject,
   query: string,
-  mxIdToName: (mxId: string) => string
+  getName: (mxId: string) => string
 ): string[] => [
-  member.rawDisplayName === member.userId ? mxIdToName(member.userId) : member.rawDisplayName,
-  query.startsWith('@') || query.indexOf(':') > -1 ? member.userId : mxIdToName(member.userId),
+  getName(member.userId),
+  query.startsWith('@') || query.indexOf(':') > -1 ? member.userId : getName(member.userId),
 ];
 
 export const getMemberAvatarMxc = (room: Room, userId: string): string | undefined => {
@@ -389,6 +416,92 @@ export const getEventReactions = (timelineSet: EventTimelineSet, eventId: string
     EventType.Reaction
   );
 
+export type ReactionGroup = {
+  key: string;
+  users: Set<string>;
+  shortcode?: string;
+  firstTs: number;
+};
+export const getReactionGroups = (
+  reactions: MessageEventWithoutRoomId<ReactionContent>[]
+): Array<ReactionGroup> => {
+  const map = new Map<string, ReactionGroup>();
+
+  reactions.forEach((event) => {
+    const { key } = event.content['m.relates_to'];
+    const userId = event.sender;
+    const { shortcode } = event.content;
+    const ts = event.origin_server_ts;
+
+    const existing = map.get(key);
+
+    if (!existing) {
+      map.set(key, {
+        key,
+        users: new Set([userId]),
+        shortcode,
+        firstTs: ts,
+      });
+    } else {
+      existing.users.add(userId);
+
+      if (!existing.shortcode && shortcode) {
+        existing.shortcode = shortcode;
+      }
+
+      // keep earliest timestamp
+      if (ts < existing.firstTs) {
+        existing.firstTs = ts;
+      }
+    }
+  });
+
+  return Array.from(map.values()).sort((a, b) => a.firstTs - b.firstTs);
+};
+
+export const getLatestEditEvent = (
+  sender: string,
+  events: MessageEventWithoutRoomId[],
+  redacted: Set<string>
+): MessageEventWithoutRoomId | undefined => {
+  let event: MessageEventWithoutRoomId | undefined;
+  events.forEach((e) => {
+    if (redacted.has(e.event_id) || sender !== e.sender) return;
+    if (!event) {
+      event = e;
+      return;
+    }
+    if (event.origin_server_ts < e.origin_server_ts) {
+      event = e;
+    }
+  });
+
+  return event;
+};
+
+export const getReplyId = (content: object): string | undefined =>
+  rInReplyTo.eventId(rRelatesTo.inReplyTo(rContent.relatesTo(content)));
+
+export const fallbackReply = (content: object): boolean => {
+  const relatesTo = rContent.relatesTo(content);
+
+  if (rRelatesTo.relType(relatesTo) === RelationType.Thread) {
+    return rRelatesTo.isFallingBack(relatesTo) ?? false;
+  }
+  return false;
+};
+
+export const getThreadId = (event: MessageEventWithoutRoomId): string | undefined => {
+  const { content } = event;
+
+  const relatesTo = rContent.relatesTo(content);
+  if (rRelatesTo.relType(relatesTo) === RelationType.Thread) {
+    return rRelatesTo.eventId(relatesTo);
+  }
+
+  return undefined;
+};
+
 export const getEventEdits = (timelineSet: EventTimelineSet, eventId: string, eventType: string) =>
   timelineSet.relations.getChildEventsForEvent(eventId, RelationType.Replace, eventType);
 
@@ -410,16 +523,18 @@ export const getEditedEvent = (
   return edits && getLatestEdit(mEvent, edits.getRelations());
 };
 
-export const canEditEvent = (mx: MatrixClient, mEvent: MatrixEvent) => {
-  const content = mEvent.getContent();
-  const relationType = content['m.relates_to']?.rel_type;
+export const canEditEvent = (ct: ClientContext, event: MessageEventWithoutRoomId) => {
+  const { content } = event;
+  const msgType = rContent.msgtype(content);
+  if (!msgType) return false;
+
+  const relationType = rRelatesTo.relType(rContent.relatesTo(content));
+
   return (
-    mEvent.getSender() === mx.getUserId() &&
+    event.sender === ct.session.userId &&
     (!relationType || relationType === RelationType.Thread) &&
-    mEvent.getType() === MessageEvent.RoomMessage &&
-    (content.msgtype === MsgType.Text ||
-      content.msgtype === MsgType.Emote ||
-      content.msgtype === MsgType.Notice)
+    event.type === MessageEvent.RoomMessage &&
+    (msgType === MsgType.Text || msgType === MsgType.Emote || msgType === MsgType.Notice)
   );
 };
 
@@ -440,8 +555,8 @@ export const reactionOrEditEvent = (mEvent: MatrixEvent) =>
   mEvent.getRelation()?.rel_type === RelationType.Annotation ||
   mEvent.getRelation()?.rel_type === RelationType.Replace;
 
-export const getMentionContent = (userIds: string[], room: boolean): IMentions => {
-  const mMentions: IMentions = {};
+export const getMentionContent = (userIds: string[], room: boolean): MentionsContent => {
+  const mMentions: MentionsContent = {};
   if (userIds.length > 0) {
     mMentions.user_ids = userIds;
   }
@@ -481,27 +596,16 @@ export const bannedInRooms = (mx: MatrixClient, rooms: string[], otherUserId: st
     return banned;
   });
 
-export const getAllVersionsRoomCreator = (room: Room): Set<string> => {
-  const creators = new Set<string>();
-
-  const createEvent = getStateEvent(room, StateEvent.RoomCreate);
-  const createContent = createEvent?.getContent<IRoomCreateContent>();
-  const creator = createEvent?.getSender();
-  if (typeof creator === 'string') creators.add(creator);
-
-  if (createContent && Array.isArray(createContent.additional_creators)) {
-    createContent.additional_creators.forEach((c) => {
-      if (typeof c === 'string') creators.add(c);
-    });
-  }
-
-  return creators;
-};
-
 export const guessPerfectParent = (
-  mx: MatrixClient,
   roomId: string,
-  parents: string[]
+  parents: string[],
+  getCreators: (roomId: string) => Set<string> | undefined,
+  getPowerLevelContent: (roomId: string) =>
+    | {
+        users?: Record<string, number>;
+        users_default?: number;
+      }
+    | undefined
 ): string | undefined => {
   if (parents.length === 1) {
     return parents[0];
@@ -510,17 +614,9 @@ export const guessPerfectParent = (
   const getSpecialUsers = (rId: string): string[] => {
     const specialUsers: Set<string> = new Set();
 
-    const r = mx.getRoom(rId);
-    if (!r) return [];
+    getCreators(rId)?.forEach((c) => specialUsers.add(c));
 
-    getAllVersionsRoomCreator(r).forEach((c) => specialUsers.add(c));
-
-    const powerLevels = getStateEvent(
-      r,
-      StateEvent.RoomPowerLevels
-    )?.getContent<IPowerLevelsContent>();
-
-    const { users_default: usersDefault, users } = powerLevels ?? {};
+    const { users_default: usersDefault, users } = getPowerLevelContent(rId) ?? {};
     const defaultPower = typeof usersDefault === 'number' ? usersDefault : 0;
 
     if (typeof users === 'object')
diff --git a/src/app/utils/sort.ts b/src/app/utils/sort.ts
index 512c1998..ee8aa832 100644
--- a/src/app/utils/sort.ts
+++ b/src/app/utils/sort.ts
@@ -15,10 +15,10 @@ export const factoryRoomIdByActivity =
   };
 
 export const factoryRoomIdByAtoZ =
-  (mx: MatrixClient): SortFunc<string> =>
+  (getRoomName: (roomId: string) => string | undefined): SortFunc<string> =>
   (a, b) => {
-    let aName = mx.getRoom(a)?.name ?? '';
-    let bName = mx.getRoom(b)?.name ?? '';
+    let aName = getRoomName(a) ?? '';
+    let bName = getRoomName(b) ?? '';
 
     // remove "#" from the room name
     // To ignore it in sorting
diff --git a/src/app/utils/user-agent.ts b/src/app/utils/user-agent.ts
index ca6d03d1..74fea24b 100644
--- a/src/app/utils/user-agent.ts
+++ b/src/app/utils/user-agent.ts
@@ -11,3 +11,20 @@ export const mobileOrTablet = (): boolean => {
   if (os.name === 'Android' || os.name === 'iOS') return true;
   return false;
 };
+
+export const getInitialDeviceDisplayName = (): string => {
+  const browserName = ua().browser.name;
+  const osName = ua().os.name;
+
+  if (browserName && osName) {
+    return `Cinny Web - ${ua().browser.name} (${ua().os.name})`;
+  }
+  if (browserName) {
+    return `Cinny Web - ${ua().browser.name}`;
+  }
+  if (osName) {
+    return `Cinny Web (${ua().os.name})`;
+  }
+
+  return 'Cinny Web';
+};
diff --git a/src/client/LogoutManager.ts b/src/client/LogoutManager.ts
new file mode 100644
index 00000000..220442e3
--- /dev/null
+++ b/src/client/LogoutManager.ts
@@ -0,0 +1,50 @@
+import { postLogout } from 'neurone/lib/api/matrix/client/v3/logout';
+import { MatrixRequest, parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+
+export class LogoutManager implements Disposable {
+  private readonly disposer = new Disposer();
+
+  private readonly request: MatrixRequest;
+
+  private readonly deleteStorage: () => Promise<void>;
+
+  constructor(
+    logoutObservable: ObservableValue<boolean>,
+    request: MatrixRequest,
+    deleteStorage: () => Promise<void>
+  ) {
+    this.request = request;
+    this.deleteStorage = deleteStorage;
+
+    this.disposer.collect(
+      logoutObservable.subscribe((loggedOut) => {
+        if (loggedOut) {
+          this.clearStoresAndRefresh();
+        }
+      })
+    );
+  }
+
+  async logout(): Promise<void> {
+    const response = await this.request(postLogout({}));
+    const [err] = await parseMatrixResp(response);
+
+    if (err) {
+      throw new Error(printMatrixError(err));
+    }
+
+    await this.clearStoresAndRefresh();
+  }
+
+  private async clearStoresAndRefresh(): Promise<void> {
+    await this.deleteStorage();
+    window.localStorage.clear();
+    window.location.reload();
+  }
+
+  dispose(): void {
+    this.disposer.run();
+  }
+}
diff --git a/src/client/MachineManager.ts b/src/client/MachineManager.ts
new file mode 100644
index 00000000..bd4ce51f
--- /dev/null
+++ b/src/client/MachineManager.ts
@@ -0,0 +1,45 @@
+import { ObjectReader } from 'neurone/lib/utils';
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { ClientContext } from './context';
+
+export class MachineManager implements Disposable {
+  private readonly ct: ClientContext;
+
+  private readonly disposer = new Disposer();
+
+  constructor(ct: ClientContext) {
+    this.ct = ct;
+
+    this.manageRoomEncryptionSettings();
+  }
+
+  private manageRoomEncryptionSettings(): void {
+    const handleEncryptionContent = (roomId: string, content: object) => {
+      const algorithm = ObjectReader.string(content, 'algorithm');
+      if (algorithm !== 'm.megolm.v1.aes-sha2') return;
+
+      const sessionRotationPeriodMs = ObjectReader.number(content, 'rotation_period_ms');
+      const sessionRotationPeriodMessages = ObjectReader.number(content, 'rotation_period_msgs');
+
+      this.ct.machine.roomEncryption.setSettings(roomId, {
+        algorithm,
+        encryptStateEvents: false,
+        onlyAllowTrustedDevices: false,
+        sessionRotationPeriodMs,
+        sessionRotationPeriodMessages,
+      });
+    };
+
+    this.disposer.collect(
+      this.ct.state.join.encryption.subscribe((events) =>
+        events.forEach((obj) => {
+          handleEncryptionContent(obj.roomId, obj.event.content);
+        })
+      )
+    );
+  }
+
+  dispose(): void {
+    this.disposer.run();
+  }
+}
diff --git a/src/client/SyncResponseManager.ts b/src/client/SyncResponseManager.ts
new file mode 100644
index 00000000..232c24f7
--- /dev/null
+++ b/src/client/SyncResponseManager.ts
@@ -0,0 +1,135 @@
+import { GetSyncOK, JoinRoom } from 'neurone/lib/api/matrix/client/v3/sync';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { EncryptionSyncChanges } from 'neurone/lib/crypto/machine';
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { roomState } from 'neurone/lib/utils/sync/v3/join';
+import { ObjectReader } from 'neurone/lib/utils';
+import to from 'await-to-js';
+import { ClientContext } from './context';
+import { writeSync } from './syncWriter';
+import { sessionValue } from './storage/collections';
+import { syncLatestEvent } from './syncLatestEvent';
+import { SyncValue } from './sync';
+
+export class SyncResponseManager implements Disposable {
+  private firstSync = true;
+
+  private readonly ct: ClientContext;
+
+  private readonly syncTokenObservable: ObservableValue<string | undefined>;
+
+  private readonly onWriteComplete: () => void;
+
+  private readonly onSyncToken: (token: string) => void;
+
+  private readonly disposer = new Disposer();
+
+  constructor(
+    ct: ClientContext,
+    syncTokenObservable: ObservableValue<string | undefined>,
+    onWriteComplete: () => void,
+    onSyncToken: (token: string) => void
+  ) {
+    this.ct = ct;
+    this.syncTokenObservable = syncTokenObservable;
+    this.onWriteComplete = onWriteComplete;
+    this.onSyncToken = onSyncToken;
+
+    this.disposer.collect(
+      this.syncTokenObservable.subscribe(this.handleSyncToken.bind(this)),
+      this.ct.sync.observable.subscribe(this.handleSync.bind(this))
+    );
+  }
+
+  private handleSyncToken = (sinceToken?: string) => {
+    if (sinceToken === undefined) return;
+    if (this.firstSync) {
+      // We will call onSyncToken explicitly
+      // after syncLatestEvent completes to prevent race
+      return;
+    }
+    this.onSyncToken(sinceToken);
+  };
+
+  private async handleSync(syncValue: SyncValue) {
+    const [, response] = syncValue ?? [];
+    if (!response) return;
+
+    // TODO: make it error safe or we can miss saving since token.
+    // resulting in staled sync loop
+    await this.beforeWrite(response);
+    await writeSync(this.ct, response);
+    await this.afterWrite(response.next_batch);
+  }
+
+  private async beforeWrite(data: GetSyncOK) {
+    const encryptionChanges: EncryptionSyncChanges = {
+      toDeviceEvents: data.to_device?.events,
+      deviceLists: data.device_lists,
+      oneTimeKeysCounts: data.device_one_time_keys_count,
+      unusedFallbackKeys: data.device_unused_fallback_key_types,
+    };
+
+    await this.ct.machine.syncChanges.receive(encryptionChanges);
+    // TODO: room key bundle detection from to device events;
+
+    const encryptedRooms = this.filterEncryptedRoomResponse(data.rooms?.join ?? {});
+    const users = this.filterUsersToTrack(encryptedRooms);
+    await this.ct.machine.userTracker.track(users);
+
+    await this.ct.machine.outgoingRequests.processAll();
+  }
+
+  private async afterWrite(nextBatch: string) {
+    this.onWriteComplete();
+
+    await this.ct.machine.outgoingRequests.processAll();
+
+    const currentSyncToken = this.syncTokenObservable.read;
+    this.ct.storage.sessionValue.write.put({
+      id: sessionValue.syncToken.id,
+      value: nextBatch,
+    });
+
+    if (this.firstSync) {
+      const [err] = await to(syncLatestEvent(this.ct, currentSyncToken));
+      if (err) console.error(err);
+      this.firstSync = false;
+      this.onSyncToken(nextBatch);
+    }
+  }
+
+  private filterEncryptedRoomResponse(join: Record<string, JoinRoom>): Array<[string, JoinRoom]> {
+    const rooms = Object.entries(join).filter(([roomId, room]) => {
+      const encrypted = roomState(room).some((event) => event.type === 'm.room.encryption');
+
+      return encrypted || this.ct.encryptedRooms.read.has(roomId);
+    });
+
+    return rooms;
+  }
+
+  private filterUsersToTrack(rooms: Array<[string, JoinRoom]>): string[] {
+    const userIds = new Set<string>();
+
+    rooms.forEach(([roomId, room]) => {
+      roomState(room)
+        .filter((event) => event.type === 'm.room.member')
+        .forEach((event) => {
+          const membership = ObjectReader.string(event.content, 'membership');
+
+          const encryptForInvited = this.ct.roomToHistoryVisibility.read.get(roomId) !== 'joined';
+
+          if (membership === 'join' || (membership === 'invite' && encryptForInvited)) {
+            userIds.add(event.state_key);
+          }
+        });
+    });
+
+    return Array.from(userIds);
+  }
+
+  dispose(): void {
+    this.disposer.run();
+  }
+}
diff --git a/src/client/context.ts b/src/client/context.ts
new file mode 100644
index 00000000..78bf0533
--- /dev/null
+++ b/src/client/context.ts
@@ -0,0 +1,773 @@
+import { ComputedObservableValue, ObservableValue } from 'neurone/lib/utils/observable';
+import { MatrixRequest } from 'neurone/lib/matrix-request';
+import { HistoryVisibility, Machine } from 'neurone/lib/crypto/machine';
+import { Disposer } from 'neurone/lib/utils/disposable';
+import {
+  MessageEventWithoutRoomId,
+  RoomSummary,
+  StateEventWithoutRoomId,
+} from 'neurone/lib/api/types';
+import {
+  InviteRoomStateObject,
+  JoinRoomStateObject,
+  KnockRoomStateObject,
+  LeaveRoomStateObject,
+  sessionValue,
+} from './storage/collections';
+import { Storage } from './storage';
+import { SyncContext, SyncValue } from './sync';
+import { Session } from '../app/state/sessions';
+import { JoinRule, SpaceChildContent, StateEventType } from '../types/matrix/room';
+import { GetTxnId } from './txn';
+import { Timeline } from './room';
+import { AccountDataType } from '../types/matrix/accountData';
+import { DecryptionManager } from './decryption';
+import { ObjectReader } from 'neurone/lib/utils';
+
+export type StateContext = {
+  join: {
+    create: ObservableValue<JoinRoomStateObject[]>;
+    encryption: ObservableValue<JoinRoomStateObject[]>;
+    tombstone: ObservableValue<JoinRoomStateObject[]>;
+    spaceChild: ObservableValue<JoinRoomStateObject[]>;
+    canonicalAlias: ObservableValue<JoinRoomStateObject[]>;
+    name: ObservableValue<JoinRoomStateObject[]>;
+    avatar: ObservableValue<JoinRoomStateObject[]>;
+    joinRules: ObservableValue<JoinRoomStateObject[]>;
+    historyVisibility: ObservableValue<JoinRoomStateObject[]>;
+  };
+  invite: {
+    create: ObservableValue<InviteRoomStateObject[]>;
+    encryption: ObservableValue<InviteRoomStateObject[]>;
+    canonicalAlias: ObservableValue<InviteRoomStateObject[]>;
+    name: ObservableValue<InviteRoomStateObject[]>;
+    avatar: ObservableValue<InviteRoomStateObject[]>;
+    joinRules: ObservableValue<InviteRoomStateObject[]>;
+  };
+  knock: {
+    create: ObservableValue<KnockRoomStateObject[]>;
+    encryption: ObservableValue<KnockRoomStateObject[]>;
+    canonicalAlias: ObservableValue<KnockRoomStateObject[]>;
+    name: ObservableValue<KnockRoomStateObject[]>;
+    avatar: ObservableValue<KnockRoomStateObject[]>;
+    joinRules: ObservableValue<KnockRoomStateObject[]>;
+  };
+  leave: {
+    create: ObservableValue<LeaveRoomStateObject[]>;
+    encryption: ObservableValue<LeaveRoomStateObject[]>;
+    canonicalAlias: ObservableValue<LeaveRoomStateObject[]>;
+    name: ObservableValue<LeaveRoomStateObject[]>;
+    avatar: ObservableValue<LeaveRoomStateObject[]>;
+    joinRules: ObservableValue<LeaveRoomStateObject[]>;
+  };
+};
+
+export type RoomsContext = {
+  join: ObservableValue<string[]>;
+  invite: ObservableValue<string[]>;
+  knock: ObservableValue<string[]>;
+  leave: ObservableValue<string[]>;
+};
+
+export type ClientContext = {
+  session: Session;
+  storage: Storage;
+  machine: Machine;
+  state: StateContext;
+  rooms: RoomsContext;
+  decryption: DecryptionManager;
+
+  directRooms: ObservableValue<Set<string>>;
+  spaceRooms: ObservableValue<Set<string>>;
+  encryptedRooms: ObservableValue<Set<string>>;
+
+  roomToParents: ObservableValue<Map<string, Set<string>>>;
+  roomToChildEvents: ObservableValue<Map<string, StateEventWithoutRoomId<SpaceChildContent>[]>>;
+  roomToSummary: ObservableValue<Map<string, RoomSummary>>;
+  roomToAlias: ObservableValue<Map<string, string>>;
+  roomToName: ObservableValue<Map<string, string>>;
+  roomToAvatar: ObservableValue<Map<string, string>>;
+  roomToHistoryVisibility: ObservableValue<Map<string, HistoryVisibility>>;
+  roomToJoinRule: ObservableValue<Map<string, JoinRule>>;
+  roomToReplacement: ObservableValue<Map<string, string>>;
+  roomToCreators: ObservableValue<Map<string, Set<string>>>;
+  roomToVersion: ObservableValue<Map<string, string>>;
+  roomToLatestEvent: ObservableValue<Map<string, MessageEventWithoutRoomId>>;
+  roomToTimeline: ObservableValue<Map<string, Timeline>>;
+
+  pendingMemberRooms: ObservableValue<string[]>;
+  sync: SyncContext;
+  requestAuthJSON: MatrixRequest;
+  getTxnId: GetTxnId;
+  logout: () => Promise<void>;
+};
+
+type RoomStateObject =
+  | JoinRoomStateObject
+  | InviteRoomStateObject
+  | KnockRoomStateObject
+  | LeaveRoomStateObject;
+
+export async function createStateContext(
+  storage: Storage,
+  disposer: Disposer
+): Promise<StateContext> {
+  const { joinRoomState, inviteRoomState, leaveRoomState, knockRoomState } = storage;
+
+  const joinCreate = await joinRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomCreate
+  );
+  const inviteCreate = await inviteRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomCreate
+  );
+  const knockCreate = await knockRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomCreate
+  );
+  const leaveCreate = await leaveRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomCreate
+  );
+  disposer.collect(joinCreate, inviteCreate, knockCreate, leaveCreate);
+
+  const joinEncryption = await joinRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomEncryption
+  );
+  const inviteEncryption = await inviteRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomEncryption
+  );
+  const knockEncryption = await knockRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomEncryption
+  );
+  const leaveEncryption = await leaveRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomEncryption
+  );
+  disposer.collect(joinEncryption, inviteEncryption, knockEncryption, leaveEncryption);
+
+  const joinTombstone = await storage.joinRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomTombstone
+  );
+  disposer.collect(joinTombstone);
+
+  const joinSpaceChild = await storage.joinRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.SpaceChild
+  );
+  disposer.collect(joinSpaceChild);
+
+  const joinCanonicalAlias = await storage.joinRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomCanonicalAlias
+  );
+  const inviteCanonicalAlias = await storage.inviteRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomCanonicalAlias
+  );
+  const knockCanonicalAlias = await storage.knockRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomCanonicalAlias
+  );
+  const leaveCanonicalAlias = await storage.leaveRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomCanonicalAlias
+  );
+
+  disposer.collect(
+    joinCanonicalAlias,
+    inviteCanonicalAlias,
+    knockCanonicalAlias,
+    leaveCanonicalAlias
+  );
+
+  const joinName = await storage.joinRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomName
+  );
+  const inviteName = await storage.inviteRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomName
+  );
+  const knockName = await storage.knockRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomName
+  );
+  const leaveName = await storage.leaveRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomName
+  );
+  disposer.collect(joinName, inviteName, knockName, leaveName);
+
+  const joinAvatar = await storage.joinRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomAvatar
+  );
+  const inviteAvatar = await storage.inviteRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomAvatar
+  );
+  const knockAvatar = await storage.knockRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomAvatar
+  );
+  const leaveAvatar = await storage.leaveRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomAvatar
+  );
+  disposer.collect(joinAvatar, inviteAvatar, knockAvatar, leaveAvatar);
+
+  const joinJoinRules = await storage.joinRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomJoinRules
+  );
+  const inviteJoinRules = await storage.inviteRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomJoinRules
+  );
+  const knockJoinRules = await storage.knockRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomJoinRules
+  );
+  const leaveJoinRules = await storage.leaveRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomJoinRules
+  );
+  disposer.collect(joinJoinRules, inviteJoinRules, knockJoinRules, leaveJoinRules);
+
+  const joinHistoryVisibility = await storage.joinRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomHistoryVisibility
+  );
+  disposer.collect(joinHistoryVisibility);
+
+  return {
+    join: {
+      create: joinCreate,
+      encryption: joinEncryption,
+      tombstone: joinTombstone,
+      spaceChild: joinSpaceChild,
+      canonicalAlias: joinCanonicalAlias,
+      name: joinName,
+      avatar: joinAvatar,
+      joinRules: joinJoinRules,
+      historyVisibility: joinHistoryVisibility,
+    },
+    invite: {
+      create: inviteCreate,
+      encryption: inviteEncryption,
+      canonicalAlias: inviteCanonicalAlias,
+      name: inviteName,
+      avatar: inviteAvatar,
+      joinRules: inviteJoinRules,
+    },
+    knock: {
+      create: knockCreate,
+      encryption: knockEncryption,
+      canonicalAlias: knockCanonicalAlias,
+      name: knockName,
+      avatar: knockAvatar,
+      joinRules: knockJoinRules,
+    },
+    leave: {
+      create: leaveCreate,
+      encryption: leaveEncryption,
+      canonicalAlias: leaveCanonicalAlias,
+      name: leaveName,
+      avatar: leaveAvatar,
+      joinRules: leaveJoinRules,
+    },
+  };
+}
+
+export const createRoomContext = async (
+  state: StateContext,
+  disposer: Disposer
+): Promise<{
+  rooms: RoomsContext;
+  spaceRooms: ObservableValue<Set<string>>;
+  roomToCreators: ObservableValue<Map<string, Set<string>>>;
+  roomToVersion: ObservableValue<Map<string, string>>;
+}> => {
+  const join: ObservableValue<string[]> = new ComputedObservableValue(
+    () => state.join.create.read.map((obj) => obj.roomId),
+    [state.join.create]
+  );
+  disposer.collect(join);
+
+  const invite: ObservableValue<string[]> = new ComputedObservableValue(
+    () => state.invite.create.read.map((obj) => obj.roomId),
+    [state.invite.create]
+  );
+  disposer.collect(invite);
+
+  const knock: ObservableValue<string[]> = new ComputedObservableValue(
+    () => state.knock.create.read.map((obj) => obj.roomId),
+    [state.knock.create]
+  );
+  disposer.collect(knock);
+
+  const leave: ObservableValue<string[]> = new ComputedObservableValue(
+    () => state.leave.create.read.map((obj) => obj.roomId),
+    [state.leave.create]
+  );
+  disposer.collect(leave);
+
+  const spacesObservable: ObservableValue<Set<string>> = new ComputedObservableValue(() => {
+    const spaces = new Set<string>();
+
+    const addToSpaces = (roomId: string, content: object) => {
+      if ('type' in content && typeof content.type === 'string' && content.type === 'm.space') {
+        spaces.add(roomId);
+      }
+    };
+
+    state.join.create.read.forEach((obj) => addToSpaces(obj.roomId, obj.event.content));
+    state.invite.create.read.forEach((obj) => addToSpaces(obj.roomId, obj.event.content));
+    state.knock.create.read.forEach((obj) => addToSpaces(obj.roomId, obj.event.content));
+    state.leave.create.read.forEach((obj) => addToSpaces(obj.roomId, obj.event.content));
+
+    return spaces;
+  }, [state.join.create, state.invite.create, state.knock.create, state.leave.create]);
+  disposer.collect(spacesObservable);
+
+  const roomToCreatorsObservable: ObservableValue<Map<string, Set<string>>> =
+    new ComputedObservableValue(() => {
+      const roomToCreators = new Map<string, Set<string>>();
+
+      state.join.create.read.forEach((obj) => {
+        const creators = new Set<string>();
+        const { sender, content } = obj.event;
+        creators.add(sender);
+
+        if ('additional_creators' in content && Array.isArray(content.additional_creators)) {
+          content.additional_creators.forEach((userId) => {
+            if (typeof userId === 'string') {
+              creators.add(userId);
+            }
+          });
+        }
+      });
+
+      return roomToCreators;
+    }, [state.join.create]);
+  disposer.collect(roomToCreatorsObservable);
+
+  const roomToVersionObservable: ObservableValue<Map<string, string>> =
+    new ComputedObservableValue(() => {
+      const roomToVersion = new Map<string, string>();
+
+      state.join.create.read.forEach((obj) => {
+        const { content } = obj.event;
+
+        if ('room_version' in content && typeof content.room_version === 'string') {
+          roomToVersion.set(obj.roomId, content.room_version);
+        }
+      });
+
+      return roomToVersion;
+    }, [state.join.create]);
+  disposer.collect(roomToVersionObservable);
+
+  const roomsContext: RoomsContext = {
+    join,
+    invite,
+    knock,
+    leave,
+  };
+
+  return {
+    rooms: roomsContext,
+    spaceRooms: spacesObservable,
+    roomToCreators: roomToCreatorsObservable,
+    roomToVersion: roomToVersionObservable,
+  };
+};
+
+export const createEncryptedRoomsObservable = async (
+  state: StateContext,
+  disposer: Disposer
+): Promise<ObservableValue<Set<string>>> => {
+  const encryptedRoomsObservable: ObservableValue<Set<string>> = new ComputedObservableValue(() => {
+    const encryptedRooms = new Set<string>();
+
+    state.join.encryption.read.forEach((obj) => encryptedRooms.add(obj.roomId));
+    state.invite.encryption.read.forEach((obj) => encryptedRooms.add(obj.roomId));
+    state.knock.encryption.read.forEach((obj) => encryptedRooms.add(obj.roomId));
+    state.leave.encryption.read.forEach((obj) => encryptedRooms.add(obj.roomId));
+
+    return encryptedRooms;
+  }, [
+    state.join.encryption,
+    state.invite.encryption,
+    state.knock.encryption,
+    state.leave.encryption,
+  ]);
+
+  disposer.collect(encryptedRoomsObservable);
+
+  return encryptedRoomsObservable;
+};
+
+export const createDirectRoomsObservable = async (
+  storage: Storage,
+  disposer: Disposer
+): Promise<ObservableValue<Set<string>>> => {
+  const mDirectObj = await storage.accountData.observableRead.get(AccountDataType.Direct);
+  const directRoomsObservable = new ComputedObservableValue(() => {
+    const rooms = new Set<string>();
+    const userIdToRooms = mDirectObj.read?.event.content;
+
+    if (typeof userIdToRooms !== 'object') return rooms;
+
+    Object.values(userIdToRooms).forEach((roomIds) => {
+      if (!Array.isArray(roomIds)) return;
+      roomIds.forEach((id) => {
+        if (typeof id === 'string') rooms.add(id);
+      });
+    });
+
+    return rooms;
+  }, [mDirectObj]);
+
+  disposer.collect(mDirectObj, directRoomsObservable);
+
+  return directRoomsObservable;
+};
+
+export const createRoomToReplacementObservable = async (
+  state: StateContext,
+  disposer: Disposer
+): Promise<ObservableValue<Map<string, string>>> => {
+  const roomToReplacementObservable: ObservableValue<Map<string, string>> =
+    new ComputedObservableValue(() => {
+      const roomToReplacement = new Map<string, string>();
+
+      state.join.tombstone.read.forEach((obj) => {
+        const { content } = obj.event ?? {};
+        if ('replacement_room' in content && typeof content.replacement_room === 'string') {
+          roomToReplacement.set(obj.roomId, content.replacement_room);
+        }
+      });
+
+      return roomToReplacement;
+    }, [state.join.tombstone]);
+
+  disposer.collect(roomToReplacementObservable);
+
+  return roomToReplacementObservable;
+};
+
+export const createSpaceMapping = async (
+  state: StateContext,
+  disposer: Disposer
+): Promise<{
+  roomToParents: ObservableValue<Map<string, Set<string>>>;
+  roomToChildEvents: ObservableValue<Map<string, StateEventWithoutRoomId<SpaceChildContent>[]>>;
+}> => {
+  const roomToParentsObservable: ObservableValue<Map<string, Set<string>>> =
+    new ComputedObservableValue(() => {
+      const roomToParents = new Map<string, Set<string>>();
+
+      state.join.spaceChild.read.forEach((childEventObj) => {
+        const { event, roomId: parentId } = childEventObj;
+        const roomId = event.state_key;
+        if ('via' in event.content && Array.isArray(event.content.via)) {
+          const parents = roomToParents.get(roomId) ?? new Set<string>();
+          parents.add(parentId);
+          roomToParents.set(roomId, parents);
+        }
+      });
+
+      return roomToParents;
+    }, [state.join.spaceChild]);
+
+  const roomToChildEventsObservable: ObservableValue<
+    Map<string, StateEventWithoutRoomId<SpaceChildContent>[]>
+  > = new ComputedObservableValue(() => {
+    const roomToChildEvents = new Map<string, StateEventWithoutRoomId<SpaceChildContent>[]>();
+
+    state.join.spaceChild.read.forEach((childEventObj) => {
+      const { event, roomId: parentId } = childEventObj;
+
+      if ('via' in event.content && Array.isArray(event.content.via)) {
+        const children = roomToChildEvents.get(parentId) ?? [];
+        children.push(event as StateEventWithoutRoomId<SpaceChildContent>);
+        roomToChildEvents.set(parentId, children);
+      }
+    });
+
+    return roomToChildEvents;
+  }, [state.join.spaceChild]);
+
+  disposer.collect(roomToParentsObservable, roomToChildEventsObservable);
+
+  return {
+    roomToParents: roomToParentsObservable,
+    roomToChildEvents: roomToChildEventsObservable,
+  };
+};
+
+export const createRoomToSummaryObservable = async (
+  storage: Storage,
+  disposer: Disposer
+): Promise<ObservableValue<Map<string, RoomSummary>>> => {
+  const summariesObservable = await storage.joinRoomSummary.observableRead.getAll();
+  const roomToSummaryObservable: ObservableValue<Map<string, RoomSummary>> =
+    new ComputedObservableValue(() => {
+      const roomToSummary = new Map<string, RoomSummary>();
+
+      summariesObservable.read.forEach((obj) => {
+        roomToSummary.set(obj.id, obj.summary);
+      });
+
+      return roomToSummary;
+    }, [summariesObservable]);
+
+  disposer.collect(summariesObservable, roomToSummaryObservable);
+  return roomToSummaryObservable;
+};
+
+export const createRoomToAliasObservable = async (
+  state: StateContext,
+  disposer: Disposer
+): Promise<ObservableValue<Map<string, string>>> => {
+  const roomToAliasObservable: ObservableValue<Map<string, string>> =
+    new ComputedObservableValue(() => {
+      const roomToAlias = new Map<string, string>();
+
+      const addAlias = (obj: RoomStateObject) => {
+        const { content, state_key: stateKey } = obj.event;
+        if (
+          stateKey === '' &&
+          'alias' in content &&
+          typeof content.alias === 'string' &&
+          content.alias
+        ) {
+          roomToAlias.set(obj.roomId, content.alias);
+        }
+      };
+
+      state.join.canonicalAlias.read.forEach(addAlias);
+      state.invite.canonicalAlias.read.forEach(addAlias);
+      state.knock.canonicalAlias.read.forEach(addAlias);
+      state.leave.canonicalAlias.read.forEach(addAlias);
+
+      return roomToAlias;
+    }, [
+      state.join.canonicalAlias,
+      state.invite.canonicalAlias,
+      state.knock.canonicalAlias,
+      state.leave.canonicalAlias,
+    ]);
+
+  disposer.collect(roomToAliasObservable);
+  return roomToAliasObservable;
+};
+
+export const createRoomToNameObservable = async (
+  state: StateContext,
+  disposer: Disposer
+): Promise<ObservableValue<Map<string, string>>> => {
+  const roomToNameObservable: ObservableValue<Map<string, string>> =
+    new ComputedObservableValue(() => {
+      const roomToName = new Map<string, string>();
+
+      const addName = (obj: RoomStateObject) => {
+        const { content, state_key: stateKey } = obj.event;
+        if (
+          stateKey === '' &&
+          'name' in content &&
+          typeof content.name === 'string' &&
+          content.name
+        ) {
+          roomToName.set(obj.roomId, content.name);
+        }
+      };
+      state.join.name.read.forEach(addName);
+      state.invite.name.read.forEach(addName);
+      state.knock.name.read.forEach(addName);
+      state.leave.name.read.forEach(addName);
+
+      return roomToName;
+    }, [state.join.name, state.invite.name, state.knock.name, state.leave.name]);
+
+  disposer.collect(roomToNameObservable);
+  return roomToNameObservable;
+};
+
+export const createRoomToAvatarObservable = async (
+  state: StateContext,
+  disposer: Disposer
+): Promise<ObservableValue<Map<string, string>>> => {
+  const roomToAvatarObservable: ObservableValue<Map<string, string>> =
+    new ComputedObservableValue(() => {
+      const roomToAvatar = new Map<string, string>();
+      const addAvatar = (obj: RoomStateObject) => {
+        const { content, state_key: stateKey } = obj.event;
+        if (
+          stateKey === '' &&
+          'url' in content &&
+          typeof content.url === 'string' &&
+          content.url.startsWith('mxc://')
+        ) {
+          roomToAvatar.set(obj.roomId, content.url);
+        }
+      };
+      state.join.avatar.read.forEach(addAvatar);
+      state.invite.avatar.read.forEach(addAvatar);
+      state.knock.avatar.read.forEach(addAvatar);
+      state.leave.avatar.read.forEach(addAvatar);
+
+      return roomToAvatar;
+    }, [state.join.avatar, state.invite.avatar, state.knock.avatar, state.leave.avatar]);
+
+  disposer.collect(roomToAvatarObservable);
+  return roomToAvatarObservable;
+};
+
+export const createRoomToHistoryVisibilityObservable = async (
+  state: StateContext,
+  disposer: Disposer
+): Promise<ObservableValue<Map<string, HistoryVisibility>>> => {
+  const roomToHistoryVisibilityObservable: ObservableValue<Map<string, HistoryVisibility>> =
+    new ComputedObservableValue(() => {
+      const roomToHistoryVisibility = new Map<string, HistoryVisibility>();
+
+      const addHistoryVisibility = (obj: RoomStateObject) => {
+        const { content, state_key: stateKey } = obj.event;
+        if (stateKey !== '') return;
+        const historyVisibility = ObjectReader.string(content, 'history_visibility');
+        if (historyVisibility) {
+          roomToHistoryVisibility.set(obj.roomId, historyVisibility as HistoryVisibility);
+        }
+      };
+
+      state.join.historyVisibility.read.forEach(addHistoryVisibility);
+
+      return roomToHistoryVisibility;
+    }, [state.join.joinRules]);
+
+  disposer.collect(roomToHistoryVisibilityObservable);
+  return roomToHistoryVisibilityObservable;
+};
+
+export const createRoomToJoinRuleObservable = async (
+  state: StateContext,
+  disposer: Disposer
+): Promise<ObservableValue<Map<string, JoinRule>>> => {
+  const roomToJoinRuleObservable: ObservableValue<Map<string, JoinRule>> =
+    new ComputedObservableValue(() => {
+      const roomToJoinRule = new Map<string, JoinRule>();
+
+      const addJoinRule = (obj: RoomStateObject) => {
+        const { content, state_key: stateKey } = obj.event;
+        if (stateKey === '' && 'join_rule' in content && typeof content.join_rule === 'string') {
+          roomToJoinRule.set(obj.roomId, content.join_rule as JoinRule);
+        }
+      };
+
+      state.join.joinRules.read.forEach(addJoinRule);
+      state.invite.joinRules.read.forEach(addJoinRule);
+      state.knock.joinRules.read.forEach(addJoinRule);
+      state.leave.joinRules.read.forEach(addJoinRule);
+
+      return roomToJoinRule;
+    }, [
+      state.join.joinRules,
+      state.invite.joinRules,
+      state.knock.joinRules,
+      state.leave.joinRules,
+    ]);
+
+  disposer.collect(roomToJoinRuleObservable);
+  return roomToJoinRuleObservable;
+};
+
+export const createRoomToLatestEventObservable = async (
+  storage: Storage,
+  disposer: Disposer
+): Promise<ObservableValue<Map<string, MessageEventWithoutRoomId>>> => {
+  const roomLatestEventObjects = await storage.joinRoomLatestEvent.observableRead.getAll();
+
+  const roomToLatestEventObservable: ObservableValue<Map<string, MessageEventWithoutRoomId>> =
+    new ComputedObservableValue(() => {
+      const roomToLatestEvent = new Map<string, MessageEventWithoutRoomId>();
+      roomLatestEventObjects.read.map((obj) => roomToLatestEvent.set(obj.id, obj.event));
+      return roomToLatestEvent;
+    }, [roomLatestEventObjects]);
+
+  disposer.collect(roomLatestEventObjects, roomToLatestEventObservable);
+
+  return roomToLatestEventObservable;
+};
+
+export const createLogoutObservable = (
+  syncObservable: ObservableValue<SyncValue>,
+  disposer: Disposer
+): ObservableValue<boolean> => {
+  const LOGOUT_PUBLISHER_KEY = 'LOGOUT_PUBLISHER_KEY';
+  const logoutObservable: ObservableValue<boolean> = new ObservableValue(
+    false,
+    LOGOUT_PUBLISHER_KEY
+  );
+
+  const unsubscribeSync = syncObservable.subscribe((value) => {
+    if (value === undefined) return;
+    const [error] = value;
+    if (error && !(error instanceof Error)) {
+      const { errcode } = error.data;
+      if (errcode === 'M_UNKNOWN_TOKEN') {
+        logoutObservable.publish(LOGOUT_PUBLISHER_KEY, true);
+        unsubscribeSync();
+      }
+    }
+  });
+
+  logoutObservable.onDispose(LOGOUT_PUBLISHER_KEY, () => {
+    unsubscribeSync();
+  });
+
+  disposer.collect(logoutObservable);
+
+  return logoutObservable;
+};
+
+export const createSyncTokenObservable = async (
+  storage: Storage,
+  disposer: Disposer
+): Promise<ObservableValue<string | undefined>> => {
+  const syncTokenObj = await storage.sessionValue.observableRead.get(sessionValue.syncToken.id);
+
+  const syncTokenObservable: ObservableValue<string | undefined> =
+    new ComputedObservableValue(() => {
+      const syncToken = sessionValue.syncToken.parse(syncTokenObj.read);
+      return syncToken;
+    }, [syncTokenObj]);
+
+  disposer.collect(syncTokenObj, syncTokenObservable);
+  return syncTokenObservable;
+};
+
+export const createPendingMemberRoomObservable = async (
+  storage: Storage,
+  disposer: Disposer
+): Promise<ObservableValue<string[]>> => {
+  const pendingMemberRoomsObj = await storage.sessionValue.observableRead.get(
+    sessionValue.pendingMemberRooms.id
+  );
+
+  const pendingMemberRoomsObservable: ObservableValue<string[]> =
+    new ComputedObservableValue(() => {
+      const rooms = sessionValue.pendingMemberRooms.parse(pendingMemberRoomsObj.read);
+      return rooms ?? [];
+    }, [pendingMemberRoomsObj]);
+
+  disposer.collect(pendingMemberRoomsObj, pendingMemberRoomsObservable);
+  return pendingMemberRoomsObservable;
+};
diff --git a/src/client/decryption/DecryptionManager.ts b/src/client/decryption/DecryptionManager.ts
new file mode 100644
index 00000000..3b180183
--- /dev/null
+++ b/src/client/decryption/DecryptionManager.ts
@@ -0,0 +1,85 @@
+import {
+  ClientEventWithoutRoomId,
+  MessageEventWithoutRoomId,
+  StateEventWithoutRoomId,
+} from 'neurone/lib/api/types';
+import { Machine, RoomKeyInfo, RoomKeyWithheldInfo } from 'neurone/lib/crypto/machine';
+import { ObjectReader } from 'neurone/lib/utils';
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { EncryptedEvent } from './EncryptedEvent';
+import { EncryptedEventIndex } from './EncryptedEventIndex';
+
+export class DecryptionManager implements Disposable {
+  private readonly machine: Machine;
+
+  private readonly disposer = new Disposer();
+
+  private readonly stateEvents = new EncryptedEventIndex<StateEventWithoutRoomId>();
+
+  private readonly messageEvents = new EncryptedEventIndex<MessageEventWithoutRoomId>();
+
+  constructor(machine: Machine) {
+    this.machine = machine;
+
+    this.disposer.collect(
+      this.machine.events.onRoomKeysUpdated.subscribe(this.handleRoomKeysUpdated.bind(this)),
+      this.machine.events.onRoomKeysWithheld.subscribe(this.handleRoomKeysWithheld.bind(this))
+    );
+  }
+
+  private handleRoomKeysUpdated(keysInfo: RoomKeyInfo[]): void {
+    keysInfo.forEach((keyInfo) => this.decryptSession(keyInfo.roomId, keyInfo.sessionId));
+  }
+
+  private handleRoomKeysWithheld(keysInfo: RoomKeyWithheldInfo[]): void {
+    keysInfo.forEach((keyInfo) => this.decryptSession(keyInfo.roomId, keyInfo.sessionId));
+  }
+
+  private decryptSession(roomId: string, sessionId: string): void {
+    const m = this.messageEvents.getEventsForSession(roomId, sessionId);
+    m.forEach((event) => event.decrypt());
+
+    const s = this.stateEvents.getEventsForSession(roomId, sessionId);
+    s.forEach((event) => event.decrypt());
+  }
+
+  private registerEvent<T extends ClientEventWithoutRoomId>(
+    eventIndex: EncryptedEventIndex<T>,
+    roomId: string,
+    event: T
+  ): EncryptedEvent<T> {
+    const { content } = event;
+    const sessionId = ObjectReader.string(content, 'session_id');
+
+    if (!sessionId) {
+      throw new Error('Malformed event! Missing session_id');
+    }
+
+    const existingEvent = eventIndex.get(roomId, sessionId, event.event_id);
+    if (existingEvent) return existingEvent;
+
+    const encryptedEvent = new EncryptedEvent(this.machine.roomEncryption, roomId, event);
+
+    eventIndex.store(roomId, sessionId, encryptedEvent);
+
+    return encryptedEvent;
+  }
+
+  public decryptableMessageEvent(
+    roomId: string,
+    event: MessageEventWithoutRoomId
+  ): EncryptedEvent<MessageEventWithoutRoomId> {
+    return this.registerEvent(this.messageEvents, roomId, event);
+  }
+
+  public decryptableStateEvent(
+    roomId: string,
+    event: StateEventWithoutRoomId
+  ): EncryptedEvent<StateEventWithoutRoomId> {
+    return this.registerEvent(this.stateEvents, roomId, event);
+  }
+
+  dispose(): void {
+    this.disposer.run();
+  }
+}
diff --git a/src/client/decryption/EncryptedEvent.ts b/src/client/decryption/EncryptedEvent.ts
new file mode 100644
index 00000000..a48b6d41
--- /dev/null
+++ b/src/client/decryption/EncryptedEvent.ts
@@ -0,0 +1,93 @@
+import {
+  ClientEventWithoutRoomId,
+  MessageEventWithoutRoomId,
+  StateEventWithoutRoomId,
+} from 'neurone/lib/api/types';
+import { MegolmDecryptionError, RoomEncryption } from 'neurone/lib/crypto/machine';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+
+export class EventDecryptionIdle {}
+
+export class EventDecryptionPending {}
+
+export class EventDecryptionError {
+  public readonly error?: MegolmDecryptionError;
+
+  public readonly cause?: unknown;
+
+  constructor(error?: MegolmDecryptionError, cause?: unknown) {
+    this.error = error;
+    this.cause = cause;
+  }
+}
+
+export class EventDecryptionSuccess<T extends ClientEventWithoutRoomId> {
+  public readonly event: T extends StateEventWithoutRoomId
+    ? StateEventWithoutRoomId
+    : MessageEventWithoutRoomId;
+
+  constructor(
+    event: T extends StateEventWithoutRoomId ? StateEventWithoutRoomId : MessageEventWithoutRoomId
+  ) {
+    this.event = event;
+  }
+}
+
+export class EncryptedEvent<T extends ClientEventWithoutRoomId> {
+  private readonly roomEncryption: RoomEncryption;
+
+  private readonly publishKey = crypto.randomUUID();
+
+  private decryptPromise: Promise<void> | undefined;
+
+  public readonly roomId: string;
+
+  public readonly event: T;
+
+  public readonly decryption: ObservableValue<
+    EventDecryptionPending | EventDecryptionError | EventDecryptionSuccess<T>
+  >;
+
+  constructor(roomEncryption: RoomEncryption, roomId: string, event: T) {
+    this.roomEncryption = roomEncryption;
+
+    this.roomId = roomId;
+    this.event = event;
+
+    this.decryption = new ObservableValue(new EventDecryptionIdle(), this.publishKey);
+  }
+
+  get eventId(): string {
+    return this.event.event_id;
+  }
+
+  public decrypt(): Promise<void> {
+    if (this.decryptPromise) {
+      return this.decryptPromise;
+    }
+
+    this.decryptPromise = this.runDecryption().finally(() => {
+      this.decryptPromise = undefined;
+    });
+
+    return this.decryptPromise;
+  }
+
+  private async runDecryption(): Promise<void> {
+    this.decryption.publish(this.publishKey, new EventDecryptionPending());
+
+    try {
+      const [err, decryptedEvent] = await this.roomEncryption.decryptEvent<T>(
+        this.roomId,
+        this.event
+      );
+
+      this.decryption.publish(
+        this.publishKey,
+        err ? new EventDecryptionError(err) : new EventDecryptionSuccess<T>(decryptedEvent)
+      );
+    } catch (e) {
+      this.decryption.publish(this.publishKey, new EventDecryptionError(undefined, e));
+    }
+  }
+}
diff --git a/src/client/decryption/EncryptedEventIndex.ts b/src/client/decryption/EncryptedEventIndex.ts
new file mode 100644
index 00000000..6709b517
--- /dev/null
+++ b/src/client/decryption/EncryptedEventIndex.ts
@@ -0,0 +1,52 @@
+import { ClientEventWithoutRoomId } from 'neurone/lib/api/types';
+import { EncryptedEvent } from './EncryptedEvent';
+
+/**
+ * Indexes encrypted events by room, Megolm session, and event ID.
+ *
+ * This index is used to efficiently locate encrypted events that depend on a
+ * particular Megolm session. When new room keys become available, all events
+ * associated with the corresponding room and session can be retrieved and
+ * retried for decryption without scanning every tracked event.
+ *
+ * Structure:
+ *
+ * room_id -> session_id -> event_id -> EncryptedEvent
+ */
+export class EncryptedEventIndex<T extends ClientEventWithoutRoomId> {
+  private readonly rooms = new Map<string, Map<string, Map<string, EncryptedEvent<T>>>>();
+
+  get(roomId: string, sessionId: string, eventId: string): EncryptedEvent<T> | undefined {
+    return this.rooms.get(roomId)?.get(sessionId)?.get(eventId);
+  }
+
+  store(roomId: string, sessionId: string, encryptedEvent: EncryptedEvent<T>): void {
+    let sessions = this.rooms.get(roomId);
+    if (!sessions) {
+      sessions = new Map();
+      this.rooms.set(roomId, sessions);
+    }
+
+    let events = sessions.get(sessionId);
+    if (!events) {
+      events = new Map();
+      sessions.set(sessionId, events);
+    }
+
+    events.set(encryptedEvent.eventId, encryptedEvent);
+  }
+
+  getEventsForSession(roomId: string, sessionId: string): EncryptedEvent<T>[] {
+    const events = this.rooms.get(roomId)?.get(sessionId);
+
+    if (!events) {
+      return [];
+    }
+
+    return Array.from(events.values());
+  }
+
+  public remove(roomId: string): boolean {
+    return this.rooms.delete(roomId);
+  }
+}
diff --git a/src/client/decryption/index.ts b/src/client/decryption/index.ts
new file mode 100644
index 00000000..f2208e97
--- /dev/null
+++ b/src/client/decryption/index.ts
@@ -0,0 +1,3 @@
+export * from './DecryptionManager';
+export * from './EncryptedEvent';
+export * from './EncryptedEventIndex';
diff --git a/src/client/filter.ts b/src/client/filter.ts
new file mode 100644
index 00000000..22dc26db
--- /dev/null
+++ b/src/client/filter.ts
@@ -0,0 +1,70 @@
+import { Filter, RoomEventFilter } from 'neurone/lib/api/types';
+import { MessageEvent } from '../types/matrix/room';
+
+export const getInitialSyncFilter = (): Filter => {
+  const filter: Filter = {
+    room: {
+      state: {
+        lazy_load_members: true,
+      },
+      timeline: {
+        unread_thread_notifications: true,
+      },
+    },
+  };
+
+  return filter;
+};
+
+export const getSyncFilter = (): Filter => {
+  const filter: Filter = {
+    room: {
+      timeline: {
+        unread_thread_notifications: true,
+      },
+    },
+  };
+
+  return filter;
+};
+
+export const getLatestEventSyncFilter = (): Filter => {
+  const filter: Filter = {
+    account_data: {
+      not_types: ['*'],
+    },
+    presence: {
+      not_types: ['*'],
+    },
+    room: {
+      account_data: {
+        not_types: ['*'],
+      },
+      ephemeral: {
+        not_types: ['*'],
+      },
+      state: {
+        not_types: ['*'],
+      },
+      timeline: {
+        types: [MessageEvent.RoomMessage, MessageEvent.RoomMessageEncrypted, MessageEvent.Sticker],
+        limit: 1,
+      },
+    },
+  };
+
+  return filter;
+};
+
+export const getMessagesFilter = (): RoomEventFilter => {
+  const filter: RoomEventFilter = {
+    types: [
+      MessageEvent.RoomMessage,
+      MessageEvent.RoomMessageEncrypted,
+      MessageEvent.Sticker,
+      MessageEvent.Reaction,
+    ],
+  };
+
+  return filter;
+};
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
new file mode 100644
index 00000000..505a636d
--- /dev/null
+++ b/src/client/initialize.ts
@@ -0,0 +1,177 @@
+import { Machine, OutgoingRequestSender } from 'neurone/lib/crypto/machine';
+import { MatrixRequestRetrier, sleep } from 'neurone/lib/utils';
+import { MatrixRequest } from 'neurone/lib/matrix-request';
+import { Disposer } from 'neurone/lib/utils/disposable';
+import { deleteDB } from 'idb';
+import { Session } from '../app/state/sessions';
+import {
+  ClientContext,
+  createDirectRoomsObservable,
+  createEncryptedRoomsObservable,
+  createLogoutObservable,
+  createPendingMemberRoomObservable,
+  createRoomContext,
+  createRoomToAliasObservable,
+  createRoomToAvatarObservable,
+  createRoomToHistoryVisibilityObservable,
+  createRoomToJoinRuleObservable,
+  createRoomToLatestEventObservable,
+  createRoomToNameObservable,
+  createRoomToReplacementObservable,
+  createRoomToSummaryObservable,
+  createSpaceMapping,
+  createStateContext,
+  createSyncTokenObservable,
+} from './context';
+import { createStorage } from './storage';
+import { getAuthJSONRequest } from './request';
+import { createSync, createSyncController } from './sync';
+import { GetTxnId, getTxnIdFunc } from './txn';
+import { createTimelines } from './room';
+import { SyncResponseManager } from './SyncResponseManager';
+import { LogoutManager } from './LogoutManager';
+import { MachineManager } from './MachineManager';
+import { DecryptionManager } from './decryption';
+
+const initializeCrypto = async (
+  session: Session,
+  request: MatrixRequest
+): Promise<{
+  machine: Machine;
+  deleteCryptoStorage: () => Promise<void>;
+}> => {
+  const storeName = `crypto${session.userId}`;
+
+  const { olmMachine, closeMachine } = await Machine.init(
+    session.userId,
+    session.deviceId,
+    storeName
+  );
+
+  const outgoingSenderAbortCont = new AbortController();
+  const outgoingRequestRetrier = new MatrixRequestRetrier(sleep);
+  const outgoingSender = new OutgoingRequestSender(request, outgoingSenderAbortCont.signal);
+
+  const machine = new Machine(olmMachine, outgoingSender, outgoingRequestRetrier);
+
+  const deleteCryptoStorage = async () => {
+    closeMachine();
+
+    // the matrix-crypto-sdk add postfix to storeName
+    const realStoreName = `${storeName}::matrix-sdk-crypto`;
+    await deleteDB(realStoreName);
+  };
+
+  return { machine, deleteCryptoStorage };
+};
+
+export const initializeClient = async (session: Session): Promise<ClientContext> => {
+  const disposer = new Disposer();
+
+  const { storage, deleteStorage } = await createStorage('client', session.userId);
+
+  const requestAuthJSON: MatrixRequest = getAuthJSONRequest(session.baseUrl, session.accessToken);
+
+  const { machine, deleteCryptoStorage } = await initializeCrypto(session, requestAuthJSON);
+  await machine.outgoingRequests.processAll();
+
+  const state = await createStateContext(storage, disposer);
+
+  const { rooms, spaceRooms, roomToCreators, roomToVersion } = await createRoomContext(
+    state,
+    disposer
+  );
+  const encryptedRooms = await createEncryptedRoomsObservable(state, disposer);
+  const directRooms = await createDirectRoomsObservable(storage, disposer);
+  const { roomToParents, roomToChildEvents } = await createSpaceMapping(state, disposer);
+
+  const roomToSummary = await createRoomToSummaryObservable(storage, disposer);
+  const roomToAlias = await createRoomToAliasObservable(state, disposer);
+  const roomToName = await createRoomToNameObservable(state, disposer);
+  const roomToAvatar = await createRoomToAvatarObservable(state, disposer);
+  const roomToHistoryVisibility = await createRoomToHistoryVisibilityObservable(state, disposer);
+  const roomToJoinRule = await createRoomToJoinRuleObservable(state, disposer);
+  const roomToReplacement = await createRoomToReplacementObservable(state, disposer);
+  const roomToLatestEvent = await createRoomToLatestEventObservable(storage, disposer);
+
+  const syncTokenObservable = await createSyncTokenObservable(storage, disposer);
+  const pendingMemberRooms = await createPendingMemberRoomObservable(storage, disposer);
+
+  const getTxnId: GetTxnId = getTxnIdFunc();
+
+  const [syncObservable, sync] = createSync(requestAuthJSON);
+  const [syncController, onWriteComplete, onSyncToken] = createSyncController(
+    syncObservable,
+    sync,
+    () => syncTokenObservable.read
+  );
+
+  const decryption = new DecryptionManager(machine);
+
+  const roomToTimeline = createTimelines(rooms.join, syncObservable, requestAuthJSON, disposer);
+
+  const logoutObservable = createLogoutObservable(syncObservable, disposer);
+  const logoutManager = new LogoutManager(logoutObservable, requestAuthJSON, async () => {
+    disposer.run();
+    await deleteCryptoStorage();
+    await deleteStorage();
+  });
+
+  const ct: ClientContext = {
+    session,
+    storage,
+    machine,
+    state,
+    rooms,
+    decryption,
+
+    directRooms,
+    spaceRooms,
+    encryptedRooms,
+
+    roomToParents,
+    roomToChildEvents,
+    roomToSummary,
+    roomToAlias,
+    roomToName,
+    roomToAvatar,
+    roomToHistoryVisibility,
+    roomToJoinRule,
+    roomToReplacement,
+    roomToLatestEvent,
+    roomToCreators,
+    roomToVersion,
+    roomToTimeline,
+
+    pendingMemberRooms,
+    sync: {
+      observable: syncObservable,
+      controller: syncController,
+    },
+    requestAuthJSON,
+    getTxnId,
+    logout: () => logoutManager.logout(),
+  };
+
+  const machineManager = new MachineManager(ct);
+
+  const syncResponseManager = new SyncResponseManager(
+    ct,
+    syncTokenObservable,
+    onWriteComplete,
+    onSyncToken
+  );
+
+  disposer.collect(
+    decryption,
+    syncObservable,
+    syncController,
+    roomToTimeline,
+    logoutObservable,
+    logoutManager,
+    machineManager,
+    syncResponseManager
+  );
+
+  return ct;
+};
diff --git a/src/client/mxcToHttp.ts b/src/client/mxcToHttp.ts
new file mode 100644
index 00000000..443914c5
--- /dev/null
+++ b/src/client/mxcToHttp.ts
@@ -0,0 +1,39 @@
+import {
+  getDownload,
+  getThumbnail,
+  GetThumbnailSearchParams,
+} from 'neurone/lib/api/matrix/client/v1/media';
+import { getDownload as getDownloadUnauthenticated } from 'neurone/lib/api/matrix/media/v3/download';
+import { getThumbnail as getThumbnailUnauthenticated } from 'neurone/lib/api/matrix/media/v3/thumbnail';
+
+export const mxcToHttp = (baseUrl: string, mxc: string, authenticated = true) => {
+  // TODO: validate mxc:
+  const [serverName, mediaId] = mxc.slice(6).split('/');
+
+  const api = {
+    url: (): string => {
+      const endpoint = authenticated
+        ? getDownload({ pathParams: { serverName, mediaId } })
+        : getDownloadUnauthenticated({ pathParams: { serverName, mediaId } });
+
+      const url = new URL(endpoint.path, baseUrl);
+      return url.href;
+    },
+    thumbnail: (params: GetThumbnailSearchParams): string => {
+      const endpoint = authenticated
+        ? getThumbnail({
+            pathParams: { serverName, mediaId },
+            searchParams: params,
+          })
+        : getThumbnailUnauthenticated({
+            pathParams: { serverName, mediaId },
+            searchParams: params,
+          });
+
+      const url = new URL(endpoint.path, baseUrl);
+      return url.href;
+    },
+  };
+
+  return api;
+};
diff --git a/src/client/reader/Error.ts b/src/client/reader/Error.ts
new file mode 100644
index 00000000..dbbfe52d
--- /dev/null
+++ b/src/client/reader/Error.ts
@@ -0,0 +1,15 @@
+import { ObjectReader } from 'neurone/lib/utils';
+
+export class rError {
+  static error(data?: object): string | undefined {
+    return ObjectReader.string(data, 'error');
+  }
+
+  static errcode(data?: object): string | undefined {
+    return ObjectReader.string(data, 'errcode');
+  }
+
+  static retryAfterMs(data?: object): number | undefined {
+    return ObjectReader.number(data, 'retry_after_ms');
+  }
+}
diff --git a/src/client/reader/Event.ts b/src/client/reader/Event.ts
new file mode 100644
index 00000000..f5929154
--- /dev/null
+++ b/src/client/reader/Event.ts
@@ -0,0 +1,39 @@
+import { ObjectReader } from 'neurone/lib/utils';
+
+export class rEvent {
+  static eventId(event?: object): string | undefined {
+    return ObjectReader.string(event, 'event_id');
+  }
+
+  static roomId(event?: object): string | undefined {
+    return ObjectReader.string(event, 'room_id');
+  }
+
+  static type(event?: object): string | undefined {
+    return ObjectReader.string(event, 'type');
+  }
+
+  static stateKey(event?: object): string | undefined {
+    return ObjectReader.string(event, 'state_key');
+  }
+
+  static sender(event?: object): string | undefined {
+    return ObjectReader.string(event, 'sender');
+  }
+
+  static content(event?: object): object | undefined {
+    return ObjectReader.object(event, 'content');
+  }
+
+  static originServerTs(event?: object): number | undefined {
+    return ObjectReader.number(event, 'origin_server_ts');
+  }
+
+  static unsigned(event?: object): object | undefined {
+    return ObjectReader.object(event, 'unsigned');
+  }
+
+  static redacts(event?: object): string | undefined {
+    return ObjectReader.string(event, 'redacts');
+  }
+}
diff --git a/src/client/reader/index.ts b/src/client/reader/index.ts
new file mode 100644
index 00000000..646ca727
--- /dev/null
+++ b/src/client/reader/index.ts
@@ -0,0 +1,3 @@
+export * from './message';
+export * from './Event';
+export * from './Error';
diff --git a/src/client/reader/message/Content.ts b/src/client/reader/message/Content.ts
new file mode 100644
index 00000000..d82aaac6
--- /dev/null
+++ b/src/client/reader/message/Content.ts
@@ -0,0 +1,75 @@
+import { ObjectReader } from 'neurone/lib/utils';
+import {
+  MATRIX_SPOILER_PROPERTY_NAME,
+  MATRIX_SPOILER_REASON_PROPERTY_NAME,
+} from '../../../types/matrix/common';
+
+export class rContent {
+  static msgtype(content: object): string | undefined {
+    return ObjectReader.string(content, 'msgtype');
+  }
+
+  static body(content: object): string | undefined {
+    return ObjectReader.string(content, 'body');
+  }
+
+  static format(content: object): string | undefined {
+    return ObjectReader.string(content, 'format');
+  }
+
+  static formattedBody(content: object): string | undefined {
+    return ObjectReader.string(content, 'formatted_body');
+  }
+
+  static mentions(content: object): object | undefined {
+    return ObjectReader.object(content, 'm.mentions');
+  }
+
+  static relatesTo(content: object): object | undefined {
+    return ObjectReader.object(content, 'm.relates_to');
+  }
+
+  static shortcode(content: object): string | undefined {
+    return ObjectReader.string(content, 'shortcode');
+  }
+
+  static url(content: object): string | undefined {
+    return ObjectReader.string(content, 'url');
+  }
+
+  static filename(content: object): string | undefined {
+    return ObjectReader.string(content, 'filename');
+  }
+
+  static geoUri(content: object): string | undefined {
+    return ObjectReader.string(content, 'geo_uri');
+  }
+
+  static info(content: object): object | undefined {
+    return ObjectReader.object(content, 'info');
+  }
+
+  static file(content: object): object | undefined {
+    return ObjectReader.object(content, 'file');
+  }
+
+  static newContent(content: object): object | undefined {
+    return ObjectReader.object(content, 'm.new_content');
+  }
+
+  static redacts(content: object): string | undefined {
+    return ObjectReader.string(content, 'redacts');
+  }
+
+  static reason(content: object): string | undefined {
+    return ObjectReader.string(content, 'reason');
+  }
+
+  static spoiler(content: object): boolean | undefined {
+    return ObjectReader.boolean(content, MATRIX_SPOILER_PROPERTY_NAME);
+  }
+
+  static spoilerReason(content: object): string | undefined {
+    return ObjectReader.string(content, MATRIX_SPOILER_REASON_PROPERTY_NAME);
+  }
+}
diff --git a/src/client/reader/message/EncryptedFile.ts b/src/client/reader/message/EncryptedFile.ts
new file mode 100644
index 00000000..f2ff0f1e
--- /dev/null
+++ b/src/client/reader/message/EncryptedFile.ts
@@ -0,0 +1,7 @@
+import { ObjectReader } from 'neurone/lib/utils';
+
+export class rEncryptedFile {
+  static url(encFile?: object): string | undefined {
+    return ObjectReader.string(encFile, 'url');
+  }
+}
diff --git a/src/client/reader/message/InReplyTo.ts b/src/client/reader/message/InReplyTo.ts
new file mode 100644
index 00000000..c64da493
--- /dev/null
+++ b/src/client/reader/message/InReplyTo.ts
@@ -0,0 +1,7 @@
+import { ObjectReader } from 'neurone/lib/utils';
+
+export class rInReplyTo {
+  static eventId(inReplyTo?: object): string | undefined {
+    return ObjectReader.string(inReplyTo, 'event_id');
+  }
+}
diff --git a/src/client/reader/message/Info.ts b/src/client/reader/message/Info.ts
new file mode 100644
index 00000000..0b5d30f7
--- /dev/null
+++ b/src/client/reader/message/Info.ts
@@ -0,0 +1,40 @@
+import { ObjectReader } from 'neurone/lib/utils';
+import { MATRIX_BLUR_HASH_PROPERTY_NAME } from '../../../types/matrix/common';
+
+export class rInfo {
+  static mimetype(info?: object): string | undefined {
+    return ObjectReader.string(info, 'mimetype');
+  }
+
+  static size(info?: object): number | undefined {
+    return ObjectReader.number(info, 'size');
+  }
+
+  static duration(info?: object): number | undefined {
+    return ObjectReader.number(info, 'duration');
+  }
+
+  static h(info?: object): number | undefined {
+    return ObjectReader.number(info, 'h');
+  }
+
+  static w(info?: object): number | undefined {
+    return ObjectReader.number(info, 'w');
+  }
+
+  static thumbnailFile(info?: object): object | undefined {
+    return ObjectReader.object(info, 'thumbnail_file');
+  }
+
+  static thumbnailUrl(info?: object): string | undefined {
+    return ObjectReader.string(info, 'thumbnail_url');
+  }
+
+  static thumbnailInfo(info?: object): object | undefined {
+    return ObjectReader.object(info, 'thumbnail_info');
+  }
+
+  static blurhash(info?: object): string | undefined {
+    return ObjectReader.string(info, MATRIX_BLUR_HASH_PROPERTY_NAME);
+  }
+}
diff --git a/src/client/reader/message/Mentions.ts b/src/client/reader/message/Mentions.ts
new file mode 100644
index 00000000..c66d403d
--- /dev/null
+++ b/src/client/reader/message/Mentions.ts
@@ -0,0 +1,13 @@
+import { ObjectReader } from 'neurone/lib/utils';
+
+export class rMentions {
+  static userIds(mentions?: object): string[] | undefined {
+    return ObjectReader.array(mentions, 'user_ids')?.filter(
+      (id): id is string => typeof id === 'string'
+    );
+  }
+
+  static room(mentions?: object): boolean | undefined {
+    return ObjectReader.boolean(mentions, 'room');
+  }
+}
diff --git a/src/client/reader/message/RelatesTo.ts b/src/client/reader/message/RelatesTo.ts
new file mode 100644
index 00000000..fc635ff1
--- /dev/null
+++ b/src/client/reader/message/RelatesTo.ts
@@ -0,0 +1,23 @@
+import { ObjectReader } from 'neurone/lib/utils';
+
+export class rRelatesTo {
+  static relType(relatesTo?: object): string | undefined {
+    return ObjectReader.string(relatesTo, 'rel_type');
+  }
+
+  static eventId(relatesTo?: object): string | undefined {
+    return ObjectReader.string(relatesTo, 'event_id');
+  }
+
+  static key(relatesTo?: object): string | undefined {
+    return ObjectReader.string(relatesTo, 'key');
+  }
+
+  static isFallingBack(relatesTo?: object): boolean | undefined {
+    return ObjectReader.boolean(relatesTo, 'is_falling_back');
+  }
+
+  static inReplyTo(relatesTo?: object): object | undefined {
+    return ObjectReader.object(relatesTo, 'm.in_reply_to');
+  }
+}
diff --git a/src/client/reader/message/Relations.ts b/src/client/reader/message/Relations.ts
new file mode 100644
index 00000000..97aa55e2
--- /dev/null
+++ b/src/client/reader/message/Relations.ts
@@ -0,0 +1,15 @@
+import { ObjectReader } from 'neurone/lib/utils';
+
+export class rRelations {
+  static replace(relations?: object): object | undefined {
+    return ObjectReader.object(relations, 'm.relations');
+  }
+
+  static thread(relations?: object): object | undefined {
+    return ObjectReader.object(relations, 'm.thread');
+  }
+
+  static reference(relations?: object): object | undefined {
+    return ObjectReader.object(relations, 'm.reference');
+  }
+}
diff --git a/src/client/reader/message/Thread.ts b/src/client/reader/message/Thread.ts
new file mode 100644
index 00000000..3f568557
--- /dev/null
+++ b/src/client/reader/message/Thread.ts
@@ -0,0 +1,15 @@
+import { ObjectReader } from 'neurone/lib/utils';
+
+export class rThread {
+  static latestEvent(thread?: object): object | undefined {
+    return ObjectReader.object(thread, 'latest_event');
+  }
+
+  static count(thread?: object): number | undefined {
+    return ObjectReader.number(thread, 'count');
+  }
+
+  static currentUserParticipated(thread?: object): boolean | undefined {
+    return ObjectReader.boolean(thread, 'current_user_participated');
+  }
+}
diff --git a/src/client/reader/message/ThumbnailInfo.ts b/src/client/reader/message/ThumbnailInfo.ts
new file mode 100644
index 00000000..94f6a9ff
--- /dev/null
+++ b/src/client/reader/message/ThumbnailInfo.ts
@@ -0,0 +1,24 @@
+import { ObjectReader } from 'neurone/lib/utils';
+import { MATRIX_BLUR_HASH_PROPERTY_NAME } from '../../../types/matrix/common';
+
+export class rThumbnailInfo {
+  static mimetype(thumbInfo?: object): string | undefined {
+    return ObjectReader.string(thumbInfo, 'mimetype');
+  }
+
+  static size(thumbInfo?: object): number | undefined {
+    return ObjectReader.number(thumbInfo, 'size');
+  }
+
+  static h(thumbInfo?: object): number | undefined {
+    return ObjectReader.number(thumbInfo, 'h');
+  }
+
+  static w(thumbInfo?: object): number | undefined {
+    return ObjectReader.number(thumbInfo, 'w');
+  }
+
+  static blurhash(info?: object): string | undefined {
+    return ObjectReader.string(info, MATRIX_BLUR_HASH_PROPERTY_NAME);
+  }
+}
diff --git a/src/client/reader/message/Unsigned.ts b/src/client/reader/message/Unsigned.ts
new file mode 100644
index 00000000..1acc3ed9
--- /dev/null
+++ b/src/client/reader/message/Unsigned.ts
@@ -0,0 +1,27 @@
+import { ObjectReader } from 'neurone/lib/utils';
+
+export class rUnsigned {
+  static relations(unsigned?: object): object | undefined {
+    return ObjectReader.object(unsigned, 'm.relations');
+  }
+
+  static age(unsigned?: object): number | undefined {
+    return ObjectReader.number(unsigned, 'age');
+  }
+
+  static membership(unsigned?: object): string | undefined {
+    return ObjectReader.string(unsigned, 'membership');
+  }
+
+  static prevContent(unsigned?: object): object | undefined {
+    return ObjectReader.object(unsigned, 'prev_content');
+  }
+
+  static redactedBecause(unsigned?: object): object | undefined {
+    return ObjectReader.object(unsigned, 'redacted_because');
+  }
+
+  static transactionId(unsigned?: object): string | undefined {
+    return ObjectReader.string(unsigned, 'transaction_id');
+  }
+}
diff --git a/src/client/reader/message/index.ts b/src/client/reader/message/index.ts
new file mode 100644
index 00000000..bf31acb5
--- /dev/null
+++ b/src/client/reader/message/index.ts
@@ -0,0 +1,10 @@
+export * from './Content';
+export * from './EncryptedFile';
+export * from './Info';
+export * from './InReplyTo';
+export * from './Mentions';
+export * from './RelatesTo';
+export * from './Relations';
+export * from './Thread';
+export * from './ThumbnailInfo';
+export * from './Unsigned';
diff --git a/src/client/request.ts b/src/client/request.ts
new file mode 100644
index 00000000..45fa8179
--- /dev/null
+++ b/src/client/request.ts
@@ -0,0 +1,123 @@
+import { MatrixEndpointStruct } from 'neurone/lib/api/MatrixEndpoint';
+import {
+  makeRequest,
+  MatrixErrorData,
+  MatrixRequest,
+  MatrixResponseResult,
+} from 'neurone/lib/matrix-request';
+
+export function getJSONRequest(baseUrl: string): MatrixRequest {
+  const request = makeRequest(fetch, baseUrl, {
+    headers: {
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+  });
+
+  return request;
+}
+
+export function getAuthJSONRequest(baseUrl: string, accessToken: string): MatrixRequest {
+  const request = makeRequest(fetch, baseUrl, {
+    headers: {
+      Authorization: `Bearer ${accessToken}`,
+      'Content-Type': 'application/json',
+      Accept: 'application/json',
+    },
+  });
+
+  return request;
+}
+
+export type UploadProgress = {
+  loaded: number;
+  total: number;
+};
+
+export type UploadProgressCallback = (progress: UploadProgress) => void;
+
+type MediaRequest<D extends object, ED = MatrixErrorData> = (
+  matrixEndpointStruct: MatrixEndpointStruct,
+  abortSignal?: AbortSignal
+) => Promise<MatrixResponseResult<D, ED>>;
+
+export function getAuthUploadRequest<D extends object, ED = MatrixErrorData>(
+  baseUrl: string,
+  accessToken: string,
+  onProgress?: UploadProgressCallback
+): MediaRequest<D, ED> {
+  const request: MediaRequest<D, ED> = (endpoint, signal) =>
+    new Promise((resolve, reject) => {
+      const { path, body } = endpoint;
+      const xhr = new XMLHttpRequest();
+
+      if (body instanceof Blob === false && body instanceof FormData === false) {
+        reject(
+          TypeError(`Invalid body type. Requires Blob or FormData but received ${typeof body}`)
+        );
+        return;
+      }
+
+      let url: URL;
+
+      try {
+        url = new URL(path, baseUrl);
+        xhr.open(endpoint.method, url);
+        xhr.setRequestHeader('Authorization', `Bearer ${accessToken}`);
+        xhr.setRequestHeader('Content-Type', 'application/octet-stream');
+      } catch (e) {
+        reject(e);
+      }
+
+      xhr.upload.onprogress = (event) => {
+        if (event.lengthComputable) {
+          onProgress?.({
+            loaded: event.loaded,
+            total: event.total,
+          });
+        }
+      };
+
+      xhr.onload = () => {
+        const contentType = xhr.getResponseHeader('Content-Type');
+        if (contentType !== 'application/json') {
+          reject(
+            new TypeError(`Expected JSON response but received "${contentType || 'unknown'}"`)
+          );
+          return;
+        }
+
+        const jsonResponse = JSON.parse(xhr.responseText);
+        if (xhr.status >= 200 && xhr.status < 300) {
+          resolve([undefined, jsonResponse as D]);
+          return;
+        }
+        resolve([
+          {
+            status: xhr.status,
+            url: url.href,
+            data: jsonResponse as ED,
+          },
+          undefined,
+        ]);
+      };
+
+      xhr.onerror = () => {
+        reject(new Error('Network Error'));
+      };
+
+      xhr.onabort = () => {
+        reject(new DOMException('The request was aborted!', 'AbortError'));
+      };
+
+      xhr.ontimeout = () => {
+        reject(new DOMException(`Request timed out after ${xhr.timeout}ms`, 'TimeoutError'));
+      };
+
+      xhr.send(body);
+
+      signal?.addEventListener('abort', () => xhr.abort());
+    });
+
+  return request;
+}
diff --git a/src/client/responseProgress.ts b/src/client/responseProgress.ts
new file mode 100644
index 00000000..08d925b9
--- /dev/null
+++ b/src/client/responseProgress.ts
@@ -0,0 +1,41 @@
+export type ProgressCallback = (receivedBytes: number, totalBytes?: number) => void;
+
+export const responseProgress = async (response: Response, onProgress: ProgressCallback) => {
+  const contentLength = response.headers.get('Content-Length');
+  if (contentLength === null) {
+    console.warn('Content-Length not available. Cannot track progress accurately.');
+  }
+  const total = contentLength ? parseInt(contentLength, 10) : undefined;
+  let loaded = 0;
+
+  const { body } = response;
+  if (!body) {
+    console.warn('Request body not available. Cannot track progress accurately.');
+    return;
+  }
+  const reader = body.getReader();
+
+  while (true) {
+    // eslint-disable-next-line no-await-in-loop
+    const { done, value } = await reader.read();
+    if (done) break;
+
+    loaded += value.length;
+    onProgress(loaded, total);
+  }
+
+  if (total === undefined) {
+    onProgress(loaded, loaded);
+  }
+};
+
+export function createFakeProgress() {
+  let slowdownFactor: number | undefined;
+  return (bytes: number) => {
+    if (!slowdownFactor) {
+      slowdownFactor = bytes;
+      return 0;
+    }
+    return bytes / (bytes + slowdownFactor * 100);
+  };
+}
diff --git a/src/client/room/ThreadMeta.ts b/src/client/room/ThreadMeta.ts
new file mode 100644
index 00000000..54213f8d
--- /dev/null
+++ b/src/client/room/ThreadMeta.ts
@@ -0,0 +1,19 @@
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+
+export class ThreadMeta {
+  public readonly latestEvent: MessageEventWithoutRoomId;
+
+  public readonly count: number;
+
+  public readonly currentUserParticipated: boolean;
+
+  constructor(
+    latestEvent: MessageEventWithoutRoomId,
+    count: number,
+    currentUserParticipated: boolean
+  ) {
+    this.latestEvent = latestEvent;
+    this.count = count;
+    this.currentUserParticipated = currentUserParticipated;
+  }
+}
diff --git a/src/client/room/ThreadTimeline.ts b/src/client/room/ThreadTimeline.ts
new file mode 100644
index 00000000..87226670
--- /dev/null
+++ b/src/client/room/ThreadTimeline.ts
@@ -0,0 +1,303 @@
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { Observable, ObservableValue } from 'neurone/lib/utils/observable';
+import { getRelations, GetRelationsOK } from 'neurone/lib/api/matrix/client/v1/rooms';
+import {
+  getContext,
+  GetContextOK,
+  getEvent,
+  GetEventOK,
+} from 'neurone/lib/api/matrix/client/v3/rooms';
+import {
+  MatrixRequest,
+  MatrixResponseResult,
+  parseMatrixResp,
+  printMatrixError,
+} from 'neurone/lib/matrix-request';
+import { TimelineView } from './TimelineView';
+import { MessageRange, MessageBatch } from './messages';
+import { TimelineBatchManager } from './TimelineBatchManager';
+import { RelationsProcessor } from './relations';
+import { ThreadMeta } from './ThreadMeta';
+import { rRelations, rThread, rUnsigned } from '../reader';
+import { TimelineUtils } from './TimelineUtils';
+import { LocalEventOutbox } from './local-event/LocalEventOutbox';
+import { EventSenderIdle, LocalEvent, LocalEventSender, LocalMessage } from './local-event';
+
+export type ThreadSyncData = {
+  events: MessageEventWithoutRoomId[];
+  limited?: boolean;
+  prevToken?: string;
+};
+
+export class ThreadTimeline implements TimelineView, Disposable {
+  private readonly publishKey = crypto.randomUUID();
+
+  public readonly roomId: string;
+
+  public readonly threadId: string;
+
+  private readonly request: MatrixRequest;
+
+  private readonly disposer = new Disposer();
+
+  public readonly onSync: Observable<ThreadSyncData>;
+
+  public readonly relations: RelationsProcessor;
+
+  public readonly batch: ObservableValue<MessageBatch>;
+
+  private readonly batchManager: TimelineBatchManager;
+
+  public readonly range: MessageRange;
+
+  public readonly outbox = new LocalEventOutbox();
+
+  public meta: ObservableValue<ThreadMeta | undefined>;
+
+  public rootEvent: ObservableValue<MessageEventWithoutRoomId | undefined>;
+
+  private utils: TimelineUtils;
+
+  private paginatingBackward = false;
+
+  private paginatingForward = false;
+
+  constructor(
+    roomId: string,
+    threadId: string,
+    publishKey: string,
+    request: MatrixRequest,
+    relations: RelationsProcessor,
+    rootEvent?: MessageEventWithoutRoomId
+  ) {
+    this.roomId = roomId;
+    this.threadId = threadId;
+    this.request = request;
+    // NOTE: we don't have dedicated set of relations,
+    //  because we do not want to recurse relations to put them in thread.
+    this.relations = relations;
+
+    this.batch = new ObservableValue(MessageBatch.emptyAtForwardEnd(), this.publishKey);
+    this.batchManager = new TimelineBatchManager(this.batch, this.publishKey);
+    this.range = new MessageRange(this.batch);
+
+    this.meta = new ObservableValue(undefined, this.publishKey);
+    this.rootEvent = new ObservableValue(undefined, this.publishKey);
+    this.onSync = new Observable(publishKey);
+    this.utils = new TimelineUtils(roomId, request);
+
+    this.disposer.collect(
+      this.batch,
+      this.range,
+      this.meta,
+      this.onSync,
+      this.onSync.subscribe(this.onSyncListener.bind(this))
+    );
+
+    if (rootEvent) {
+      this.processRootEvent(rootEvent);
+    } else {
+      this.fetchRootEvent();
+    }
+  }
+
+  private processRootEvent(event: MessageEventWithoutRoomId): void {
+    const relations = rUnsigned.relations(event.unsigned);
+    const threadRelation = rRelations.thread(relations);
+    const latestEvent = rThread.latestEvent(threadRelation);
+    const count = rThread.count(threadRelation) ?? 0;
+    const currentUserParticipated = rThread.currentUserParticipated(threadRelation) ?? false;
+
+    if (latestEvent) {
+      this.meta.publish(
+        this.publishKey,
+        new ThreadMeta(latestEvent as MessageEventWithoutRoomId, count, currentUserParticipated)
+      );
+    }
+    this.rootEvent.publish(this.publishKey, event);
+  }
+
+  private async fetchRootEvent(): Promise<void> {
+    const resp = await this.request(
+      getEvent({
+        pathParams: { roomId: this.roomId, eventId: this.threadId },
+      })
+    );
+    const [err, event] = await parseMatrixResp<GetEventOK>(resp);
+    if (err) {
+      console.error(printMatrixError(err));
+      return;
+    }
+    this.processRootEvent(event);
+  }
+
+  private onSyncListener(data: ThreadSyncData): void {
+    const { events, limited, prevToken } = data;
+
+    // NOTE: relations are already picked & filtered in main timeline.
+    this.batchManager.handleSync(events, limited, prevToken);
+
+    const eventsWithRemoteEcho = this.outbox.getSentEventIds().filter((e) => this.findEvent(e));
+    this.outbox.removeByEventIds(eventsWithRemoteEcho);
+  }
+
+  private async getMessages(
+    token: string | undefined,
+    dir: 'b' | 'f',
+    limit: number
+  ): Promise<MatrixResponseResult<GetRelationsOK>> {
+    const resp = await this.request(
+      getRelations({
+        pathParams: {
+          roomId: this.roomId,
+          eventId: this.threadId,
+        },
+        searchParams: {
+          dir,
+          from: token,
+          limit,
+          recurse: true,
+        },
+      })
+    );
+    return parseMatrixResp<GetRelationsOK>(resp);
+  }
+
+  public async paginateBackward(limit: number): Promise<void> {
+    if (this.paginatingBackward) return;
+    this.paginatingBackward = true;
+
+    try {
+      const { id, prev, messages } = this.batch.read;
+      if (prev.end) return;
+
+      const token = prev.token ?? (await this.utils.generatePaginationToken(messages.events, 'b'));
+
+      if (!token && messages.events.length > 0) {
+        this.batchManager.markTimelineStart();
+        return;
+      }
+
+      const [err, result] = await this.getMessages(token, 'b', limit);
+      if (err) {
+        throw new Error(printMatrixError(err));
+      }
+
+      const { next_batch: prevToken, chunk } = result;
+
+      const messageEvents = this.relations.pickAndFilter(chunk);
+
+      this.batchManager.handleBackwardPagination(id, messageEvents, prevToken);
+    } finally {
+      this.paginatingBackward = false;
+    }
+  }
+
+  public async paginateForward(limit: number): Promise<void> {
+    if (this.paginatingForward) return;
+    this.paginatingForward = true;
+
+    try {
+      const { id, next, messages } = this.batch.read;
+      if (next.end) return;
+
+      const token = next.token ?? (await this.utils.generatePaginationToken(messages.events, 'f'));
+
+      if (!token && messages.events.length > 0) {
+        this.batchManager.markTimelineEnd();
+        return;
+      }
+
+      if (!token) {
+        // We do not want to fetch messages from start
+        // as back pagination will fetch from live end.
+        return;
+      }
+
+      const [err, result] = await this.getMessages(token, 'f', limit);
+      if (err) {
+        throw new Error(printMatrixError(err));
+      }
+
+      const { prev_batch: nextToken, chunk } = result;
+
+      const messageEvents = this.relations.pickAndFilter(chunk);
+
+      this.batchManager.handleForwardPagination(id, messageEvents, nextToken);
+    } finally {
+      this.paginatingForward = false;
+    }
+  }
+
+  public async jumpToEvent(eventId: string): Promise<void> {
+    const resp = await this.request(
+      getContext({
+        pathParams: {
+          roomId: this.roomId,
+          eventId,
+        },
+        searchParams: {
+          limit: 0,
+        },
+      })
+    );
+
+    const [err, result] = await parseMatrixResp<GetContextOK>(resp);
+    if (err) {
+      throw new Error(printMatrixError(err));
+    }
+    const { event, start, end } = result;
+    if (!event) {
+      throw new Error(
+        `Failed to jump to event! No event found for ${eventId} in room ${this.roomId}`
+      );
+    }
+
+    const events = [event];
+    const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(events);
+
+    this.batchManager.loadEvents(messageEvents, start, end);
+  }
+
+  public async jumpToLatest(): Promise<void> {
+    if (this.batch.read.next.end) {
+      this.range.setRange(MessageRange.atLiveEnd(this.batch.read.size));
+      return;
+    }
+    const [err, result] = await this.getMessages(undefined, 'b', 80);
+
+    if (err) {
+      throw new Error(printMatrixError(err));
+    }
+
+    const { next_batch: prevToken, prev_batch: endToken, chunk } = result;
+    const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(chunk);
+    this.batchManager.loadEvents(messageEvents, prevToken, endToken);
+  }
+
+  public findEvent(eventId: string): MessageEventWithoutRoomId | undefined {
+    return this.batch.read.messages.get(eventId);
+  }
+
+  public async sendMessage(
+    originalMessage: LocalMessage,
+    wireMessage: LocalMessage,
+    txnId: string
+  ): Promise<LocalEventSender> {
+    const localEvent = new LocalEvent(originalMessage, wireMessage, txnId, Date.now());
+
+    const sender = new LocalEventSender(localEvent, this.request);
+
+    this.outbox.add(sender);
+    if (sender.state.read instanceof EventSenderIdle) {
+      sender.state.read.send();
+    }
+
+    return sender;
+  }
+
+  dispose(): void {
+    this.disposer.run();
+  }
+}
diff --git a/src/client/room/Timeline.ts b/src/client/room/Timeline.ts
new file mode 100644
index 00000000..68a36d32
--- /dev/null
+++ b/src/client/room/Timeline.ts
@@ -0,0 +1,349 @@
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { Observable, ObservableValue } from 'neurone/lib/utils/observable';
+import { JoinRoom } from 'neurone/lib/api/matrix/client/v3/sync';
+import {
+  getContext,
+  GetContextOK,
+  getMessages,
+  GetMessagesOK,
+} from 'neurone/lib/api/matrix/client/v3/rooms';
+import {
+  MatrixRequest,
+  MatrixResponseResult,
+  parseMatrixResp,
+  printMatrixError,
+} from 'neurone/lib/matrix-request';
+import { TimelineView } from './TimelineView';
+import { MessageRange, MessageBatch } from './messages';
+import { TimelineBatchManager } from './TimelineBatchManager';
+import { RelationsProcessor } from './relations';
+import { ThreadTimeline } from './ThreadTimeline';
+import { getMessagesFilter } from '../filter';
+import { rContent, rRelatesTo, rRelations, rUnsigned } from '../reader';
+import { RelationType } from '../../types/matrix/common';
+import { getThreadId } from '../../app/utils/room';
+import { TimelineUtils } from './TimelineUtils';
+import { EventSenderIdle, LocalEvent, LocalEventSender, LocalMessage } from './local-event';
+import { LocalEventOutbox } from './local-event/LocalEventOutbox';
+
+export class Timeline implements TimelineView, Disposable {
+  private readonly publishKey = crypto.randomUUID();
+
+  public readonly roomId: string;
+
+  private readonly request: MatrixRequest;
+
+  private readonly disposer: Disposer = new Disposer();
+
+  private readonly msgFilter: string = JSON.stringify(getMessagesFilter());
+
+  public readonly onSync: Observable<JoinRoom>;
+
+  public readonly relations: RelationsProcessor;
+
+  public readonly batch: ObservableValue<MessageBatch>;
+
+  private readonly batchManager: TimelineBatchManager;
+
+  public readonly range: MessageRange;
+
+  public readonly outbox = new LocalEventOutbox();
+
+  public readonly threads: ObservableValue<Map<string, ThreadTimeline>> = new ObservableValue(
+    new Map(),
+    this.publishKey
+  );
+
+  public readonly activeThread = new ObservableValue<string | undefined>(
+    undefined,
+    this.publishKey
+  );
+
+  private utils: TimelineUtils;
+
+  private paginatingBackward = false;
+
+  private paginatingForward = false;
+
+  constructor(roomId: string, publishKey: string, request: MatrixRequest) {
+    this.roomId = roomId;
+    this.request = request;
+    this.relations = new RelationsProcessor();
+
+    this.batch = new ObservableValue(MessageBatch.emptyAtForwardEnd(), this.publishKey);
+    this.batchManager = new TimelineBatchManager(this.batch, this.publishKey);
+    this.range = new MessageRange(this.batch);
+
+    this.onSync = new Observable(publishKey);
+    this.utils = new TimelineUtils(roomId, request);
+
+    this.disposer.collect(
+      this.range,
+      this.relations,
+      this.batch,
+      () => {
+        this.threads.read.forEach((thread) => thread.dispose());
+        this.threads.dispose();
+      },
+      this.activeThread,
+      this.onSync,
+      this.onSync.subscribe(this.onSyncListener.bind(this))
+    );
+  }
+
+  private onSyncListener(joinRoom: JoinRoom): void {
+    const { events, limited, prev_batch: prevToken } = joinRoom.timeline ?? {};
+
+    const messageEvents: MessageEventWithoutRoomId[] = events
+      ? this.relations.pickAndFilter(events)
+      : [];
+
+    queueMicrotask(() => this.syncThreads(messageEvents, limited, prevToken));
+
+    this.batchManager.handleSync(messageEvents, limited, prevToken);
+
+    const eventsWithRemoteEcho = this.outbox.getSentEventIds().filter((e) => this.findEvent(e));
+    this.outbox.removeByEventIds(eventsWithRemoteEcho);
+  }
+
+  private syncThreads(
+    messageEvents: MessageEventWithoutRoomId[],
+    limited: boolean | undefined,
+    prevToken: string | undefined
+  ): void {
+    const threadIdToEvents = new Map<string, MessageEventWithoutRoomId[]>();
+
+    messageEvents.forEach((event) => {
+      const relatesTo = rContent.relatesTo(event.content);
+      const threadId =
+        rRelatesTo.relType(relatesTo) === RelationType.Thread
+          ? rRelatesTo.eventId(relatesTo)
+          : undefined;
+
+      if (threadId) {
+        const threadEvents = threadIdToEvents.get(threadId) ?? [];
+        threadEvents.push(event);
+        threadIdToEvents.set(threadId, threadEvents);
+      }
+    });
+
+    threadIdToEvents.forEach((events, threadId) => {
+      const thread: ThreadTimeline =
+        this.threads.read.get(threadId) ??
+        new ThreadTimeline(this.roomId, threadId, this.publishKey, this.request, this.relations);
+
+      thread.onSync.publish(this.publishKey, { events, limited, prevToken });
+
+      if (!this.threads.read.has(threadId)) {
+        this.addThread(thread);
+      }
+    });
+  }
+
+  private addThread(thread: ThreadTimeline): void {
+    const newThreads = new Map(this.threads.read);
+    newThreads.set(thread.threadId, thread);
+    this.threads.publish(this.publishKey, newThreads);
+  }
+
+  private pickThreads(events: MessageEventWithoutRoomId[]): void {
+    const threadRoots = new Map<string, MessageEventWithoutRoomId | undefined>();
+
+    events.forEach((event) => {
+      const threadId = getThreadId(event);
+      if (threadId) {
+        threadRoots.set(threadId, undefined);
+        return;
+      }
+
+      const relations = rUnsigned.relations(event.unsigned);
+      const threadRelations = rRelations.thread(relations);
+      if (threadRelations) {
+        threadRoots.set(event.event_id, event);
+      }
+    });
+
+    threadRoots.forEach((event, threadId) => {
+      if (this.threads.read.has(threadId)) return;
+
+      const thread = new ThreadTimeline(
+        this.roomId,
+        threadId,
+        this.publishKey,
+        this.request,
+        this.relations,
+        event
+      );
+      this.addThread(thread);
+    });
+  }
+
+  public async paginateBackward(limit: number): Promise<void> {
+    if (this.paginatingBackward) return;
+    this.paginatingBackward = true;
+
+    try {
+      const { id, prev, messages } = this.batch.read;
+      if (prev.end) return;
+
+      const token = prev.token ?? (await this.utils.generatePaginationToken(messages.events, 'b'));
+
+      if (!token && messages.events.length > 0) {
+        this.batchManager.markTimelineStart();
+        return;
+      }
+
+      const [err, result] = await this.getMessages(token, 'b', limit);
+      if (err) {
+        throw new Error(printMatrixError(err));
+      }
+
+      const { end: prevToken, chunk } = result;
+      const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(chunk);
+
+      this.pickThreads(messageEvents);
+
+      this.batchManager.handleBackwardPagination(id, messageEvents, prevToken);
+    } finally {
+      this.paginatingBackward = false;
+    }
+  }
+
+  public async paginateForward(limit: number): Promise<void> {
+    if (this.paginatingForward) return;
+    this.paginatingForward = true;
+
+    try {
+      const { id, next, messages } = this.batch.read;
+      if (next.end) return;
+
+      const token = next.token ?? (await this.utils.generatePaginationToken(messages.events, 'f'));
+
+      if (!token && messages.events.length > 0) {
+        this.batchManager.markTimelineEnd();
+        return;
+      }
+
+      if (!token) {
+        // We do not want to fetch messages from start
+        // as back pagination will fetch from live end.
+        return;
+      }
+
+      const [err, result] = await this.getMessages(token, 'f', limit);
+      if (err) {
+        throw new Error(printMatrixError(err));
+      }
+
+      const { end: nextToken, chunk } = result;
+      const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(chunk);
+
+      this.pickThreads(messageEvents);
+
+      this.batchManager.handleForwardPagination(id, messageEvents, nextToken);
+    } finally {
+      this.paginatingForward = false;
+    }
+  }
+
+  public async jumpToEvent(eventId: string): Promise<void> {
+    const resp = await this.request(
+      getContext({
+        pathParams: {
+          roomId: this.roomId,
+          eventId,
+        },
+        searchParams: {
+          limit: 20,
+          filter: this.msgFilter,
+        },
+      })
+    );
+
+    const [err, result] = await parseMatrixResp<GetContextOK>(resp);
+    if (err) {
+      throw new Error(printMatrixError(err));
+    }
+    const { event, events_after: before, events_after: after, start, end } = result;
+    if (!event) {
+      throw new Error(
+        `Failed to jump to event! No event found for ${eventId} in room ${this.roomId}`
+      );
+    }
+
+    const events = [...(before ?? []), event, ...(after ?? [])];
+    const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(events);
+
+    this.pickThreads(messageEvents);
+    this.batchManager.loadEvents(messageEvents, start, end);
+  }
+
+  public async jumpToLatest(): Promise<void> {
+    if (this.batch.read.next.end) {
+      this.range.setRange(MessageRange.atLiveEnd(this.batch.read.size));
+      return;
+    }
+    const [err, result] = await this.getMessages(undefined, 'b', 80);
+
+    if (err) {
+      throw new Error(printMatrixError(err));
+    }
+
+    const { end: prevToken, start: endToken, chunk } = result;
+    const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(chunk);
+    this.batchManager.loadEvents(messageEvents, prevToken, endToken);
+  }
+
+  public findEvent(eventId: string): MessageEventWithoutRoomId | undefined {
+    return this.batch.read.messages.get(eventId);
+  }
+
+  private async getMessages(
+    token: string | undefined,
+    dir: 'b' | 'f',
+    limit: number
+  ): Promise<MatrixResponseResult<GetMessagesOK>> {
+    const msgResp = await this.request(
+      getMessages({
+        pathParams: { roomId: this.roomId },
+        searchParams: {
+          dir,
+          from: token,
+          limit,
+          filter: this.msgFilter,
+        },
+      })
+    );
+    return parseMatrixResp<GetMessagesOK>(msgResp);
+  }
+
+  public async sendMessage(
+    originalMessage: LocalMessage,
+    wireMessage: LocalMessage,
+    txnId: string
+  ): Promise<LocalEventSender> {
+    const localEvent = new LocalEvent(originalMessage, wireMessage, txnId, Date.now());
+
+    const sender = new LocalEventSender(localEvent, this.request);
+
+    this.outbox.add(sender);
+    if (sender.state.read instanceof EventSenderIdle) {
+      sender.state.read.send();
+    }
+
+    return sender;
+  }
+
+  public openThread(threadId: string): void {
+    this.activeThread.publish(this.publishKey, threadId);
+  }
+
+  public closeThread(): void {
+    this.activeThread.publish(this.publishKey, undefined);
+  }
+
+  public dispose(): void {
+    this.disposer.run();
+  }
+}
diff --git a/src/client/room/TimelineBatchManager.ts b/src/client/room/TimelineBatchManager.ts
new file mode 100644
index 00000000..413ec57f
--- /dev/null
+++ b/src/client/room/TimelineBatchManager.ts
@@ -0,0 +1,127 @@
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { MessageBatch, Messages, BatchInfo, BatchChange } from './messages';
+
+export class TimelineBatchManager {
+  private readonly publishKey: string;
+
+  private readonly batch: ObservableValue<MessageBatch>;
+
+  constructor(batch: ObservableValue<MessageBatch>, publishKey: string) {
+    this.batch = batch;
+    this.publishKey = publishKey;
+  }
+
+  public handleSync(
+    messageEvents: MessageEventWithoutRoomId[],
+    limited: boolean | undefined,
+    prevToken: string | undefined
+  ): void {
+    if (!limited && messageEvents.length === 0) return;
+
+    // Skip if timeline is not at live end
+    if (!this.batch.read.next.end) return;
+
+    const { id, prev, next, messages } = this.batch.read;
+    const liveEmpty = next.end && this.batch.read.size === 0;
+    const mergeable = limited ? messages.overlap(messageEvents) || liveEmpty : undefined;
+
+    if (limited && !mergeable) {
+      this.batch.publish(
+        this.publishKey,
+        new MessageBatch(
+          crypto.randomUUID(),
+          this.batch.read.messages,
+          this.batch.read.prev,
+          new BatchInfo(undefined, false),
+          this.batch.read.change
+        )
+      );
+      return;
+    }
+
+    const newPrev =
+      !prev.token && messages.events.length === 0 ? new BatchInfo(prevToken, !prevToken) : prev;
+
+    const newBatch = new MessageBatch(
+      id,
+      messages.mergeFork(messageEvents),
+      newPrev,
+      next.end ? next : new BatchInfo(undefined, true),
+      new BatchChange('Grow', 'f')
+    );
+    this.batch.publish(this.publishKey, newBatch);
+  }
+
+  public handleBackwardPagination(
+    batchId: string,
+    messageEvents: MessageEventWithoutRoomId[],
+    prevToken: string | undefined
+  ): void {
+    if (batchId !== this.batch.read.id) {
+      return;
+    }
+
+    const newBatch = new MessageBatch(
+      this.batch.read.id,
+      this.batch.read.messages.mergeFork(messageEvents),
+      new BatchInfo(prevToken, !prevToken),
+      this.batch.read.next,
+      new BatchChange('Grow', 'b')
+    );
+    this.batch.publish(this.publishKey, newBatch);
+  }
+
+  public handleForwardPagination(
+    batchId: string,
+    messageEvents: MessageEventWithoutRoomId[],
+    nextToken: string | undefined
+  ): void {
+    if (batchId !== this.batch.read.id) {
+      return;
+    }
+
+    const newBatch = new MessageBatch(
+      this.batch.read.id,
+      this.batch.read.messages.mergeFork(messageEvents),
+      this.batch.read.prev,
+      new BatchInfo(nextToken, !nextToken),
+      new BatchChange('Grow', 'f')
+    );
+    this.batch.publish(this.publishKey, newBatch);
+  }
+
+  public markTimelineStart(): void {
+    const newBatch = new MessageBatch(
+      this.batch.read.id,
+      this.batch.read.messages,
+      new BatchInfo(undefined, true),
+      this.batch.read.next,
+      new BatchChange('Grow', 'b')
+    );
+    this.batch.publish(this.publishKey, newBatch);
+  }
+
+  public markTimelineEnd(): void {
+    const newBatch = new MessageBatch(
+      this.batch.read.id,
+      this.batch.read.messages,
+      this.batch.read.prev,
+      new BatchInfo(undefined, true),
+      new BatchChange('Grow', 'f')
+    );
+    this.batch.publish(this.publishKey, newBatch);
+  }
+
+  public loadEvents(events: MessageEventWithoutRoomId[], prevToken?: string, nextToken?: string) {
+    const newBatch = new MessageBatch(
+      crypto.randomUUID(),
+      new Messages(events),
+      new BatchInfo(prevToken, !prevToken),
+      new BatchInfo(nextToken, !nextToken),
+      new BatchChange()
+    );
+
+    this.batch.publish(this.publishKey, newBatch);
+  }
+}
diff --git a/src/client/room/TimelineUtils.ts b/src/client/room/TimelineUtils.ts
new file mode 100644
index 00000000..55361cfe
--- /dev/null
+++ b/src/client/room/TimelineUtils.ts
@@ -0,0 +1,57 @@
+import {
+  getContext,
+  GetContextOK,
+  getEvent,
+  GetEventOK,
+} from 'neurone/lib/api/matrix/client/v3/rooms';
+import { ClientEvent, MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { MatrixRequest, parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+
+export class TimelineUtils {
+  private roomId: string;
+
+  private request: MatrixRequest;
+
+  constructor(roomId: string, request: MatrixRequest) {
+    this.roomId = roomId;
+    this.request = request;
+  }
+
+  public async generatePaginationToken(
+    events: MessageEventWithoutRoomId[],
+    dir: 'b' | 'f'
+  ): Promise<string | undefined> {
+    const event: MessageEventWithoutRoomId | undefined =
+      events[dir === 'b' ? 0 : events.length - 1];
+    if (!event) return undefined;
+
+    const ctxResp = await this.request(
+      getContext({
+        pathParams: {
+          roomId: this.roomId,
+          eventId: event.event_id,
+        },
+        searchParams: {
+          limit: 0,
+        },
+      })
+    );
+    const [err, result] = await parseMatrixResp<GetContextOK>(ctxResp);
+    if (err) {
+      throw new Error(printMatrixError(err));
+    }
+    return dir === 'b' ? result.start : result.end;
+  }
+
+  public async getEvent(eventId: string): Promise<ClientEvent | undefined> {
+    const resp = await this.request(
+      getEvent({
+        pathParams: { roomId: this.roomId, eventId },
+      })
+    );
+
+    const [err, event] = await parseMatrixResp<GetEventOK>(resp);
+    if (err) throw new Error(printMatrixError(err));
+    return event;
+  }
+}
diff --git a/src/client/room/TimelineView.ts b/src/client/room/TimelineView.ts
new file mode 100644
index 00000000..4706ccd7
--- /dev/null
+++ b/src/client/room/TimelineView.ts
@@ -0,0 +1,23 @@
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { MessageBatch, MessageRange } from './messages';
+import { RelationsProcessor } from './relations';
+import { LocalEventOutbox } from './local-event/LocalEventOutbox';
+import { LocalEventSender, LocalMessage } from './local-event';
+
+export interface TimelineView {
+  readonly batch: ObservableValue<MessageBatch>;
+  readonly range: MessageRange;
+  readonly outbox: LocalEventOutbox;
+  readonly relations: RelationsProcessor;
+  paginateBackward(limit: number): Promise<void>;
+  paginateForward(limit: number): Promise<void>;
+  findEvent(eventId: string): MessageEventWithoutRoomId | undefined;
+  jumpToEvent(eventId: string): Promise<void>;
+  jumpToLatest(): Promise<void>;
+  sendMessage(
+    originalMessage: LocalMessage,
+    wireMessage: LocalMessage,
+    txnId: string
+  ): Promise<LocalEventSender>;
+}
diff --git a/src/client/room/index.ts b/src/client/room/index.ts
new file mode 100644
index 00000000..012879e4
--- /dev/null
+++ b/src/client/room/index.ts
@@ -0,0 +1,96 @@
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { Disposer } from 'neurone/lib/utils/disposable';
+import { JoinRoom } from 'neurone/lib/api/matrix/client/v3/sync';
+import { MatrixRequest } from 'neurone/lib/matrix-request';
+import { Timeline } from './Timeline';
+import { SyncValue } from '../sync';
+
+export * from './Timeline';
+export * from './TimelineView';
+
+export const createTimelines = (
+  joinedRooms: ObservableValue<string[]>,
+  syncObservable: ObservableValue<SyncValue>,
+  request: MatrixRequest,
+  disposer: Disposer
+): ObservableValue<Map<string, Timeline>> => {
+  const publishKey: string = crypto.randomUUID();
+
+  const roomToTimeline = new ObservableValue<Map<string, Timeline>>(new Map(), publishKey);
+
+  const initTimelineForRooms = (roomIds: string[]) => {
+    const nextTimelines = new Map(roomToTimeline.read);
+    roomIds.forEach((rId) => {
+      if (nextTimelines.has(rId)) return;
+      nextTimelines.set(rId, new Timeline(rId, publishKey, request));
+    });
+    roomToTimeline.publish(publishKey, nextTimelines);
+  };
+
+  const pushTimelines = (timelines: Timeline[]) => {
+    if (timelines.length === 0) return;
+
+    const nextTimelines = new Map(roomToTimeline.read);
+    timelines.forEach((t) => {
+      if (nextTimelines.has(t.roomId)) return;
+      nextTimelines.set(t.roomId, t);
+    });
+    roomToTimeline.publish(publishKey, nextTimelines);
+  };
+
+  const deleteTimelines = (roomIds: string[]) => {
+    const nextTimelines = new Map(roomToTimeline.read);
+
+    roomIds.forEach((rId) => {
+      const timeline = nextTimelines.get(rId);
+      if (timeline) {
+        timeline.dispose?.();
+        nextTimelines.delete(rId);
+      }
+    });
+
+    roomToTimeline.publish(publishKey, nextTimelines);
+  };
+
+  initTimelineForRooms(joinedRooms.read);
+
+  disposer.collect(
+    joinedRooms.subscribe((rooms) => {
+      initTimelineForRooms(rooms);
+      const removedRooms = Array.from(roomToTimeline.read.keys()).filter((r) => !rooms.includes(r));
+      deleteTimelines(removedRooms);
+    })
+  );
+
+  const writeToTimelines = (join: Record<string, JoinRoom>) => {
+    const joinRooms = Object.keys(join);
+    const unknownTimeline: Timeline[] = [];
+
+    joinRooms.forEach((roomId) => {
+      const joinRoom = join[roomId];
+      const timeline = roomToTimeline.read.get(roomId);
+      if (!timeline) {
+        const nT = new Timeline(roomId, publishKey, request);
+        nT.onSync.publish(publishKey, joinRoom);
+        unknownTimeline.push(nT);
+        return;
+      }
+      timeline.onSync.publish(publishKey, joinRoom);
+    });
+
+    pushTimelines(unknownTimeline);
+  };
+
+  disposer.collect(
+    syncObservable.subscribe((value) => {
+      const [, result] = value ?? [];
+      const join = result?.rooms?.join;
+
+      if (join) {
+        writeToTimelines(join);
+      }
+    })
+  );
+
+  return roomToTimeline;
+};
diff --git a/src/client/room/local-event/LocalEvent.ts b/src/client/room/local-event/LocalEvent.ts
new file mode 100644
index 00000000..275547ec
--- /dev/null
+++ b/src/client/room/local-event/LocalEvent.ts
@@ -0,0 +1,29 @@
+export class LocalMessage<TContent extends object = object> {
+  constructor(
+    public readonly roomId: string,
+    public readonly type: string,
+    public readonly content: TContent
+  ) {}
+
+  clone(): LocalMessage {
+    return new LocalMessage(this.roomId, this.type, this.content);
+  }
+}
+
+export class LocalEvent {
+  public readonly original: LocalMessage;
+
+  public readonly wire: LocalMessage;
+
+  public readonly txnId: string;
+
+  public readonly ts: number;
+
+  constructor(original: LocalMessage, wire: LocalMessage, txnId: string, ts: number) {
+    this.original = original;
+    this.wire = wire;
+    this.txnId = txnId;
+
+    this.ts = ts;
+  }
+}
diff --git a/src/client/room/local-event/LocalEventOutbox.ts b/src/client/room/local-event/LocalEventOutbox.ts
new file mode 100644
index 00000000..89a0fa99
--- /dev/null
+++ b/src/client/room/local-event/LocalEventOutbox.ts
@@ -0,0 +1,53 @@
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { EventSenderSuccess, LocalEventSender } from './LocalEventSender';
+
+export class LocalEventOutbox {
+  private readonly publishKey = crypto.randomUUID();
+
+  public readonly senders: ObservableValue<readonly LocalEventSender[]>;
+
+  constructor() {
+    this.senders = new ObservableValue([], this.publishKey);
+  }
+
+  private get items(): readonly LocalEventSender[] {
+    return this.senders.read;
+  }
+
+  public add(sender: LocalEventSender): LocalEventSender {
+    const n = this.items.filter((s) => s !== sender);
+    n.push(sender);
+    this.senders.publish(this.publishKey, n);
+
+    return sender;
+  }
+
+  public remove(sender: LocalEventSender): void {
+    const index = this.items.indexOf(sender);
+
+    if (index === -1) {
+      return;
+    }
+
+    const n = this.items.filter((s) => s !== sender);
+    this.senders.publish(this.publishKey, n);
+  }
+
+  public removeByEventIds(eventIds: readonly string[]): void {
+    const ids = new Set(eventIds);
+
+    const n = this.items.filter(
+      (s) => !(s.state.read instanceof EventSenderSuccess && ids.has(s.state.read.eventId))
+    );
+    if (n.length === this.items.length) {
+      return;
+    }
+    this.senders.publish(this.publishKey, n);
+  }
+
+  public getSentEventIds(): string[] {
+    return this.items
+      .map((s) => (s.state.read instanceof EventSenderSuccess ? s.state.read.eventId : undefined))
+      .filter<string>((eId): eId is string => typeof eId === 'string');
+  }
+}
diff --git a/src/client/room/local-event/LocalEventSender.ts b/src/client/room/local-event/LocalEventSender.ts
new file mode 100644
index 00000000..9d885d76
--- /dev/null
+++ b/src/client/room/local-event/LocalEventSender.ts
@@ -0,0 +1,111 @@
+import { putSend, PutSendOK } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { MatrixError, MatrixRequest, parseMatrixResp } from 'neurone/lib/matrix-request';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import to from 'await-to-js';
+import { LocalEvent } from './LocalEvent';
+
+export class EventSenderIdle {
+  constructor(public readonly send: () => Promise<void>) {}
+}
+
+export class EventSenderPending {
+  constructor(public readonly abort: () => void) {}
+}
+
+export class EventSenderSuccess {
+  constructor(public readonly eventId: string) {}
+}
+
+export class EventSenderError {
+  constructor(
+    public readonly resend: () => Promise<void>,
+    public readonly error?: MatrixError,
+    public readonly cause?: unknown
+  ) {}
+}
+
+export type LocalEventSenderState =
+  | EventSenderIdle
+  | EventSenderPending
+  | EventSenderSuccess
+  | EventSenderError;
+
+export class LocalEventSender {
+  public readonly localEvent: LocalEvent;
+
+  private readonly request: MatrixRequest;
+
+  private readonly publishKey = crypto.randomUUID();
+
+  public readonly state: ObservableValue<LocalEventSenderState>;
+
+  private sending = false;
+
+  constructor(localEvent: LocalEvent, request: MatrixRequest) {
+    this.localEvent = localEvent;
+    this.request = request;
+    this.state = new ObservableValue(new EventSenderIdle(this.send.bind(this)), this.publishKey);
+  }
+
+  private markIdle() {
+    this.state.publish(this.publishKey, new EventSenderIdle(this.send.bind(this)));
+  }
+
+  private markSending(abortController: AbortController) {
+    this.state.publish(this.publishKey, new EventSenderPending(() => abortController.abort()));
+  }
+
+  private markSent(eventId: string) {
+    this.state.publish(this.publishKey, new EventSenderSuccess(eventId));
+  }
+
+  private markFailed(error?: MatrixError, cause?: unknown) {
+    this.state.publish(this.publishKey, new EventSenderError(this.send.bind(this), error, cause));
+  }
+
+  private async send(): Promise<void> {
+    if (this.sending) return;
+    this.sending = true;
+
+    try {
+      const abortController = new AbortController();
+
+      this.markSending(abortController);
+
+      const [reqError, response] = await to(
+        this.request(
+          putSend({
+            pathParams: {
+              roomId: this.localEvent.wire.roomId,
+              eventType: this.localEvent.wire.type,
+              txnId: this.localEvent.txnId,
+            },
+            body: this.localEvent.wire.content,
+          })
+        ),
+        abortController.signal
+      );
+
+      if (reqError) {
+        if (reqError.name === 'AbortError') {
+          this.markIdle();
+          return;
+        }
+
+        this.markFailed(undefined, reqError);
+        return;
+      }
+
+      const [err, result] = await parseMatrixResp<PutSendOK>(response);
+
+      if (err) {
+        this.markFailed(err, undefined);
+        return;
+      }
+
+      this.markSent(result.event_id);
+    } finally {
+      this.sending = false;
+    }
+  }
+}
diff --git a/src/client/room/local-event/index.ts b/src/client/room/local-event/index.ts
new file mode 100644
index 00000000..6da91b4b
--- /dev/null
+++ b/src/client/room/local-event/index.ts
@@ -0,0 +1,2 @@
+export * from './LocalEvent';
+export * from './LocalEventSender';
diff --git a/src/client/room/messages/BatchChange.ts b/src/client/room/messages/BatchChange.ts
new file mode 100644
index 00000000..8c16e42e
--- /dev/null
+++ b/src/client/room/messages/BatchChange.ts
@@ -0,0 +1,14 @@
+type ChangeType = 'Grow' | 'Shrink';
+
+type ChangeDirection = 'f' | 'b';
+
+export class BatchChange {
+  public readonly type?: ChangeType;
+
+  public readonly dir?: ChangeDirection;
+
+  constructor(type?: ChangeType, dir?: ChangeDirection) {
+    this.type = type;
+    this.dir = dir;
+  }
+}
diff --git a/src/client/room/messages/BatchInfo.ts b/src/client/room/messages/BatchInfo.ts
new file mode 100644
index 00000000..7bd6c765
--- /dev/null
+++ b/src/client/room/messages/BatchInfo.ts
@@ -0,0 +1,10 @@
+export class BatchInfo {
+  public readonly token?: string;
+
+  public readonly end?: boolean;
+
+  constructor(token?: string, end?: boolean) {
+    this.token = token;
+    this.end = end;
+  }
+}
diff --git a/src/client/room/messages/MessageBatch.ts b/src/client/room/messages/MessageBatch.ts
new file mode 100644
index 00000000..a9d5d8b1
--- /dev/null
+++ b/src/client/room/messages/MessageBatch.ts
@@ -0,0 +1,43 @@
+import { BatchChange } from './BatchChange';
+import { BatchInfo } from './BatchInfo';
+import { Messages } from '.';
+
+export class MessageBatch {
+  public readonly id: string;
+
+  public readonly messages: Messages;
+
+  public readonly prev: BatchInfo;
+
+  public readonly next: BatchInfo;
+
+  public readonly change: BatchChange;
+
+  static emptyAtForwardEnd(): MessageBatch {
+    return new MessageBatch(
+      crypto.randomUUID(),
+      new Messages([]),
+      new BatchInfo(),
+      new BatchInfo(undefined, true),
+      new BatchChange()
+    );
+  }
+
+  constructor(
+    id: string,
+    messages: Messages,
+    prev: BatchInfo,
+    next: BatchInfo,
+    change: BatchChange
+  ) {
+    this.id = id;
+    this.messages = messages;
+    this.prev = prev;
+    this.next = next;
+    this.change = change;
+  }
+
+  get size(): number {
+    return this.messages.events.length;
+  }
+}
diff --git a/src/client/room/messages/MessageRange.ts b/src/client/room/messages/MessageRange.ts
new file mode 100644
index 00000000..41e9b0f4
--- /dev/null
+++ b/src/client/room/messages/MessageRange.ts
@@ -0,0 +1,90 @@
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { MessageBatch } from './MessageBatch';
+
+export type RangeInfo = {
+  start: number;
+  end: number;
+};
+
+export class MessageRange implements Disposable {
+  public readonly disposer = new Disposer();
+
+  public readonly info: ObservableValue<RangeInfo>;
+
+  private readonly publishKey = crypto.randomUUID();
+
+  private oldLength: number;
+
+  /**
+   * View saves this on unmount to restore later.
+   */
+  public scrollTopCache: number | undefined;
+
+  static rangeLimit = 80;
+
+  static atLiveEnd(len: number): RangeInfo {
+    return {
+      start: Math.max(0, len - this.rangeLimit),
+      end: len,
+    };
+  }
+
+  constructor(batch: ObservableValue<MessageBatch>) {
+    const len = batch.read.size;
+
+    this.info = new ObservableValue(MessageRange.atLiveEnd(len), this.publishKey);
+    this.oldLength = len;
+
+    this.disposer.collect(batch.subscribe(this.onBatchUpdate.bind(this)));
+  }
+
+  private onBatchUpdate(batch: MessageBatch) {
+    const { change, size } = batch;
+    const oldLen = this.oldLength;
+    this.oldLength = size;
+
+    if (change.type === 'Grow' && change.dir === 'b') {
+      const lenAdded = size - oldLen;
+      this.setRange(
+        oldLen === 0 && batch.next.end
+          ? MessageRange.atLiveEnd(size)
+          : this.adjustBackwardGrowth(lenAdded)
+      );
+      return;
+    }
+    if (change.type === 'Grow' && change.dir === 'f') {
+      if (oldLen !== size && batch.next.end) {
+        // keep timeline at live end and updated
+        const lenAdded = size - oldLen;
+        this.setRange({
+          start: size <= MessageRange.rangeLimit ? 0 : lenAdded + this.info.read.start,
+          end: lenAdded + this.info.read.end,
+        });
+      }
+      return;
+    }
+
+    if (change.type === 'Shrink') {
+      // NOTE: skip as we do not delete messages.
+      return;
+    }
+
+    this.setRange(MessageRange.atLiveEnd(size));
+  }
+
+  private adjustBackwardGrowth(lenthChange: number): RangeInfo {
+    return {
+      start: this.info.read.start + lenthChange,
+      end: this.info.read.end + lenthChange,
+    };
+  }
+
+  public setRange(info: RangeInfo) {
+    this.info.publish(this.publishKey, info);
+  }
+
+  public dispose(): void {
+    this.disposer.run();
+  }
+}
diff --git a/src/client/room/messages/Messages.ts b/src/client/room/messages/Messages.ts
new file mode 100644
index 00000000..ff00d865
--- /dev/null
+++ b/src/client/room/messages/Messages.ts
@@ -0,0 +1,82 @@
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+
+export class Messages {
+  public readonly events: MessageEventWithoutRoomId[];
+
+  constructor(events: MessageEventWithoutRoomId[]) {
+    this.events = Messages.sort(events);
+  }
+
+  public fork(): Messages {
+    return new Messages(this.events);
+  }
+
+  public overlap(events: MessageEventWithoutRoomId[]): boolean {
+    return events.some((e) => this.events.some((ev) => ev.event_id === e.event_id));
+  }
+
+  public mergeFork(events: MessageEventWithoutRoomId[]): Messages {
+    const newEvents = Messages.sort(events);
+
+    return Messages.merge(newEvents, this.events);
+  }
+
+  public get(eventId: string): MessageEventWithoutRoomId | undefined {
+    return this.events.find((event) => event.event_id === eventId);
+  }
+
+  static sort(events: MessageEventWithoutRoomId[]): MessageEventWithoutRoomId[] {
+    return [...events].sort((a, b) => a.origin_server_ts - b.origin_server_ts);
+  }
+
+  static merge(m1: MessageEventWithoutRoomId[], m2: MessageEventWithoutRoomId[]): Messages {
+    const seen = new Set<string>();
+    const merged: MessageEventWithoutRoomId[] = [];
+
+    let i = 0;
+    let j = 0;
+
+    while (i < m1.length && j < m2.length) {
+      const oldEvent = m1[i];
+      const newEvent = m2[j];
+
+      if (oldEvent.origin_server_ts <= newEvent.origin_server_ts) {
+        if (!seen.has(oldEvent.event_id)) {
+          seen.add(oldEvent.event_id);
+          merged.push(oldEvent);
+        }
+        i += 1;
+      } else {
+        if (!seen.has(newEvent.event_id)) {
+          seen.add(newEvent.event_id);
+          merged.push(newEvent);
+        }
+        j += 1;
+      }
+    }
+
+    // Drain remaining old events
+    while (i < m1.length) {
+      const event = m1[i];
+      i += 1;
+
+      if (!seen.has(event.event_id)) {
+        seen.add(event.event_id);
+        merged.push(event);
+      }
+    }
+
+    // Drain remaining new events
+    while (j < m2.length) {
+      const event = m2[j];
+      j += 1;
+
+      if (!seen.has(event.event_id)) {
+        seen.add(event.event_id);
+        merged.push(event);
+      }
+    }
+
+    return new Messages(merged);
+  }
+}
diff --git a/src/client/room/messages/index.ts b/src/client/room/messages/index.ts
new file mode 100644
index 00000000..de605a2a
--- /dev/null
+++ b/src/client/room/messages/index.ts
@@ -0,0 +1,5 @@
+export * from './BatchChange';
+export * from './BatchInfo';
+export * from './MessageBatch';
+export * from './MessageRange';
+export * from './Messages';
diff --git a/src/client/room/relations/Relations.ts b/src/client/room/relations/Relations.ts
new file mode 100644
index 00000000..c59029b8
--- /dev/null
+++ b/src/client/room/relations/Relations.ts
@@ -0,0 +1,57 @@
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { Relation, RelationType } from '../../../types/matrix/common';
+import { rContent, rRelatesTo } from '../../reader';
+
+export class Relations<T extends RelationType, Content extends Relation<T> = Relation<T>>
+  implements Disposable
+{
+  public readonly relType: RelationType;
+
+  public readonly eventToRelations: ObservableValue<
+    Map<string, MessageEventWithoutRoomId<Content>[]>
+  >;
+
+  private publishKey: string = crypto.randomUUID();
+
+  private disposer = new Disposer();
+
+  constructor(relType: T) {
+    this.relType = relType;
+
+    this.eventToRelations = new ObservableValue(new Map(), this.publishKey);
+  }
+
+  public addEvents(events: MessageEventWithoutRoomId[]) {
+    if (events.length === 0) return;
+    const eventToRelations = new Map(this.eventToRelations.read);
+
+    const relationEvents: MessageEventWithoutRoomId<Relation>[] = [];
+
+    events.forEach((event) => {
+      if (
+        rRelatesTo.relType(rContent.relatesTo(event.content)) === this.relType &&
+        rRelatesTo.eventId(rContent.relatesTo(event.content))
+      ) {
+        relationEvents.push(event as MessageEventWithoutRoomId<Relation>);
+      }
+    });
+
+    if (relationEvents.length === 0) return;
+
+    relationEvents.forEach((event) => {
+      const eventId = event.content['m.relates_to'].event_id;
+      const relations = eventToRelations.get(eventId) ?? [];
+      const newRelations = relations.filter((r) => r.event_id !== event.event_id);
+      newRelations.push(event as MessageEventWithoutRoomId<Content>);
+      eventToRelations.set(eventId, newRelations);
+    });
+
+    this.eventToRelations.publish(this.publishKey, eventToRelations);
+  }
+
+  dispose(): void {
+    this.disposer.run();
+  }
+}
diff --git a/src/client/room/relations/RelationsProcessor.ts b/src/client/room/relations/RelationsProcessor.ts
new file mode 100644
index 00000000..49925762
--- /dev/null
+++ b/src/client/room/relations/RelationsProcessor.ts
@@ -0,0 +1,98 @@
+import { ClientEventWithoutRoomId, MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { MessageEvent } from '../../../types/matrix/room';
+import { Relations } from './Relations';
+import { RelationType, ReactionContent } from '../../../types/matrix/common';
+import { getRedactedEventId, redacted, reference, relation, replacement } from './utils';
+
+export class RelationsProcessor implements Disposable {
+  private readonly publishKey = crypto.randomUUID();
+
+  public readonly reactions: Relations<RelationType.Annotation, ReactionContent>;
+
+  public readonly edits: Relations<RelationType.Replace>;
+
+  public readonly refs: Relations<RelationType.Reference>;
+
+  public readonly redacted: ObservableValue<Set<string>>;
+
+  private readonly disposer = new Disposer();
+
+  constructor() {
+    this.reactions = new Relations(RelationType.Annotation);
+    this.edits = new Relations(RelationType.Replace);
+    this.refs = new Relations(RelationType.Reference);
+    this.redacted = new ObservableValue(new Set(), this.publishKey);
+
+    this.disposer.collect(this.reactions, this.edits, this.refs, this.redacted);
+  }
+
+  private addRedacted(events: string[]): void {
+    if (events.length === 0) return;
+    this.redacted.publish(this.publishKey, new Set([...events, ...this.redacted.read]));
+  }
+
+  /**
+   * Processes a list of events and extracts:
+   * - Message events (returned)
+   * - Redaction events (added to redacted set)
+   * - Reaction events (added to reactions)
+   * - Edit events (added to edits)
+   * - Reference events (added to refs)
+   */
+  public pickAndFilter(events: ClientEventWithoutRoomId[]): MessageEventWithoutRoomId[] {
+    const messageEvents: MessageEventWithoutRoomId[] = [];
+    const redactedEvents: string[] = [];
+    const reactionEvents: MessageEventWithoutRoomId[] = [];
+    const editEvents: MessageEventWithoutRoomId[] = [];
+    const referenceEvents: MessageEventWithoutRoomId[] = [];
+
+    events?.forEach((event) => {
+      // Skip state events
+      if ('state_key' in event) return;
+
+      // Handle redaction events
+      if (event.type === MessageEvent.RoomRedaction) {
+        const redactedEvtId = getRedactedEventId(event);
+        if (redactedEvtId) redactedEvents.push(redactedEvtId);
+        return;
+      }
+
+      // Check if event itself is redacted
+      if (redacted(event)) {
+        redactedEvents.push(event.event_id);
+      }
+
+      // Handle relation events
+      if (relation(event)) {
+        if (event.type === MessageEvent.Reaction) {
+          reactionEvents.push(event);
+          return;
+        }
+        if (replacement(event)) {
+          editEvents.push(event);
+          return;
+        }
+        if (reference(event)) {
+          referenceEvents.push(event);
+          return;
+        }
+      }
+
+      messageEvents.push(event);
+    });
+
+    // Add all extracted relations
+    this.addRedacted(redactedEvents);
+    this.reactions.addEvents(reactionEvents);
+    this.edits.addEvents(editEvents);
+    this.refs.addEvents(referenceEvents);
+
+    return messageEvents;
+  }
+
+  public dispose(): void {
+    this.disposer.run();
+  }
+}
diff --git a/src/client/room/relations/index.ts b/src/client/room/relations/index.ts
new file mode 100644
index 00000000..4c4a49f5
--- /dev/null
+++ b/src/client/room/relations/index.ts
@@ -0,0 +1,3 @@
+export * from './Relations';
+export * from './RelationsProcessor';
+export * from './utils';
diff --git a/src/client/room/relations/utils.ts b/src/client/room/relations/utils.ts
new file mode 100644
index 00000000..cf3e6801
--- /dev/null
+++ b/src/client/room/relations/utils.ts
@@ -0,0 +1,36 @@
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { rContent, rUnsigned, rEvent, rRelatesTo } from '../../reader';
+import { RelationType } from '../../../types/matrix/common';
+
+export const getRedactedEventId = (event: MessageEventWithoutRoomId): string | undefined => {
+  const { content } = event;
+
+  return rEvent.redacts(event) ?? rContent.redacts(content);
+};
+
+export const redacted = (event: MessageEventWithoutRoomId): boolean => {
+  const { unsigned } = event;
+
+  return rUnsigned.redactedBecause(unsigned) !== undefined;
+};
+
+export const relation = (event: MessageEventWithoutRoomId): boolean =>
+  rRelatesTo.relType(rContent.relatesTo(event.content)) !== undefined;
+
+export const replacement = (event: MessageEventWithoutRoomId): boolean => {
+  const { content } = event;
+
+  return (
+    rRelatesTo.relType(rContent.relatesTo(content)) === RelationType.Replace &&
+    rRelatesTo.eventId(rContent.relatesTo(content)) !== undefined
+  );
+};
+
+export const reference = (event: MessageEventWithoutRoomId): boolean => {
+  const { content } = event;
+
+  return (
+    rRelatesTo.relType(rContent.relatesTo(content)) === RelationType.Reference &&
+    rRelatesTo.eventId(rContent.relatesTo(content)) !== undefined
+  );
+};
diff --git a/src/client/storage/collections/AccountData.ts b/src/client/storage/collections/AccountData.ts
new file mode 100644
index 00000000..e4636ade
--- /dev/null
+++ b/src/client/storage/collections/AccountData.ts
@@ -0,0 +1,28 @@
+import { StorageDriver } from 'neurone/lib/storage';
+import { Collection, Entry } from 'neurone/lib/storage/collection';
+import { AccountDataEvent } from 'neurone/lib/api/types';
+import { IDBPDatabase } from 'idb';
+
+const ACCOUNT_DATA_STORE_NAME = 'AccountData';
+
+export const prepareAccountDataStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    idb.createObjectStore(ACCOUNT_DATA_STORE_NAME, {
+      keyPath: 'id',
+    });
+  }
+};
+
+export type AccountDataObject = Entry<
+  'id',
+  never,
+  {
+    id: string;
+    event: AccountDataEvent;
+  }
+>;
+
+export type AccountDataCollection = Collection<'id', never, AccountDataObject>;
+
+export const createAccountDataCollection = (driver: StorageDriver): AccountDataCollection =>
+  new Collection(ACCOUNT_DATA_STORE_NAME, 'id', driver);
diff --git a/src/client/storage/collections/InviteRoom.ts b/src/client/storage/collections/InviteRoom.ts
new file mode 100644
index 00000000..c703cfc8
--- /dev/null
+++ b/src/client/storage/collections/InviteRoom.ts
@@ -0,0 +1,37 @@
+import { IDBPDatabase } from 'idb';
+import { Collection, Entry } from 'neurone/lib/storage/collection';
+import { StrippedStateEvent } from 'neurone/lib/api/types';
+import { StorageDriver } from 'neurone/lib/storage';
+import { encodeKey } from '../utils';
+
+const ROOM_STATE_STORE_NAME = 'InviteRoomState';
+
+export const getInviteRoomStateId = (roomId: string, type: string, stateKey: string): string =>
+  encodeKey(roomId, type, stateKey);
+
+export const prepareInviteRoomStateStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    const store = idb.createObjectStore(ROOM_STATE_STORE_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('roomId', 'roomId', { unique: false });
+    store.createIndex('type', 'type', { unique: false });
+  }
+};
+
+export type InviteRoomStateObject = Entry<
+  'id',
+  'roomId' | 'type',
+  {
+    id: string;
+    roomId: string;
+    type: string;
+    event: StrippedStateEvent;
+  }
+>;
+
+export type InviteRoomStateCollection = Collection<'id', 'roomId' | 'type', InviteRoomStateObject>;
+
+export const createInviteRoomStateCollection = (driver: StorageDriver): InviteRoomStateCollection =>
+  new Collection(ROOM_STATE_STORE_NAME, 'id', driver);
diff --git a/src/client/storage/collections/JoinRoom.ts b/src/client/storage/collections/JoinRoom.ts
new file mode 100644
index 00000000..325e0a45
--- /dev/null
+++ b/src/client/storage/collections/JoinRoom.ts
@@ -0,0 +1,176 @@
+import { IDBPDatabase } from 'idb';
+import {
+  AccountDataEvent,
+  MessageEventWithoutRoomId,
+  RoomSummary,
+  StateEventWithoutRoomId,
+} from 'neurone/lib/api/types';
+import { StorageDriver } from 'neurone/lib/storage';
+import { Collection, Entry } from 'neurone/lib/storage/collection';
+import { encodeKey } from '../utils';
+
+/**
+ * JoinAccountData Store
+ */
+const ACCOUNT_DATA_STORE_NAME = 'JoinAccountData';
+
+export const getJoinAccountDataId = (roomId: string, type: string): string =>
+  encodeKey(roomId, type);
+
+export const prepareJoinAccountDataStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    const store = idb.createObjectStore(ACCOUNT_DATA_STORE_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('roomId', 'roomId', { unique: false });
+    store.createIndex('type', 'type', { unique: false });
+  }
+};
+
+export type JoinAccountDataObject = Entry<
+  'id',
+  'roomId' | 'type',
+  {
+    id: string;
+    roomId: string;
+    type: string;
+    event: AccountDataEvent;
+  }
+>;
+
+export type JoinAccountDataCollection = Collection<'id', 'roomId' | 'type', JoinAccountDataObject>;
+
+export const createJoinAccountDataCollection = (driver: StorageDriver): JoinAccountDataCollection =>
+  new Collection(ACCOUNT_DATA_STORE_NAME, 'id', driver);
+
+/**
+ * JoinRoomSummary Store
+ */
+const ROOM_SUMMARY_STORE_NAME = 'JoinRoomSummary';
+
+export const equalRoomSummary = (s1: RoomSummary, s2: RoomSummary): boolean =>
+  s1['m.invited_member_count'] === s2['m.invited_member_count'] &&
+  s1['m.joined_member_count'] === s2['m.joined_member_count'] &&
+  s1['m.heroes']?.length === s2['m.heroes']?.length &&
+  (s1['m.heroes']?.every((userId, index) => userId === s2['m.heroes']?.[index]) ?? true);
+
+export const prepareJoinRoomSummaryStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    idb.createObjectStore(ROOM_SUMMARY_STORE_NAME, {
+      keyPath: 'id',
+    });
+  }
+};
+
+export type JoinRoomSummaryObject = Entry<
+  'id',
+  never,
+  {
+    id: string;
+    summary: RoomSummary;
+  }
+>;
+export type JoinRoomSummaryCollection = Collection<'id', never, JoinRoomSummaryObject>;
+
+export const createJoinRoomSummaryCollection = (driver: StorageDriver): JoinRoomSummaryCollection =>
+  new Collection(ROOM_SUMMARY_STORE_NAME, 'id', driver);
+
+/**
+ * JoinRoomState Store
+ */
+const ROOM_STATE_STORE_NAME = 'JoinRoomState';
+
+export const getJoinRoomStateId = (roomId: string, type: string, stateKey: string): string =>
+  encodeKey(roomId, type, stateKey);
+
+export const prepareJoinRoomStateStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    const store = idb.createObjectStore(ROOM_STATE_STORE_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('roomId', 'roomId', { unique: false });
+    store.createIndex('type', 'type', { unique: false });
+  }
+};
+
+export type JoinRoomStateObject = Entry<
+  'id',
+  'roomId' | 'type',
+  {
+    id: string;
+    roomId: string;
+    type: string;
+    event: StateEventWithoutRoomId;
+  }
+>;
+
+export type JoinRoomStateCollection = Collection<'id', 'roomId' | 'type', JoinRoomStateObject>;
+
+export const createJoinRoomStateCollection = (driver: StorageDriver): JoinRoomStateCollection =>
+  new Collection(ROOM_STATE_STORE_NAME, 'id', driver);
+
+/**
+ * JoinRoomMember Store
+ */
+const ROOM_MEMBER_STORE_NAME = 'JoinRoomMember';
+
+export const getJoinRoomMemberId = (roomId: string, userId: string): string =>
+  encodeKey(roomId, userId);
+
+export const prepareJoinRoomMemberStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    const store = idb.createObjectStore(ROOM_MEMBER_STORE_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('roomId', 'roomId', { unique: false });
+    store.createIndex('userId', 'userId', { unique: false });
+  }
+};
+
+export type JoinRoomMemberObject = Entry<
+  'id',
+  'roomId' | 'userId',
+  {
+    id: string;
+    roomId: string;
+    userId: string;
+    event: StateEventWithoutRoomId;
+  }
+>;
+
+export type JoinRoomMemberCollection = Collection<'id', 'roomId' | 'userId', JoinRoomMemberObject>;
+
+export const createJoinRoomMemberCollection = (driver: StorageDriver): JoinRoomMemberCollection =>
+  new Collection(ROOM_MEMBER_STORE_NAME, 'id', driver);
+
+/**
+ * JoinRoomLatestEvent Store
+ */
+
+const ROOM_LATEST_EVENT_STORE_NAME = 'JoinRoomLatestEvent';
+
+export const prepareJoinRoomLatestEventStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    idb.createObjectStore(ROOM_LATEST_EVENT_STORE_NAME, {
+      keyPath: 'id',
+    });
+  }
+};
+
+export type JoinRoomLatestEventObject = Entry<
+  'id',
+  never,
+  {
+    id: string;
+    event: MessageEventWithoutRoomId;
+  }
+>;
+
+export type JoinRoomLatestCollection = Collection<'id', never, JoinRoomLatestEventObject>;
+
+export const createJoinRoomLatestEventCollection = (
+  driver: StorageDriver
+): JoinRoomLatestCollection => new Collection(ROOM_LATEST_EVENT_STORE_NAME, 'id', driver);
diff --git a/src/client/storage/collections/KnockRoom.ts b/src/client/storage/collections/KnockRoom.ts
new file mode 100644
index 00000000..4aa45479
--- /dev/null
+++ b/src/client/storage/collections/KnockRoom.ts
@@ -0,0 +1,37 @@
+import { IDBPDatabase } from 'idb';
+import { Collection, Entry } from 'neurone/lib/storage/collection';
+import { StrippedStateEvent } from 'neurone/lib/api/types';
+import { StorageDriver } from 'neurone/lib/storage';
+import { encodeKey } from '../utils';
+
+const ROOM_STATE_STORE_NAME = 'KnockRoomState';
+
+export const getKnockRoomStateId = (roomId: string, type: string, stateKey: string): string =>
+  encodeKey(roomId, type, stateKey);
+
+export const prepareKnockRoomStateStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    const store = idb.createObjectStore(ROOM_STATE_STORE_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('roomId', 'roomId', { unique: false });
+    store.createIndex('type', 'type', { unique: false });
+  }
+};
+
+export type KnockRoomStateObject = Entry<
+  'id',
+  'roomId' | 'type',
+  {
+    id: string;
+    roomId: string;
+    type: string;
+    event: StrippedStateEvent;
+  }
+>;
+
+export type KnockRoomStateCollection = Collection<'id', 'roomId' | 'type', KnockRoomStateObject>;
+
+export const createKnockRoomStateCollection = (driver: StorageDriver): KnockRoomStateCollection =>
+  new Collection(ROOM_STATE_STORE_NAME, 'id', driver);
diff --git a/src/client/storage/collections/LeaveRoom.ts b/src/client/storage/collections/LeaveRoom.ts
new file mode 100644
index 00000000..5e79fa19
--- /dev/null
+++ b/src/client/storage/collections/LeaveRoom.ts
@@ -0,0 +1,80 @@
+import { IDBPDatabase } from 'idb';
+import { Collection, Entry } from 'neurone/lib/storage/collection';
+import { AccountDataEvent, StateEventWithoutRoomId } from 'neurone/lib/api/types';
+import { StorageDriver } from 'neurone/lib/storage';
+import { encodeKey } from '../utils';
+
+/**
+ * LeaveAccountData Store
+ */
+const ACCOUNT_DATA_STORE_NAME = 'LeaveAccountData';
+
+export const getLeaveAccountDataId = (roomId: string, type: string): string =>
+  encodeKey(roomId, type);
+
+export const prepareLeaveAccountDataStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    const store = idb.createObjectStore(ACCOUNT_DATA_STORE_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('roomId', 'roomId', { unique: false });
+    store.createIndex('type', 'type', { unique: false });
+  }
+};
+
+export type LeaveAccountDataObject = Entry<
+  'id',
+  'roomId' | 'type',
+  {
+    id: string;
+    roomId: string;
+    type: string;
+    event: AccountDataEvent;
+  }
+>;
+
+export type LeaveAccountDataCollection = Collection<
+  'id',
+  'roomId' | 'type',
+  LeaveAccountDataObject
+>;
+
+export const createLeaveAccountDataCollection = (
+  driver: StorageDriver
+): LeaveAccountDataCollection => new Collection(ACCOUNT_DATA_STORE_NAME, 'id', driver);
+
+/**
+ * LeaveRoomState Store
+ */
+const ROOM_STATE_STORE_NAME = 'LeaveRoomState';
+
+export const getLeaveRoomStateId = (roomId: string, type: string, stateKey: string): string =>
+  encodeKey(roomId, type, stateKey);
+
+export const prepareLeaveRoomStateStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    const store = idb.createObjectStore(ROOM_STATE_STORE_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('roomId', 'roomId', { unique: false });
+    store.createIndex('type', 'type', { unique: false });
+  }
+};
+
+export type LeaveRoomStateObject = Entry<
+  'id',
+  'roomId' | 'type',
+  {
+    id: string;
+    roomId: string;
+    type: string;
+    event: StateEventWithoutRoomId;
+  }
+>;
+
+export type LeaveRoomStateCollection = Collection<'id', 'roomId' | 'type', LeaveRoomStateObject>;
+
+export const createLeaveRoomStateCollection = (driver: StorageDriver): LeaveRoomStateCollection =>
+  new Collection(ROOM_STATE_STORE_NAME, 'id', driver);
diff --git a/src/client/storage/collections/Presence.ts b/src/client/storage/collections/Presence.ts
new file mode 100644
index 00000000..1a67594c
--- /dev/null
+++ b/src/client/storage/collections/Presence.ts
@@ -0,0 +1,31 @@
+import { IDBPDatabase } from 'idb';
+import { Presence, StatusContent } from 'neurone/lib/api/types';
+import { StorageDriver } from 'neurone/lib/storage';
+import { Collection, Entry } from 'neurone/lib/storage/collection';
+
+const PRESENCE_STORE_NAME = 'Presence';
+
+export const preparePresenceStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    const store = idb.createObjectStore(PRESENCE_STORE_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('presence', 'presence', { unique: false });
+  }
+};
+
+export type PresenceObject = Entry<
+  'id',
+  'presence',
+  {
+    id: string;
+    presence: Presence;
+    content: StatusContent;
+  }
+>;
+
+export type PresenceCollection = Collection<'id', 'presence', PresenceObject>;
+
+export const createPresenceCollection = (driver: StorageDriver): PresenceCollection =>
+  new Collection(PRESENCE_STORE_NAME, 'id', driver);
diff --git a/src/client/storage/collections/ReadReceipt.ts b/src/client/storage/collections/ReadReceipt.ts
new file mode 100644
index 00000000..0ce4a87b
--- /dev/null
+++ b/src/client/storage/collections/ReadReceipt.ts
@@ -0,0 +1,44 @@
+import { IDBPDatabase } from 'idb';
+import { StorageDriver } from 'neurone/lib/storage';
+import { Collection, Entry } from 'neurone/lib/storage/collection';
+import { ReceiptType } from 'neurone/lib/api/types';
+import { encodeKey } from '../utils';
+import { ThreadId } from '../../../types/matrix/room';
+
+const READ_RECEIPT_STORE_NAME = 'ReadReceipt';
+
+export const getReadReceiptId = (
+  roomId: string,
+  userId: string,
+  threadId: string | ThreadId
+): string => encodeKey(roomId, userId, threadId);
+
+export const prepareReadReceiptStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    const store = idb.createObjectStore(READ_RECEIPT_STORE_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('roomId', 'roomId', { unique: false });
+    store.createIndex('eventId', 'eventId', { unique: false });
+  }
+};
+
+export type ReadReceiptObject = Entry<
+  'id',
+  'eventId' | 'roomId',
+  {
+    id: string;
+    roomId: string;
+    userId: string;
+    type: ReceiptType;
+    eventId: string;
+    ts: number;
+    threadId: string | ThreadId;
+  }
+>;
+
+export type ReadReceiptCollection = Collection<'id', 'eventId' | 'roomId', ReadReceiptObject>;
+
+export const createReadReceiptCollection = (driver: StorageDriver): ReadReceiptCollection =>
+  new Collection(READ_RECEIPT_STORE_NAME, 'id', driver);
diff --git a/src/client/storage/collections/SessionValue.ts b/src/client/storage/collections/SessionValue.ts
new file mode 100644
index 00000000..56b6a29b
--- /dev/null
+++ b/src/client/storage/collections/SessionValue.ts
@@ -0,0 +1,65 @@
+import { IDBPDatabase } from 'idb';
+import { StorageDriver } from 'neurone/lib/storage';
+import { Collection, Entry } from 'neurone/lib/storage/collection';
+
+const SESSION_VALUE_STORE_NAME = 'SessionValue';
+
+export const prepareSessionValueStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    idb.createObjectStore(SESSION_VALUE_STORE_NAME, {
+      keyPath: 'id',
+    });
+  }
+};
+
+export type SessionValueObject = Entry<
+  'id',
+  never,
+  {
+    id: string;
+    value: unknown;
+  }
+>;
+
+export type SessionValueCollection = Collection<'id', never, SessionValueObject>;
+
+export const createSessionValueCollection = (driver: StorageDriver): SessionValueCollection =>
+  new Collection(SESSION_VALUE_STORE_NAME, 'id', driver);
+
+/**
+ * utils for better read/write for unknown values
+ */
+
+export type ValueParser<T> = (obj?: SessionValueObject) => T | undefined;
+
+export type ValueUtil<T> = {
+  id: string;
+  parse: ValueParser<T>;
+};
+
+export type SessionValueUtils = {
+  syncToken: ValueUtil<string>;
+  pendingMemberRooms: ValueUtil<string[]>;
+};
+
+export const sessionValue: SessionValueUtils = {
+  syncToken: {
+    id: 'syncToken',
+    parse: (obj) => {
+      if (obj && typeof obj.value === 'string') {
+        return obj.value;
+      }
+
+      return undefined;
+    },
+  },
+  pendingMemberRooms: {
+    id: 'pendingMemberRooms',
+    parse: (obj?: SessionValueObject) => {
+      if (obj && Array.isArray(obj.value)) {
+        return obj.value.filter((i) => typeof i === 'string');
+      }
+      return undefined;
+    },
+  },
+} as const;
diff --git a/src/client/storage/collections/UnreadNotifications.ts b/src/client/storage/collections/UnreadNotifications.ts
new file mode 100644
index 00000000..fb92e5bf
--- /dev/null
+++ b/src/client/storage/collections/UnreadNotifications.ts
@@ -0,0 +1,71 @@
+import { IDBPDatabase } from 'idb';
+import { UnreadNotificationCounts } from 'neurone/lib/api/types';
+import { StorageDriver } from 'neurone/lib/storage';
+import { Collection, Entry } from 'neurone/lib/storage/collection';
+import { encodeKey } from '../utils';
+
+/**
+ * UnreadNotifications
+ */
+const UNREAD_NOTIFICATIONS_STORE_NAME = 'UnreadNotifications';
+
+export const prepareUnreadNotificationsStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    idb.createObjectStore(UNREAD_NOTIFICATIONS_STORE_NAME, {
+      keyPath: 'id',
+    });
+  }
+};
+
+export type UnreadNotificationsObject = Entry<
+  'id',
+  never,
+  {
+    id: string;
+    unread: UnreadNotificationCounts;
+  }
+>;
+export type UnreadNotificationsCollection = Collection<'id', never, UnreadNotificationsObject>;
+
+export const createUnreadNotificationsCollection = (
+  driver: StorageDriver
+): UnreadNotificationsCollection => new Collection(UNREAD_NOTIFICATIONS_STORE_NAME, 'id', driver);
+
+/**
+ * UnreadThreadNotifications
+ */
+const UNREAD_THREAD_NOTIFICATIONS_STORE_NAME = 'UnreadThreadNotifications';
+
+export const getUnreadThreadNotificationId = (roomId: string, threadId: string): string =>
+  encodeKey(roomId, threadId);
+
+export const prepareUnreadThreadNotificationsStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 1) {
+    const store = idb.createObjectStore(UNREAD_THREAD_NOTIFICATIONS_STORE_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('roomId', 'roomId', { unique: false });
+  }
+};
+
+export type UnreadThreadNotificationsObject = Entry<
+  'id',
+  'roomId',
+  {
+    id: string;
+    roomId: string;
+    threadId: string;
+    unread: UnreadNotificationCounts;
+  }
+>;
+export type UnreadThreadNotificationsCollection = Collection<
+  'id',
+  'roomId',
+  UnreadThreadNotificationsObject
+>;
+
+export const createUnreadThreadNotificationsCollection = (
+  driver: StorageDriver
+): UnreadThreadNotificationsCollection =>
+  new Collection(UNREAD_THREAD_NOTIFICATIONS_STORE_NAME, 'id', driver);
diff --git a/src/client/storage/collections/index.ts b/src/client/storage/collections/index.ts
new file mode 100644
index 00000000..a3451be5
--- /dev/null
+++ b/src/client/storage/collections/index.ts
@@ -0,0 +1,9 @@
+export * from './AccountData';
+export * from './JoinRoom';
+export * from './ReadReceipt';
+export * from './UnreadNotifications';
+export * from './InviteRoom';
+export * from './KnockRoom';
+export * from './LeaveRoom';
+export * from './Presence';
+export * from './SessionValue';
diff --git a/src/client/storage/index.ts b/src/client/storage/index.ts
new file mode 100644
index 00000000..46653c5a
--- /dev/null
+++ b/src/client/storage/index.ts
@@ -0,0 +1,153 @@
+import { deleteDB, openDB, unwrap } from 'idb';
+import { IndexedDBStorageDriver } from 'neurone/lib/storage/driver';
+import {
+  AccountDataCollection,
+  createAccountDataCollection,
+  prepareAccountDataStore,
+  createJoinAccountDataCollection,
+  createJoinRoomMemberCollection,
+  createJoinRoomStateCollection,
+  createJoinRoomSummaryCollection,
+  createUnreadNotificationsCollection,
+  createUnreadThreadNotificationsCollection,
+  JoinAccountDataCollection,
+  JoinRoomMemberCollection,
+  JoinRoomStateCollection,
+  JoinRoomSummaryCollection,
+  UnreadNotificationsCollection,
+  UnreadThreadNotificationsCollection,
+  prepareJoinAccountDataStore,
+  prepareJoinRoomMemberStore,
+  prepareJoinRoomStateStore,
+  prepareJoinRoomSummaryStore,
+  prepareUnreadNotificationsStore,
+  prepareUnreadThreadNotificationsStore,
+  ReadReceiptCollection,
+  prepareReadReceiptStore,
+  createReadReceiptCollection,
+  InviteRoomStateCollection,
+  prepareInviteRoomStateStore,
+  createInviteRoomStateCollection,
+  KnockRoomStateCollection,
+  prepareKnockRoomStateStore,
+  createKnockRoomStateCollection,
+  LeaveAccountDataCollection,
+  LeaveRoomStateCollection,
+  prepareLeaveAccountDataStore,
+  prepareLeaveRoomStateStore,
+  createLeaveAccountDataCollection,
+  createLeaveRoomStateCollection,
+  PresenceCollection,
+  preparePresenceStore,
+  createPresenceCollection,
+  SessionValueCollection,
+  prepareSessionValueStore,
+  createSessionValueCollection,
+  JoinRoomLatestCollection,
+  createJoinRoomLatestEventCollection,
+  prepareJoinRoomLatestEventStore,
+} from './collections';
+
+export * from './utils';
+
+const DATABASE_VERSION = 1;
+
+export interface Storage {
+  sessionValue: SessionValueCollection;
+
+  accountData: AccountDataCollection;
+
+  joinAccountData: JoinAccountDataCollection;
+  joinRoomSummary: JoinRoomSummaryCollection;
+  joinRoomState: JoinRoomStateCollection;
+  joinRoomMember: JoinRoomMemberCollection;
+  joinRoomLatestEvent: JoinRoomLatestCollection;
+
+  unreadNotifications: UnreadNotificationsCollection;
+  unreadThreadNotifications: UnreadThreadNotificationsCollection;
+
+  readReceipt: ReadReceiptCollection;
+
+  inviteRoomState: InviteRoomStateCollection;
+
+  knockRoomState: KnockRoomStateCollection;
+
+  leaveAccountData: LeaveAccountDataCollection;
+  leaveRoomState: LeaveRoomStateCollection;
+
+  presence: PresenceCollection;
+}
+
+export const createStorage = async (
+  storageName: string,
+  userId: string
+): Promise<{
+  storage: Storage;
+  deleteStorage: () => Promise<void>;
+}> => {
+  const dbName = `${storageName}${userId}`;
+
+  // TODO: handle all openDB callbacks.
+  const idb = await openDB(dbName, DATABASE_VERSION, {
+    upgrade(db, oldVersion) {
+      prepareSessionValueStore(db, oldVersion);
+
+      prepareAccountDataStore(db, oldVersion);
+
+      prepareJoinAccountDataStore(db, oldVersion);
+      prepareJoinRoomSummaryStore(db, oldVersion);
+      prepareJoinRoomStateStore(db, oldVersion);
+      prepareJoinRoomMemberStore(db, oldVersion);
+      prepareJoinRoomLatestEventStore(db, oldVersion);
+
+      prepareUnreadNotificationsStore(db, oldVersion);
+      prepareUnreadThreadNotificationsStore(db, oldVersion);
+
+      prepareReadReceiptStore(db, oldVersion);
+
+      prepareInviteRoomStateStore(db, oldVersion);
+
+      prepareKnockRoomStateStore(db, oldVersion);
+
+      prepareLeaveAccountDataStore(db, oldVersion);
+      prepareLeaveRoomStateStore(db, oldVersion);
+
+      preparePresenceStore(db, oldVersion);
+    },
+  });
+
+  const driver = new IndexedDBStorageDriver(unwrap(idb));
+
+  const storage: Storage = {
+    sessionValue: createSessionValueCollection(driver),
+
+    accountData: createAccountDataCollection(driver),
+
+    joinAccountData: createJoinAccountDataCollection(driver),
+    joinRoomSummary: createJoinRoomSummaryCollection(driver),
+    joinRoomState: createJoinRoomStateCollection(driver),
+    joinRoomMember: createJoinRoomMemberCollection(driver),
+    joinRoomLatestEvent: createJoinRoomLatestEventCollection(driver),
+
+    unreadNotifications: createUnreadNotificationsCollection(driver),
+    unreadThreadNotifications: createUnreadThreadNotificationsCollection(driver),
+
+    readReceipt: createReadReceiptCollection(driver),
+
+    inviteRoomState: createInviteRoomStateCollection(driver),
+
+    knockRoomState: createKnockRoomStateCollection(driver),
+
+    leaveAccountData: createLeaveAccountDataCollection(driver),
+    leaveRoomState: createLeaveRoomStateCollection(driver),
+
+    presence: createPresenceCollection(driver),
+  };
+
+  const deleteStorage = async () => {
+    idb.close();
+    await deleteDB(dbName);
+  };
+
+  return { storage, deleteStorage };
+};
diff --git a/src/client/storage/utils.ts b/src/client/storage/utils.ts
new file mode 100644
index 00000000..77a96abe
--- /dev/null
+++ b/src/client/storage/utils.ts
@@ -0,0 +1,2 @@
+export const encodeKey = (...args: string[]): string => args.join('');
+export const MAX_UNICODE = '\u{10FFFF}';
diff --git a/src/client/sync.ts b/src/client/sync.ts
new file mode 100644
index 00000000..5099b386
--- /dev/null
+++ b/src/client/sync.ts
@@ -0,0 +1,177 @@
+import {
+  MatrixError,
+  MatrixRequest,
+  MatrixResponseResult,
+  parseMatrixResp,
+} from 'neurone/lib/matrix-request';
+import { getSync, GetSyncOK } from 'neurone/lib/api/matrix/client/v3/sync';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { ProgressCallback, responseProgress } from './responseProgress';
+import { getInitialSyncFilter, getSyncFilter } from './filter';
+
+type SyncError = Error | MatrixError;
+
+export type SyncValue = [SyncError, undefined] | [undefined, GetSyncOK] | undefined;
+
+export type SyncCallback = (
+  since: string | undefined,
+  progressCallback?: ProgressCallback
+) => Promise<void>;
+
+export const createSync = (request: MatrixRequest): [ObservableValue<SyncValue>, SyncCallback] => {
+  const abortController = new AbortController();
+  const abortSignal = abortController.signal;
+
+  const initialSyncFilter = JSON.stringify(getInitialSyncFilter());
+  const syncFilter = JSON.stringify(getSyncFilter());
+
+  const publisherKey = Math.random().toString();
+  const syncObservable = new ObservableValue<SyncValue>(undefined, publisherKey);
+
+  const sync: SyncCallback = async (since, progressCallback) => {
+    if (syncObservable.read !== undefined) {
+      syncObservable.publish(publisherKey, undefined);
+    }
+
+    const responsePromise = request(
+      getSync({
+        searchParams: {
+          filter: since ? syncFilter : initialSyncFilter,
+          full_state: false,
+          timeout: 30000,
+          since,
+        },
+      }),
+      abortSignal
+    );
+
+    let response: Response;
+    try {
+      response = await responsePromise;
+    } catch (err: any) {
+      if (!abortSignal.aborted) {
+        syncObservable.publish(publisherKey, [err, undefined]);
+      }
+      return;
+    }
+
+    if (progressCallback) {
+      responseProgress(response.clone(), progressCallback);
+    }
+
+    let result: MatrixResponseResult<GetSyncOK>;
+    try {
+      result = await parseMatrixResp<GetSyncOK>(response);
+    } catch (err: any) {
+      syncObservable.publish(publisherKey, [err, undefined]);
+      return;
+    }
+
+    const [matrixError, data] = result;
+
+    if (matrixError) {
+      syncObservable.publish(publisherKey, [matrixError, undefined]);
+      return;
+    }
+
+    syncObservable.publish(publisherKey, [undefined, data]);
+  };
+
+  syncObservable.onDispose(publisherKey, () => {
+    abortController.abort();
+  });
+
+  return [syncObservable, sync];
+};
+
+export type SyncProgress = {
+  received: number;
+  total?: number;
+};
+
+type InitialSyncObservable = ObservableValue<
+  | {
+      progress: ObservableValue<SyncProgress | undefined>;
+    }
+  | undefined
+>;
+
+export type SyncController = {
+  initialSync: InitialSyncObservable;
+  start: () => void;
+  recover: (afterMs?: number) => void;
+  dispose: () => void;
+};
+
+export const createSyncController = (
+  syncObservable: ObservableValue<SyncValue>,
+  sync: SyncCallback,
+  getSyncToken: () => string | undefined
+): [SyncController, () => void, (since: string) => void] => {
+  let started = false;
+
+  const progressPublisherKey = 'PROGRESS_KEY';
+  const progress: ObservableValue<SyncProgress | undefined> = new ObservableValue(
+    undefined,
+    progressPublisherKey
+  );
+
+  const initialSyncPublisherKey = 'SYNC_KEY';
+  const initialSync: InitialSyncObservable = new ObservableValue(
+    getSyncToken() ? undefined : { progress },
+    initialSyncPublisherKey
+  );
+
+  const handleInitialSyncProgress: ProgressCallback = (received, total) => {
+    if (progress.isDisposed) return;
+    progress.publish(progressPublisherKey, {
+      received,
+      total,
+    });
+  };
+
+  const doSync = async () => {
+    const token = getSyncToken();
+    await sync(token, token ? undefined : handleInitialSyncProgress);
+  };
+
+  const syncController: SyncController = {
+    initialSync,
+    start: () => {
+      if (started) {
+        console.warn('Can not start the sync controller twice. Use recover method for recovery.');
+        return;
+      }
+      started = true;
+      doSync();
+    },
+    recover: () => {
+      const [error] = syncObservable.read ?? [];
+      if (!error) {
+        console.warn('Failed to recover. Sync does not have any error.');
+        return;
+      }
+      doSync();
+    },
+    dispose: () => {
+      initialSync.dispose();
+    },
+  };
+
+  const onWriteComplete = () => {
+    if (initialSync.read) {
+      initialSync.publish(initialSyncPublisherKey, undefined);
+    }
+  };
+
+  const onSyncToken = (token: string) => {
+    sync(token);
+  };
+
+  return [syncController, onWriteComplete, onSyncToken];
+};
+
+export type SyncContext = {
+  observable: ObservableValue<SyncValue>;
+  controller: SyncController;
+};
diff --git a/src/client/syncLatestEvent.ts b/src/client/syncLatestEvent.ts
new file mode 100644
index 00000000..33bbe712
--- /dev/null
+++ b/src/client/syncLatestEvent.ts
@@ -0,0 +1,27 @@
+import { getSync, GetSyncOK } from 'neurone/lib/api/matrix/client/v3/sync';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { getLatestEventSyncFilter } from './filter';
+import { writeJoinRoomLatestEvent } from './syncWriter/utils';
+import { ClientContext } from './context';
+
+export const syncLatestEvent = async (ct: ClientContext, since?: string) => {
+  const resp = await ct.requestAuthJSON(
+    getSync({
+      searchParams: {
+        filter: JSON.stringify(getLatestEventSyncFilter()),
+        since,
+      },
+    })
+  );
+  const [error, syncData] = await parseMatrixResp<GetSyncOK>(resp);
+  if (error) {
+    console.error(printMatrixError(error));
+    return;
+  }
+  const { join } = syncData.rooms ?? {};
+  if (join) {
+    const joinRooms = Object.keys(join);
+
+    await writeJoinRoomLatestEvent(ct, joinRooms, join);
+  }
+};
diff --git a/src/client/syncWriter/index.ts b/src/client/syncWriter/index.ts
new file mode 100644
index 00000000..fab0462c
--- /dev/null
+++ b/src/client/syncWriter/index.ts
@@ -0,0 +1,113 @@
+import { GetSyncOK } from 'neurone/lib/api/matrix/client/v3/sync';
+import { PresenceEvent, StatusContent } from 'neurone/lib/api/types';
+import { ClientContext } from '../context';
+import {
+  deleteInviteRooms,
+  deleteJoinRooms,
+  deleteKnockRooms,
+  deleteLeaveRooms,
+  getStaleJoinRooms,
+  getStaleInviteRooms,
+  getStaleKnockRooms,
+  getStaleLeaveRooms,
+  writeAccountData,
+  writeInviteRoomState,
+  writeJoinAccountData,
+  writeJoinRoomLatestEvent,
+  writeJoinRoomMember,
+  writeJoinRoomState,
+  writeJoinRoomSummary,
+  writeKnockRoomState,
+  writeLeaveAccountData,
+  writeLeaveRoomState,
+  writePresence,
+  writeReadReceipt,
+  writeUnreadNotifications,
+  writeUnreadThreadNotifications,
+} from './utils';
+import { sessionValue } from '../storage/collections';
+
+/**
+ * Utility function to find common element between two arrays
+ */
+const common = <T>(arr1: T[], arr2: T[]): T[] => arr1.filter((item) => arr2.includes(item));
+
+export const writeSync = async (ct: ClientContext, data: GetSyncOK): Promise<void> => {
+  const { account_data: accountData, rooms, presence } = data;
+
+  if (accountData?.events && accountData.events.length > 0) {
+    await writeAccountData(ct, accountData.events);
+  }
+
+  const { join, invite, knock, leave } = rooms ?? {};
+
+  if (join) {
+    const joinRooms = Object.keys(join);
+    const newRooms = joinRooms.filter((r) => !ct.rooms.join.read.includes(r));
+
+    if (newRooms.length > 0) {
+      ct.storage.sessionValue.write.put({
+        id: sessionValue.pendingMemberRooms.id,
+        value: ct.pendingMemberRooms.read.concat(newRooms),
+      });
+    }
+
+    await deleteJoinRooms(ct, getStaleJoinRooms(ct, joinRooms, join));
+    await deleteInviteRooms(ct, common(joinRooms, ct.rooms.invite.read));
+    await deleteKnockRooms(ct, common(joinRooms, ct.rooms.knock.read));
+    await deleteLeaveRooms(ct, common(joinRooms, ct.rooms.leave.read));
+
+    await writeJoinAccountData(ct, joinRooms, join);
+    await writeJoinRoomSummary(ct, joinRooms, join);
+    await writeJoinRoomState(ct, joinRooms, join);
+    await writeJoinRoomMember(ct, joinRooms, join);
+    await writeJoinRoomLatestEvent(ct, joinRooms, join);
+
+    await writeReadReceipt(ct, joinRooms, join);
+
+    await writeUnreadNotifications(ct, joinRooms, join);
+    await writeUnreadThreadNotifications(ct, joinRooms, join);
+  }
+
+  if (invite) {
+    const inviteRooms = Object.keys(invite);
+
+    await deleteInviteRooms(ct, getStaleInviteRooms(ct, inviteRooms, invite));
+    await deleteJoinRooms(ct, common(inviteRooms, ct.rooms.join.read));
+    await deleteKnockRooms(ct, common(inviteRooms, ct.rooms.knock.read));
+    await deleteLeaveRooms(ct, common(inviteRooms, ct.rooms.leave.read));
+
+    await writeInviteRoomState(ct, inviteRooms, invite);
+  }
+
+  if (knock) {
+    const knockRooms = Object.keys(knock);
+
+    await deleteKnockRooms(ct, getStaleKnockRooms(ct, knockRooms, knock));
+    await deleteJoinRooms(ct, common(knockRooms, ct.rooms.join.read));
+    await deleteInviteRooms(ct, common(knockRooms, ct.rooms.invite.read));
+    await deleteLeaveRooms(ct, common(knockRooms, ct.rooms.leave.read));
+
+    await writeKnockRoomState(ct, knockRooms, knock);
+  }
+
+  if (leave) {
+    const leaveRooms = Object.keys(leave);
+
+    await deleteLeaveRooms(ct, getStaleLeaveRooms(ct, leaveRooms, leave));
+    await deleteJoinRooms(ct, common(leaveRooms, ct.rooms.join.read));
+    await deleteInviteRooms(ct, common(leaveRooms, ct.rooms.invite.read));
+    await deleteKnockRooms(ct, common(leaveRooms, ct.rooms.knock.read));
+
+    await writeLeaveAccountData(ct, leaveRooms, leave);
+    await writeLeaveRoomState(ct, leaveRooms, leave);
+  }
+
+  if (presence?.events) {
+    const presenceEvents = presence.events.filter(
+      (event) => event.type === 'm.presence'
+    ) as PresenceEvent<StatusContent>[];
+
+    await writePresence(ct, presenceEvents);
+  }
+};
diff --git a/src/client/syncWriter/utils.ts b/src/client/syncWriter/utils.ts
new file mode 100644
index 00000000..ee0b0102
--- /dev/null
+++ b/src/client/syncWriter/utils.ts
@@ -0,0 +1,660 @@
+import { InviteRoom, JoinRoom, KnockRoom, LeaveRoom } from 'neurone/lib/api/matrix/client/v3/sync';
+import {
+  AccountDataEvent,
+  PresenceEvent,
+  Receipt,
+  ReceiptType,
+  StatusContent,
+} from 'neurone/lib/api/types';
+import * as joinRoomUtil from 'neurone/lib/utils/sync/v3/join';
+import * as inviteRoomUtil from 'neurone/lib/utils/sync/v3/invite';
+import * as knockRoomUtil from 'neurone/lib/utils/sync/v3/knock';
+import * as leaveRoomUtil from 'neurone/lib/utils/sync/v3/leave';
+import { ObjectReader } from 'neurone/lib/utils';
+import { ClientContext } from '../context';
+import {
+  AccountDataObject,
+  equalRoomSummary,
+  getInviteRoomStateId,
+  getJoinAccountDataId,
+  getJoinRoomMemberId,
+  getJoinRoomStateId,
+  getKnockRoomStateId,
+  getLeaveAccountDataId,
+  getLeaveRoomStateId,
+  getReadReceiptId,
+  getUnreadThreadNotificationId,
+  InviteRoomStateObject,
+  JoinAccountDataObject,
+  JoinRoomLatestEventObject,
+  JoinRoomMemberObject,
+  JoinRoomStateObject,
+  JoinRoomSummaryObject,
+  KnockRoomStateObject,
+  LeaveAccountDataObject,
+  LeaveRoomStateObject,
+  PresenceObject,
+  ReadReceiptObject,
+  UnreadNotificationsObject,
+  UnreadThreadNotificationsObject,
+} from '../storage/collections';
+import { ThreadId } from '../../types/matrix/room';
+
+export const writeAccountData = async (
+  ct: ClientContext,
+  events: AccountDataEvent[]
+): Promise<void> => {
+  if (events.length > 0) {
+    const accountDataObjects: AccountDataObject[] = events.map((event) => {
+      const obj: AccountDataObject = {
+        id: event.type,
+        event,
+      };
+      return obj;
+    });
+    await ct.storage.accountData.write.putMultiple(accountDataObjects);
+  }
+};
+
+export const writeJoinAccountData = async (
+  ct: ClientContext,
+  joinRooms: string[],
+  join: Record<string, JoinRoom>
+): Promise<void> => {
+  const accountDataObjects: JoinAccountDataObject[] = joinRooms.flatMap((roomId) => {
+    const joinRoom = join[roomId];
+    const events = joinRoomUtil.roomAccountData(joinRoom);
+
+    return events.map((event) => {
+      const obj: JoinAccountDataObject = {
+        id: getJoinAccountDataId(roomId, event.type),
+        roomId,
+        type: event.type,
+        event,
+      };
+
+      return obj;
+    });
+  });
+
+  await ct.storage.joinAccountData.write.putMultiple(accountDataObjects);
+};
+
+export const writeJoinRoomSummary = async (
+  ct: ClientContext,
+  joinRooms: string[],
+  join: Record<string, JoinRoom>
+): Promise<void> => {
+  const roomSummaryObjects: JoinRoomSummaryObject[] = joinRooms.flatMap((roomId) => {
+    const room = join[roomId];
+    const summary = joinRoomUtil.roomSummary(room);
+    if (!summary) return [];
+
+    const existingSummary = ct.roomToSummary.read.get(roomId);
+    const summaryObj: JoinRoomSummaryObject = {
+      summary: {
+        ...existingSummary,
+        ...summary,
+      },
+      id: roomId,
+    };
+    if (existingSummary && equalRoomSummary(existingSummary, summaryObj.summary)) {
+      return [];
+    }
+
+    return [summaryObj];
+  });
+
+  await ct.storage.joinRoomSummary.write.putMultiple(roomSummaryObjects);
+};
+
+export const writeJoinRoomState = async (
+  ct: ClientContext,
+  joinRooms: string[],
+  join: Record<string, JoinRoom>
+): Promise<void> => {
+  const roomStateObjects: JoinRoomStateObject[] = joinRooms.flatMap((roomId) => {
+    const joinRoom = join[roomId];
+    const events = joinRoomUtil
+      .roomState(joinRoom)
+      .filter((event) => event.type !== 'm.room.member');
+
+    return events.map((event) => {
+      const obj: JoinRoomStateObject = {
+        id: getJoinRoomStateId(roomId, event.type, event.state_key),
+        roomId,
+        type: event.type,
+        event,
+      };
+
+      return obj;
+    });
+  });
+
+  await ct.storage.joinRoomState.write.putMultiple(roomStateObjects);
+};
+
+export const writeJoinRoomMember = async (
+  ct: ClientContext,
+  joinRooms: string[],
+  join: Record<string, JoinRoom>
+): Promise<void> => {
+  const roomMemberObjects: JoinRoomMemberObject[] = joinRooms.flatMap((roomId) => {
+    const joinRoom = join[roomId];
+    const events = joinRoomUtil
+      .roomState(joinRoom)
+      .filter((event) => event.type === 'm.room.member');
+
+    return events.map((event) => {
+      const obj: JoinRoomMemberObject = {
+        id: getJoinRoomMemberId(roomId, event.state_key),
+        roomId,
+        userId: event.state_key,
+        event,
+      };
+
+      return obj;
+    });
+  });
+
+  await ct.storage.joinRoomMember.write.putMultiple(roomMemberObjects);
+};
+
+export const writeJoinRoomLatestEvent = async (
+  ct: ClientContext,
+  joinRooms: string[],
+  join: Record<string, JoinRoom>
+): Promise<void> => {
+  const roomLatestEventObjects: JoinRoomLatestEventObject[] = [];
+
+  joinRooms.forEach((roomId) => {
+    const joinRoom = join[roomId];
+    const { events } = joinRoom.timeline ?? {};
+    if (!events) return;
+
+    for (let i = events.length - 1; i >= 0; i -= 1) {
+      const event = events[i];
+      if (!('state_key' in event)) {
+        roomLatestEventObjects.push({
+          id: roomId,
+          event,
+        });
+        break;
+      }
+    }
+  });
+
+  await ct.storage.joinRoomLatestEvent.write.putMultiple(roomLatestEventObjects);
+};
+
+export const writeReadReceipt = async (
+  ct: ClientContext,
+  joinRooms: string[],
+  join: Record<string, JoinRoom>
+): Promise<void> => {
+  const readReceiptObjects: ReadReceiptObject[] = joinRooms.flatMap((roomId) => {
+    const joinRoom = join[roomId];
+    const event = joinRoomUtil.roomReceiptEphemeral(joinRoomUtil.roomEphemeral(joinRoom));
+
+    if (!event) return [];
+
+    const objects: ReadReceiptObject[] = [];
+
+    const collectReceipt = (
+      eventId: string,
+      userId: string,
+      receiptType: ReceiptType,
+      receipt: Receipt
+    ) => {
+      const threadId = receipt.thread_id ?? ThreadId.Main;
+      const obj: ReadReceiptObject = {
+        id: getReadReceiptId(roomId, userId, threadId),
+        roomId,
+        userId,
+        type: receiptType,
+        eventId,
+        ts: receipt.ts ?? 0,
+        threadId,
+      };
+      objects.push(obj);
+    };
+
+    const threadIdToMyPrivateReceipt: Record<
+      string,
+      {
+        eventId: string;
+        receipt: Receipt;
+      }
+    > = {};
+
+    const eventIds = Object.keys(event.content);
+    eventIds.forEach((eventId) => {
+      const receiptContent = event.content[eventId];
+      const userToPrivate = receiptContent['m.read.private'];
+      const receipt = userToPrivate?.[ct.session.userId];
+      if (!receipt) return;
+      const threadId = receipt.thread_id ?? ThreadId.Main;
+      const existing = threadIdToMyPrivateReceipt[threadId];
+      if (!existing || (receipt.ts ?? 0) > (existing.receipt.ts ?? 0)) {
+        threadIdToMyPrivateReceipt[threadId] = { eventId, receipt };
+      }
+    });
+    eventIds.forEach((eventId) => {
+      const receiptContent = event.content[eventId];
+      const userToPublic = receiptContent['m.read'];
+
+      if (userToPublic) {
+        Object.keys(userToPublic).forEach((userId) => {
+          const receipt = userToPublic[userId];
+          if (userId === ct.session.userId) {
+            // use latest receipt between private/public
+            const threadId = receipt.thread_id ?? ThreadId.Main;
+            const privateReceipt =
+              threadId in threadIdToMyPrivateReceipt
+                ? threadIdToMyPrivateReceipt[threadId]
+                : undefined;
+            if (privateReceipt && (privateReceipt.receipt.ts ?? 0) >= (receipt.ts ?? 0)) {
+              collectReceipt(
+                privateReceipt.eventId,
+                userId,
+                'm.read.private',
+                privateReceipt.receipt
+              );
+              return;
+            }
+          }
+          collectReceipt(eventId, userId, 'm.read', receipt);
+        });
+      }
+    });
+
+    return objects;
+  });
+
+  await ct.storage.readReceipt.write.putMultiple(readReceiptObjects);
+};
+
+export const writeUnreadNotifications = async (
+  ct: ClientContext,
+  joinRooms: string[],
+  join: Record<string, JoinRoom>
+): Promise<void> => {
+  const existing = await ct.storage.unreadNotifications.read.getMultiple(joinRooms);
+
+  const unreadNotificationsObjects: UnreadNotificationsObject[] = joinRooms.flatMap(
+    (roomId, index) => {
+      const joinRoom = join[roomId];
+
+      const existingUnread = existing[index]?.unread;
+      const unread = joinRoomUtil.roomUnreadNotifications(joinRoom);
+
+      if (
+        !unread ||
+        (existingUnread?.highlight_count === unread.highlight_count &&
+          existingUnread?.notification_count === unread.notification_count)
+      ) {
+        return [];
+      }
+      const obj: UnreadNotificationsObject = {
+        id: roomId,
+        unread,
+      };
+      return obj;
+    }
+  );
+
+  await ct.storage.unreadNotifications.write.putMultiple(unreadNotificationsObjects);
+};
+
+export const writeUnreadThreadNotifications = async (
+  ct: ClientContext,
+  joinRooms: string[],
+  join: Record<string, JoinRoom>
+): Promise<void> => {
+  const unreadThreadNotificationsObjects: UnreadThreadNotificationsObject[] = joinRooms.flatMap(
+    (roomId) => {
+      const joinRoom = join[roomId];
+
+      const unreadThreadNotifications = joinRoomUtil.roomUnreadThreadNotifications(joinRoom);
+
+      if (!unreadThreadNotifications) {
+        return [];
+      }
+
+      return Object.keys(unreadThreadNotifications).map((threadId) => {
+        const unread = unreadThreadNotifications[threadId];
+
+        const obj: UnreadThreadNotificationsObject = {
+          id: getUnreadThreadNotificationId(roomId, threadId),
+          roomId,
+          threadId,
+          unread,
+        };
+
+        return obj;
+      });
+    }
+  );
+
+  await ct.storage.unreadThreadNotifications.write.putMultiple(unreadThreadNotificationsObjects);
+};
+
+export const writeInviteRoomState = async (
+  ct: ClientContext,
+  inviteRooms: string[],
+  invite: Record<string, InviteRoom>
+): Promise<void> => {
+  const inviteStateObjects: InviteRoomStateObject[] = inviteRooms.flatMap((roomId) => {
+    const inviteRoom = invite[roomId];
+
+    const events = inviteRoomUtil.roomInviteState(inviteRoom);
+
+    return events.map((event) => {
+      const obj: InviteRoomStateObject = {
+        id: getInviteRoomStateId(roomId, event.type, event.state_key),
+        roomId,
+        type: event.type,
+        event,
+      };
+      return obj;
+    });
+  });
+
+  await ct.storage.inviteRoomState.write.putMultiple(inviteStateObjects);
+};
+
+export const writeKnockRoomState = async (
+  ct: ClientContext,
+  knockRooms: string[],
+  knock: Record<string, KnockRoom>
+): Promise<void> => {
+  const knockStateObjects: KnockRoomStateObject[] = knockRooms.flatMap((roomId) => {
+    const knockRoom = knock[roomId];
+
+    const events = knockRoomUtil.roomKnockState(knockRoom);
+
+    return events.map((event) => {
+      const obj: KnockRoomStateObject = {
+        id: getKnockRoomStateId(roomId, event.type, event.state_key),
+        roomId,
+        type: event.type,
+        event,
+      };
+
+      return obj;
+    });
+  });
+
+  await ct.storage.knockRoomState.write.putMultiple(knockStateObjects);
+};
+
+export const writeLeaveAccountData = async (
+  ct: ClientContext,
+  leaveRooms: string[],
+  leave: Record<string, LeaveRoom>
+): Promise<void> => {
+  const leaveAccountDataObjects: LeaveAccountDataObject[] = leaveRooms.flatMap((roomId) => {
+    const leaveRoom = leave[roomId];
+
+    const events = leaveRoomUtil.roomAccountData(leaveRoom);
+
+    return events.map((event) => {
+      const obj: LeaveAccountDataObject = {
+        id: getLeaveAccountDataId(roomId, event.type),
+        roomId,
+        type: event.type,
+        event,
+      };
+
+      return obj;
+    });
+  });
+
+  await ct.storage.leaveAccountData.write.putMultiple(leaveAccountDataObjects);
+};
+
+export const writeLeaveRoomState = async (
+  ct: ClientContext,
+  leaveRooms: string[],
+  leave: Record<string, LeaveRoom>
+): Promise<void> => {
+  const leaveStateObjects: LeaveRoomStateObject[] = leaveRooms.flatMap((roomId) => {
+    const leaveRoom = leave[roomId];
+
+    const events = leaveRoomUtil.roomState(leaveRoom);
+
+    return events.map((event) => {
+      const obj: LeaveRoomStateObject = {
+        id: getLeaveRoomStateId(roomId, event.type, event.state_key),
+        roomId,
+        type: event.type,
+        event,
+      };
+
+      return obj;
+    });
+  });
+
+  await ct.storage.leaveRoomState.write.putMultiple(leaveStateObjects);
+};
+
+export const writePresence = async (
+  ct: ClientContext,
+  events: PresenceEvent<StatusContent>[]
+): Promise<void> => {
+  if (events.length > 0) {
+    const presenceObjects: PresenceObject[] = events.map((event) => {
+      const obj: PresenceObject = {
+        id: event.sender,
+        presence: event.content.presence,
+        content: event.content,
+      };
+
+      return obj;
+    });
+
+    await ct.storage.presence.write.putMultiple(presenceObjects);
+  }
+};
+
+export const deleteKnockRooms = async (ct: ClientContext, rooms: string[]): Promise<void> => {
+  if (rooms.length === 0) return;
+
+  const promises = rooms.map((roomId) =>
+    ct.storage.knockRoomState.read.queryIndexKeys('roomId', roomId)
+  );
+
+  const result = await Promise.allSettled(promises);
+  const keys = result.filter((r) => r.status === 'fulfilled').flatMap((r) => r.value);
+
+  await ct.storage.knockRoomState.write.deleteMultiple(keys);
+};
+
+export const deleteInviteRooms = async (ct: ClientContext, rooms: string[]): Promise<void> => {
+  if (rooms.length === 0) return;
+
+  const promises = rooms.map((roomId) =>
+    ct.storage.inviteRoomState.read.queryIndexKeys('roomId', roomId)
+  );
+
+  const result = await Promise.allSettled(promises);
+  const keys = result.filter((r) => r.status === 'fulfilled').flatMap((r) => r.value);
+
+  await ct.storage.inviteRoomState.write.deleteMultiple(keys);
+};
+
+export const deleteLeaveRooms = async (ct: ClientContext, rooms: string[]): Promise<void> => {
+  if (rooms.length === 0) return;
+
+  const accountDataObjectsId = (
+    await Promise.allSettled(
+      rooms.map((roomId) => ct.storage.leaveAccountData.read.queryIndexKeys('roomId', roomId))
+    )
+  )
+    .filter((r) => r.status === 'fulfilled')
+    .flatMap((r) => r.value);
+
+  await ct.storage.leaveAccountData.write.deleteMultiple(accountDataObjectsId);
+
+  const roomStateObjectsId = (
+    await Promise.allSettled(
+      rooms.map((roomId) => ct.storage.leaveRoomState.read.queryIndexKeys('roomId', roomId))
+    )
+  )
+    .filter((r) => r.status === 'fulfilled')
+    .flatMap((r) => r.value);
+
+  await ct.storage.leaveRoomState.write.deleteMultiple(roomStateObjectsId);
+};
+
+export const deleteJoinRooms = async (ct: ClientContext, rooms: string[]): Promise<void> => {
+  if (rooms.length === 0) return;
+
+  const accountDataObjectsId = (
+    await Promise.allSettled(
+      rooms.map((roomId) => ct.storage.joinAccountData.read.queryIndexKeys('roomId', roomId))
+    )
+  )
+    .filter((r) => r.status === 'fulfilled')
+    .flatMap((r) => r.value);
+
+  await ct.storage.joinAccountData.write.deleteMultiple(accountDataObjectsId);
+
+  await ct.storage.joinRoomSummary.write.deleteMultiple(rooms);
+
+  const roomStateObjectsId = (
+    await Promise.allSettled(
+      rooms.map((roomId) => ct.storage.joinRoomState.read.queryIndexKeys('roomId', roomId))
+    )
+  )
+    .filter((r) => r.status === 'fulfilled')
+    .flatMap((r) => r.value);
+
+  await ct.storage.joinRoomState.write.deleteMultiple(roomStateObjectsId);
+
+  const roomMemberObjectsId = (
+    await Promise.allSettled(
+      rooms.map((roomId) => ct.storage.joinRoomMember.read.queryIndexKeys('roomId', roomId))
+    )
+  )
+    .filter((r) => r.status === 'fulfilled')
+    .flatMap((r) => r.value);
+
+  await ct.storage.joinRoomMember.write.deleteMultiple(roomMemberObjectsId);
+
+  await ct.storage.joinRoomLatestEvent.write.deleteMultiple(rooms);
+
+  const readReceiptObjectsId = (
+    await Promise.allSettled(
+      rooms.map((roomId) => ct.storage.readReceipt.read.queryIndexKeys('roomId', roomId))
+    )
+  )
+    .filter((r) => r.status === 'fulfilled')
+    .flatMap((r) => r.value);
+
+  await ct.storage.readReceipt.write.deleteMultiple(readReceiptObjectsId);
+
+  await ct.storage.unreadNotifications.write.deleteMultiple(rooms);
+
+  const unreadThreadNotificationsObjectIds = (
+    await Promise.allSettled(
+      rooms.map((roomId) =>
+        ct.storage.unreadThreadNotifications.read.queryIndexKeys('roomId', roomId)
+      )
+    )
+  )
+    .filter((r) => r.status === 'fulfilled')
+    .flatMap((r) => r.value);
+
+  await ct.storage.unreadThreadNotifications.write.deleteMultiple(
+    unreadThreadNotificationsObjectIds
+  );
+};
+
+export const getStaleJoinRooms = (
+  ct: ClientContext,
+  joinRooms: string[],
+  join: Record<string, JoinRoom>
+): string[] => {
+  const notJoinedRooms = joinRooms.filter((roomId) => {
+    const joinRoom = join[roomId];
+
+    const myMemberEvent = joinRoomUtil
+      .roomState(joinRoom)
+      .find((event) => event.type === 'm.room.member' && event.state_key === ct.session.userId);
+
+    if (!myMemberEvent) return false;
+
+    const membership = ObjectReader.string(myMemberEvent.content, 'membership');
+
+    return membership !== 'join';
+  });
+
+  return notJoinedRooms;
+};
+
+export const getStaleInviteRooms = (
+  ct: ClientContext,
+  inviteRooms: string[],
+  invite: Record<string, InviteRoom>
+): string[] => {
+  const notInviteRooms = inviteRooms.filter((roomId) => {
+    const joinRoom = invite[roomId];
+
+    const myMemberEvent = inviteRoomUtil
+      .roomInviteState(joinRoom)
+      .find((event) => event.type === 'm.room.member' && event.state_key === ct.session.userId);
+
+    if (!myMemberEvent) return false;
+
+    const membership = ObjectReader.string(myMemberEvent.content, 'membership');
+
+    return membership !== 'invite';
+  });
+
+  return notInviteRooms;
+};
+
+export const getStaleKnockRooms = (
+  ct: ClientContext,
+  knockRooms: string[],
+  knock: Record<string, KnockRoom>
+): string[] => {
+  const notKnockRooms = knockRooms.filter((roomId) => {
+    const knockRoom = knock[roomId];
+
+    const myMemberEvent = knockRoomUtil
+      .roomKnockState(knockRoom)
+      .find((event) => event.type === 'm.room.member' && event.state_key === ct.session.userId);
+
+    if (!myMemberEvent) return false;
+
+    const membership = ObjectReader.string(myMemberEvent.content, 'membership');
+
+    return membership !== 'knock';
+  });
+
+  return notKnockRooms;
+};
+
+export const getStaleLeaveRooms = (
+  ct: ClientContext,
+  leaveRooms: string[],
+  leave: Record<string, LeaveRoom>
+): string[] => {
+  const notLeavedRooms = leaveRooms.filter((roomId) => {
+    const leaveRoom = leave[roomId];
+
+    const myMemberEvent = leaveRoomUtil
+      .roomState(leaveRoom)
+      .find((event) => event.type === 'm.room.member' && event.state_key === ct.session.userId);
+
+    if (!myMemberEvent) return false;
+
+    const membership = ObjectReader.string(myMemberEvent.content, 'membership');
+
+    return membership !== 'leave';
+  });
+
+  return notLeavedRooms;
+};
diff --git a/src/client/txn.ts b/src/client/txn.ts
new file mode 100644
index 00000000..39229963
--- /dev/null
+++ b/src/client/txn.ts
@@ -0,0 +1,12 @@
+export type GetTxnId = () => string;
+
+export const getTxnIdFunc = (): GetTxnId => {
+  let txnCount = 0;
+
+  const getTxnId: GetTxnId = () => {
+    const id = `m${new Date().getTime()}.${(txnCount += 1)}`;
+    return id;
+  };
+
+  return getTxnId;
+};
diff --git a/src/types/matrix/accountData.ts b/src/types/matrix/accountData.ts
index 98715996..5a0897b2 100644
--- a/src/types/matrix/accountData.ts
+++ b/src/types/matrix/accountData.ts
@@ -17,6 +17,25 @@ export enum AccountDataEvent {
   CrossSigningUser = 'm.cross_signing.user',
   MegolmBackupV1 = 'm.megolm_backup.v1',
 }
+export enum AccountDataType {
+  PushRules = 'm.push_rules',
+  Direct = 'm.direct',
+  IgnoredUserList = 'm.ignored_user_list',
+
+  CinnySpaces = 'in.cinny.spaces',
+
+  ElementRecentEmoji = 'io.element.recent_emoji',
+
+  PoniesUserEmotes = 'im.ponies.user_emotes',
+  PoniesEmoteRooms = 'im.ponies.emote_rooms',
+
+  SecretStorageDefaultKey = 'm.secret_storage.default_key',
+
+  CrossSigningMaster = 'm.cross_signing.master',
+  CrossSigningSelf = 'm.cross_signing.self',
+  CrossSigningUser = 'm.cross_signing.user',
+  MegolmBackupV1 = 'm.megolm_backup.v1',
+}
 
 export type MDirectContent = Record<string, string[]>;
 
@@ -48,3 +67,39 @@ export type SecretContent = {
 export type SecretAccountData = {
   encrypted: Record<string, SecretContent>;
 };
+
+export enum PushRuleId {
+  Master = '.m.rule.master',
+  IsUserMention = '.m.rule.is_user_mention',
+  IsRoomMention = '.m.rule.is_room_mention',
+  ContainsDisplayName = '.m.rule.contains_display_name',
+  ContainsUserName = '.m.rule.contains_user_name',
+  AtRoomNotification = '.m.rule.roomnotif',
+  DM = '.m.rule.room_one_to_one',
+  EncryptedDM = '.m.rule.encrypted_room_one_to_one',
+  Message = '.m.rule.message',
+  EncryptedMessage = '.m.rule.encrypted',
+  InviteToSelf = '.m.rule.invite_for_me',
+  MemberEvent = '.m.rule.member_event',
+  IncomingCall = '.m.rule.call',
+  SuppressNotices = '.m.rule.suppress_notices',
+  Tombstone = '.m.rule.tombstone',
+  PollStart = '.m.rule.poll_start',
+  PollStartUnstable = '.org.matrix.msc3930.rule.poll_start',
+  PollEnd = '.m.rule.poll_end',
+  PollEndUnstable = '.org.matrix.msc3930.rule.poll_end',
+  PollStartOneToOne = '.m.rule.poll_start_one_to_one',
+  PollStartOneToOneUnstable = '.org.matrix.msc3930.rule.poll_start_one_to_one',
+  PollEndOneToOne = '.m.rule.poll_end_one_to_one',
+  PollEndOneToOneUnstable = '.org.matrix.msc3930.rule.poll_end_one_to_one',
+}
+export enum ConditionKind {
+  EventMatch = 'event_match',
+  EventPropertyIs = 'event_property_is',
+  EventPropertyContains = 'event_property_contains',
+  ContainsDisplayName = 'contains_display_name',
+  RoomMemberCount = 'room_member_count',
+  SenderNotificationPermission = 'sender_notification_permission',
+  CallStarted = 'call_started',
+  CallStartedPrefix = 'org.matrix.msc3914.call_started',
+}
diff --git a/src/types/matrix/common.ts b/src/types/matrix/common.ts
index 210c711f..4065c49e 100644
--- a/src/types/matrix/common.ts
+++ b/src/types/matrix/common.ts
@@ -1,9 +1,55 @@
 import { EncryptedAttachmentInfo } from 'browser-encrypt-attachment';
-import { MsgType } from 'matrix-js-sdk';
 
 export const MATRIX_BLUR_HASH_PROPERTY_NAME = 'xyz.amorgan.blurhash';
 export const MATRIX_SPOILER_PROPERTY_NAME = 'page.codeberg.everypizza.msc4193.spoiler';
-export const MATRIX_SPOILER_REASON_PROPERTY_NAME = 'page.codeberg.everypizza.msc4193.spoiler.reason';
+export const MATRIX_SPOILER_REASON_PROPERTY_NAME =
+  'page.codeberg.everypizza.msc4193.spoiler.reason';
+
+export enum MsgType {
+  Text = 'm.text',
+  Emote = 'm.emote',
+  Notice = 'm.notice',
+  Image = 'm.image',
+  File = 'm.file',
+  Audio = 'm.audio',
+  Location = 'm.location',
+  Video = 'm.video',
+  KeyVerificationRequest = 'm.key.verification.request',
+}
+
+export type MentionsContent = {
+  user_ids?: string[];
+  room?: boolean;
+};
+
+export enum RelationType {
+  Annotation = 'm.annotation',
+  Replace = 'm.replace',
+  Reference = 'm.reference',
+  Thread = 'm.thread',
+}
+
+export type Relation<T = RelationType> = {
+  'm.relates_to': {
+    event_id: string;
+    rel_type: T;
+  };
+};
+
+export type RelationContent = {
+  rel_type?: RelationType | string;
+  event_id?: string;
+  is_falling_back?: boolean;
+  'm.in_reply_to'?: {
+    event_id?: string;
+  };
+  key?: string;
+};
+
+export type BaseContent = {
+  'm.mentions'?: MentionsContent;
+  'm.relates_to'?: RelationContent;
+};
 
 export type IImageInfo = {
   w?: number;
@@ -51,7 +97,7 @@ export type IImageContent = {
   file?: IEncryptedFile;
   [MATRIX_SPOILER_PROPERTY_NAME]?: boolean;
   [MATRIX_SPOILER_REASON_PROPERTY_NAME]?: string;
-};
+} & BaseContent;
 
 export type IVideoContent = {
   msgtype: MsgType.Video;
@@ -62,7 +108,7 @@ export type IVideoContent = {
   file?: IEncryptedFile;
   [MATRIX_SPOILER_PROPERTY_NAME]?: boolean;
   [MATRIX_SPOILER_REASON_PROPERTY_NAME]?: string;
-};
+} & BaseContent;
 
 export type IAudioContent = {
   msgtype: MsgType.Audio;
@@ -71,7 +117,7 @@ export type IAudioContent = {
   url?: string;
   info?: IAudioInfo;
   file?: IEncryptedFile;
-};
+} & BaseContent;
 
 export type IFileContent = {
   msgtype: MsgType.File;
@@ -80,11 +126,33 @@ export type IFileContent = {
   url?: string;
   info?: IFileInfo & IThumbnailContent;
   file?: IEncryptedFile;
-};
+} & BaseContent;
 
 export type ILocationContent = {
   msgtype: MsgType.Location;
   body?: string;
   geo_uri?: string;
   info?: IThumbnailContent;
+} & BaseContent;
+
+export type MessageContent = {
+  msgtype: MsgType;
+  body: string;
+  format?: 'org.matrix.custom.html';
+  formatted_body?: string;
+} & BaseContent;
+
+export type StickerContent = {
+  body: string;
+  info: IImageInfo;
+  url: string;
+} & BaseContent;
+
+export type ReactionContent = {
+  'm.relates_to': {
+    event_id: string;
+    key: string;
+    rel_type: RelationType.Annotation;
+  };
+  shortcode?: string;
 };
diff --git a/src/types/matrix/room.ts b/src/types/matrix/room.ts
index b866fd77..bc4818f0 100644
--- a/src/types/matrix/room.ts
+++ b/src/types/matrix/room.ts
@@ -1,3 +1,4 @@
+import { RoomMembership } from 'neurone/lib/api/types';
 import { IImageInfo } from './common';
 
 export enum Membership {
@@ -40,6 +41,30 @@ export enum StateEvent {
   PowerLevelTags = 'in.cinny.room.power_level_tags',
 }
 
+export enum StateEventType {
+  RoomCanonicalAlias = 'm.room.canonical_alias',
+  RoomCreate = 'm.room.create',
+  RoomJoinRules = 'm.room.join_rules',
+  RoomMember = 'm.room.member',
+  RoomThirdPartyInvite = 'm.room.third_party_invite',
+  RoomPowerLevels = 'm.room.power_levels',
+  RoomName = 'm.room.name',
+  RoomTopic = 'm.room.topic',
+  RoomAvatar = 'm.room.avatar',
+  RoomPinnedEvents = 'm.room.pinned_events',
+  RoomEncryption = 'm.room.encryption',
+  RoomHistoryVisibility = 'm.room.history_visibility',
+  RoomGuestAccess = 'm.room.guest_access',
+  RoomServerAcl = 'm.room.server_acl',
+  RoomTombstone = 'm.room.tombstone',
+
+  SpaceChild = 'm.space.child',
+  SpaceParent = 'm.space.parent',
+
+  PoniesRoomEmotes = 'im.ponies.room_emotes',
+  PowerLevelTags = 'in.cinny.room.power_level_tags',
+}
+
 export enum MessageEvent {
   RoomMessage = 'm.room.message',
   RoomMessageEncrypted = 'm.room.encrypted',
@@ -52,10 +77,31 @@ export enum RoomType {
   Space = 'm.space',
 }
 
-export type MSpaceChildContent = {
-  via: string[];
-  suggested?: boolean;
+export enum ThreadId {
+  Main = 'main',
+}
+
+export type JoinRule =
+  | 'public'
+  | 'knock'
+  | 'invite'
+  | 'private'
+  | 'restricted'
+  | 'knock_restricted';
+
+export type AllowCondition = {
+  room_id: string;
+  type: string[];
+};
+export type JoinRulesContent = {
+  allow?: AllowCondition[];
+  join_rule: JoinRule;
+};
+
+export type SpaceChildContent = {
   order?: string;
+  suggested?: boolean;
+  via?: string[];
 };
 
 export enum NotificationType {
@@ -106,3 +152,26 @@ export type MemberPowerTag = {
   color?: string;
   icon?: MemberPowerTagIcon;
 };
+
+export type RoomMemberContent = {
+  avatar_url?: string;
+  displayname?: string;
+  is_direct?: boolean;
+  join_authorised_via_users_server?: string;
+  membership: RoomMembership;
+  reason?: string;
+  third_party_invite?: {
+    display_name: string;
+    signed: {
+      mxid: string;
+      token: string;
+      ts: number;
+    };
+  };
+};
+
+export type RoomServerAclContent = {
+  allow?: string[];
+  allow_ip_literals?: boolean;
+  deny?: string[];
+};

From 5f69cc671e2b676a47b8f3a00e11e1715fa2d471 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 19 Jul 2026 22:21:43 +0530
Subject: [PATCH 002/158] fix merge conflict

---
 src/app/components/emoji-board/components/Item.tsx | 8 --------
 1 file changed, 8 deletions(-)

diff --git a/src/app/components/emoji-board/components/Item.tsx b/src/app/components/emoji-board/components/Item.tsx
index 94dc40bb..021ce1b2 100644
--- a/src/app/components/emoji-board/components/Item.tsx
+++ b/src/app/components/emoji-board/components/Item.tsx
@@ -65,11 +65,7 @@ export function CustomEmojiItem({ url, image }: CustomEmojiItemProps) {
         loading="lazy"
         className={css.CustomEmojiImg}
         alt={image.body || image.shortcode}
-<<<<<<< HEAD
         src={url ?? image.url}
-=======
-        src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
->>>>>>> dev
       />
     </Box>
   );
@@ -98,11 +94,7 @@ export function StickerItem({ url, image }: StickerItemProps) {
         loading="lazy"
         className={css.StickerImg}
         alt={image.body || image.shortcode}
-<<<<<<< HEAD
         src={url ?? image.url}
-=======
-        src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
->>>>>>> dev
       />
     </Box>
   );

From 57ca5e461587c2ece40c397804fa647dfd8aa973 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 20 Jul 2026 21:30:29 +0530
Subject: [PATCH 003/158] replace sdk from space lobby

---
 src/app/components/RoomSummaryLoader.tsx      |  19 +-
 .../autocomplete/RoomMentionAutocomplete.tsx  |  13 +-
 src/app/components/room-card/RoomCard.tsx     |   2 +-
 src/app/features/lobby/HierarchyItemMenu.tsx  |  45 +-
 src/app/features/lobby/Lobby.tsx              | 471 ++++++++++--------
 src/app/features/lobby/LobbyHeader.tsx        |  43 +-
 src/app/features/lobby/LobbyHero.tsx          |  34 +-
 src/app/features/lobby/RoomItem.tsx           | 116 +++--
 src/app/features/lobby/SpaceHierarchy.tsx     |  53 +-
 src/app/features/lobby/SpaceItem.tsx          | 127 +++--
 src/app/features/room-nav/RoomNavItem.tsx     |   1 +
 src/app/features/room/RoomViewHeader.tsx      |   7 +-
 src/app/hooks/useLocalRoomSummary.ts          |   6 +-
 src/app/hooks/usePowerLevels.ts               |  66 +--
 src/app/hooks/useSpaceHierarchy.ts            |  18 +-
 src/app/pages/Router.tsx                      |   4 +-
 src/client/context.ts                         |  63 ++-
 src/client/initialize.ts                      |  19 +-
 src/client/reader/Error.ts                    |   6 +-
 src/types/matrix/room.ts                      |   4 +-
 20 files changed, 649 insertions(+), 468 deletions(-)

diff --git a/src/app/components/RoomSummaryLoader.tsx b/src/app/components/RoomSummaryLoader.tsx
index 88b10446..4d025869 100644
--- a/src/app/components/RoomSummaryLoader.tsx
+++ b/src/app/components/RoomSummaryLoader.tsx
@@ -1,4 +1,4 @@
-import { ReactNode, useCallback, useState } from 'react';
+import { ReactElement, useCallback, useState } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import { getRoomSummary, GetRoomSummaryOK } from 'neurone/lib/api/matrix/client/v1/roomSummary';
@@ -7,10 +7,11 @@ import { SpaceHierarchyRoomChunk } from 'neurone/lib/api/types';
 import { AsyncState, AsyncStatus } from '../hooks/useAsyncCallback';
 import { useClient } from '../hooks/useClient';
 import { useSpecVersionSupport } from '../hooks/useSpecVersions';
+import { LocalRoomSummary, useLocalRoomSummary } from '../hooks/useLocalRoomSummary';
 
 type RoomSummaryLoaderProps = {
   roomIdOrAlias: string;
-  children: (roomSummary?: GetRoomSummaryOK) => ReactNode;
+  children: (roomSummary?: GetRoomSummaryOK) => ReactElement;
 };
 
 export function RoomSummaryLoader({ roomIdOrAlias, children }: RoomSummaryLoaderProps) {
@@ -40,15 +41,23 @@ export function RoomSummaryLoader({ roomIdOrAlias, children }: RoomSummaryLoader
   return children(data);
 }
 
-export function LocalRoomSummaryLoader({ children }: { children: () => ReactNode }) {
-  return children();
+export function LocalRoomSummaryLoader({
+  roomId,
+  children,
+}: {
+  roomId: string;
+  children: (summary: LocalRoomSummary) => ReactElement;
+}) {
+  const summary = useLocalRoomSummary(roomId);
+
+  return children(summary);
 }
 export function HierarchyRoomSummaryLoader({
   roomId,
   children,
 }: {
   roomId: string;
-  children: (state: AsyncState<SpaceHierarchyRoomChunk, Error>) => ReactNode;
+  children: (state: AsyncState<SpaceHierarchyRoomChunk, Error>) => ReactElement;
 }) {
   const ct = useClient();
 
diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
index dffb4515..15a9fe1e 100644
--- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
@@ -186,11 +186,20 @@ export function RoomMentionAutocomplete({
                       src={avatar}
                       alt={name}
                       renderFallback={() => (
-                        <RoomIcon size="50" joinRule={ct.roomToJoinRule.read.get(rId)} filled />
+                        <RoomIcon
+                          size="50"
+                          joinRule={ct.roomToJoinRule.read.get(rId)}
+                          roomType={ct.roomToType.read.get(rId)}
+                          filled
+                        />
                       )}
                     />
                   ) : (
-                    <RoomIcon size="100" joinRule={ct.roomToJoinRule.read.get(rId)} />
+                    <RoomIcon
+                      size="100"
+                      joinRule={ct.roomToJoinRule.read.get(rId)}
+                      roomType={ct.roomToType.read.get(rId)}
+                    />
                   )}
                 </Avatar>
               }
diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx
index 9fb283c2..0ce5f337 100644
--- a/src/app/components/room-card/RoomCard.tsx
+++ b/src/app/components/room-card/RoomCard.tsx
@@ -219,7 +219,7 @@ export const RoomCard = as<'div', RoomCardProps>(
               )}
             />
           </Avatar>
-          {(roomType === RoomType.Space || localSummary.space) && (
+          {(roomType === RoomType.Space || localSummary.roomType === RoomType.Space) && (
             <Badge variant="Secondary" fill="Soft" outlined>
               <Text size="L400">Space</Text>
             </Badge>
diff --git a/src/app/features/lobby/HierarchyItemMenu.tsx b/src/app/features/lobby/HierarchyItemMenu.tsx
index 58ed2109..91d9af90 100644
--- a/src/app/features/lobby/HierarchyItemMenu.tsx
+++ b/src/app/features/lobby/HierarchyItemMenu.tsx
@@ -15,8 +15,8 @@ import {
   Spinner,
   toRem,
 } from 'folds';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { SpaceChildContent, StateEvent } from '../../../types/matrix/room';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -27,9 +27,9 @@ import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 import { IPowerLevels } from '../../hooks/usePowerLevels';
-import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { useClient } from '../../hooks/useClient';
 
 type HierarchyItemWithParent = HierarchyItem & {
   parentId: string;
@@ -42,14 +42,19 @@ function SuggestMenuItem({
   item: HierarchyItemWithParent;
   requestClose: () => void;
 }) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const { roomId, parentId, content } = item;
 
   const [toggleState, handleToggleSuggested] = useAsyncCallback(
     useCallback(() => {
       const newContent: SpaceChildContent = { ...content, suggested: !content.suggested };
-      return mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, newContent, roomId);
-    }, [mx, parentId, roomId, content])
+      return ct.requestAuthJSON(
+        putStateEvent({
+          pathParams: { roomId: parentId, eventType: StateEvent.SpaceChild, stateKey: roomId },
+          body: newContent,
+        })
+      );
+    }, [ct, parentId, roomId, content])
   );
 
   useEffect(() => {
@@ -80,13 +85,19 @@ function RemoveMenuItem({
   item: HierarchyItemWithParent;
   requestClose: () => void;
 }) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const { roomId, parentId } = item;
 
   const [removeState, handleRemove] = useAsyncCallback(
     useCallback(
-      () => mx.sendStateEvent(parentId, StateEvent.SpaceChild as any, {}, roomId),
-      [mx, parentId, roomId]
+      () =>
+        ct.requestAuthJSON(
+          putStateEvent({
+            pathParams: { roomId: parentId, eventType: StateEvent.SpaceChild, stateKey: roomId },
+            body: {},
+          })
+        ),
+      [ct, parentId, roomId]
     )
   );
 
@@ -126,8 +137,6 @@ function InviteMenuItem({
   requestClose: () => void;
   disabled?: boolean;
 }) {
-  const mx = useMatrixClient();
-  const room = mx.getRoom(item.roomId);
   const [invitePrompt, setInvitePrompt] = useState(false);
 
   const handleInvite = () => {
@@ -143,15 +152,15 @@ function InviteMenuItem({
         variant="Primary"
         fill="None"
         aria-pressed={invitePrompt}
-        disabled={disabled || !room}
+        disabled={disabled}
       >
         <Text as="span" size="T300" truncate>
           Invite
         </Text>
       </MenuItem>
-      {invitePrompt && room && (
+      {invitePrompt && (
         <InviteUserPrompt
-          room={room}
+          roomId={item.roomId}
           requestClose={() => {
             setInvitePrompt(false);
             requestClose();
@@ -173,13 +182,13 @@ function SettingsMenuItem({
 }) {
   const openRoomSettings = useOpenRoomSettings();
   const openSpaceSettings = useOpenSpaceSettings();
-  const space = useSpaceOptionally();
+  const spaceId = useSpaceOptionally();
 
   const handleSettings = () => {
     if ('space' in item) {
       openSpaceSettings(item.roomId, item.parentId);
     } else {
-      openRoomSettings(item.roomId, space?.roomId);
+      openRoomSettings(item.roomId, spaceId);
     }
     requestClose();
   };
@@ -211,15 +220,15 @@ export function HierarchyItemMenu({
   pinned,
   onTogglePin,
 }: HierarchyItemMenuProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
   const canInvite = (): boolean => {
     if (!powerLevels) return false;
-    const creators = getRoomCreatorsForRoomId(mx, item.roomId);
+    const creators = ct.roomToCreators.read.get(item.roomId);
     const permissions = getRoomPermissionsAPI(creators, powerLevels);
 
-    return permissions.action('invite', mx.getSafeUserId());
+    return permissions.action('invite', ct.session.userId);
   };
 
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
diff --git a/src/app/features/lobby/Lobby.tsx b/src/app/features/lobby/Lobby.tsx
index c182223d..6d9ae85c 100644
--- a/src/app/features/lobby/Lobby.tsx
+++ b/src/app/features/lobby/Lobby.tsx
@@ -1,9 +1,14 @@
 import React, { MouseEventHandler, useCallback, useMemo, useRef, useState } from 'react';
 import { Box, Chip, Icon, IconButton, Icons, Line, Scroll, Spinner, Text, config } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtom, useAtomValue, useSetAtom } from 'jotai';
 import { useNavigate } from 'react-router-dom';
 import produce from 'immer';
+import { AccountDataEvent, SpaceHierarchyRoomChunk } from 'neurone/lib/api/types';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { ObjectReader } from 'neurone/lib/utils';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
 import { useSpace } from '../../hooks/useSpace';
 import { Page, PageContent, PageContentCenter, PageHeroSection } from '../../components/page';
 import {
@@ -26,39 +31,46 @@ import {
   PowerLevelsContextProvider,
   usePowerLevels,
   useRoomsPowerLevels,
+  usePowerLevelsState,
 } from '../../hooks/usePowerLevels';
-import { mDirectAtom } from '../../state/mDirectList';
 import { makeLobbyCategoryId } from '../../state/closedLobbyCategories';
 import { useCategoryHandler } from '../../hooks/useCategoryHandler';
 import { allRoomsAtom } from '../../state/room-list/roomList';
-import { getCanonicalAliasOrRoomId, rateLimitedActions } from '../../utils/matrix';
+import { rateLimitedActions } from '../../utils/matrix';
 import { getSpaceRoomPath } from '../../pages/pathUtils';
-import { StateEvent } from '../../../types/matrix/room';
+import { AllowCondition, StateEvent } from '../../../types/matrix/room';
 import { CanDropCallback, useDnDMonitor } from './DnD';
 import { ASCIILexicalTable, orderKeys } from '../../utils/ASCIILexicalTable';
-import { getStateEvent } from '../../utils/room';
 import { useClosedLobbyCategoriesAtom } from '../../state/hooks/closedLobbyCategories';
 import {
   makeCinnySpacesContent,
   sidebarItemWithout,
   useSidebarItems,
+  InCinnySpacesContent,
 } from '../../hooks/useSidebarItems';
 import { useOrphanSpaces } from '../../state/hooks/roomList';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
-import { AccountDataEvent } from '../../../types/matrix/accountData';
-import { useRoomMembers } from '../../hooks/useRoomMembers';
 import { SpaceHierarchy } from './SpaceHierarchy';
-import { useGetRoom } from '../../hooks/useGetRoom';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
-import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
+import { useClient } from '../../hooks/useClient';
+import { RoomProvider } from '../../hooks/useRoom';
+import { RoomMembersAPIProvider, useCreateRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { usePendingMemberLoader, usePendingMembers } from '../../hooks/usePendingMembers';
+import { useAccountData } from '../../hooks/storage/useAccountData';
+import { AccountDataType } from '../../../types/matrix/accountData';
+import { useAllJoinedRoomsSet } from '../../hooks/useGetRoom';
+import {
+  PowerLevelTagsContextProvider,
+  usePowerLevelTags,
+  usePowerLevelTagsState,
+} from '../../hooks/usePowerLevelTags';
 
 const useCanDropLobbyItem = (
-  space: Room,
-  roomsPowerLevels: Map<string, IPowerLevels>,
-  getRoom: (roomId: string) => Room | undefined
+  spaceId: string,
+  roomsPowerLevels: Map<string, IPowerLevels>
 ): CanDropCallback => {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
   const canDropSpace: CanDropCallback = useCallback(
     (item, container) => {
@@ -68,22 +80,20 @@ const useCanDropLobbyItem = (
         return false;
       }
 
-      const containerSpaceId = space.roomId;
-
-      const powerLevels = roomsPowerLevels.get(containerSpaceId) ?? {};
-      const creators = getRoomCreatorsForRoomId(mx, containerSpaceId);
+      const powerLevels = roomsPowerLevels.get(spaceId) ?? {};
+      const creators = ct.roomToCreators.read.get(spaceId);
       const permissions = getRoomPermissionsAPI(creators, powerLevels);
 
       if (
-        getRoom(containerSpaceId) === undefined ||
-        !permissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+        !ct.rooms.join.read.includes(spaceId) ||
+        !permissions.stateEvent(StateEvent.SpaceChild, ct.session.userId)
       ) {
         return false;
       }
 
       return true;
     },
-    [space, roomsPowerLevels, getRoom, mx]
+    [spaceId, roomsPowerLevels, ct]
   );
 
   const canDropRoom: CanDropCallback = useCallback(
@@ -92,18 +102,18 @@ const useCanDropLobbyItem = (
         'space' in container.item ? container.item.roomId : container.item.parentId;
 
       const draggingOutsideSpace = item.parentId !== containerSpaceId;
-      const restrictedItem = mx.getRoom(item.roomId)?.getJoinRule() === JoinRule.Restricted;
+      const restrictedItem = ct.roomToJoinRule.read.get(item.roomId) === 'restricted';
 
       // check and do not allow restricted room to be dragged outside
       // current space if can't change `m.room.join_rules` `content.allow`
       if (draggingOutsideSpace && restrictedItem) {
         const itemPowerLevels = roomsPowerLevels.get(item.roomId) ?? {};
-        const itemCreators = getRoomCreatorsForRoomId(mx, item.roomId);
+        const itemCreators = ct.roomToCreators.read.get(item.roomId);
         const itemPermissions = getRoomPermissionsAPI(itemCreators, itemPowerLevels);
 
         const canChangeJoinRuleAllow = itemPermissions.stateEvent(
           StateEvent.RoomJoinRules,
-          mx.getSafeUserId()
+          ct.session.userId
         );
         if (!canChangeJoinRuleAllow) {
           return false;
@@ -111,17 +121,17 @@ const useCanDropLobbyItem = (
       }
 
       const powerLevels = roomsPowerLevels.get(containerSpaceId) ?? {};
-      const creators = getRoomCreatorsForRoomId(mx, containerSpaceId);
+      const creators = ct.roomToCreators.read.get(containerSpaceId);
       const permissions = getRoomPermissionsAPI(creators, powerLevels);
       if (
-        getRoom(containerSpaceId) === undefined ||
-        !permissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+        !ct.rooms.join.read.includes(containerSpaceId) ||
+        !permissions.stateEvent(StateEvent.SpaceChild, ct.session.userId)
       ) {
         return false;
       }
       return true;
     },
-    [mx, getRoom, roomsPowerLevels]
+    [ct, roomsPowerLevels]
   );
 
   const canDrop: CanDropCallback = useCallback(
@@ -145,27 +155,37 @@ const useCanDropLobbyItem = (
 };
 
 export function Lobby() {
+  const ct = useClient();
   const navigate = useNavigate();
-  const mx = useMatrixClient();
-  const mDirects = useAtomValue(mDirectAtom);
-  const allRooms = useAtomValue(allRoomsAtom);
-  const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
-  const space = useSpace();
-  const spacePowerLevels = usePowerLevels(space);
+  const spaceId = useSpace();
+  const allJoinedRooms = useAllJoinedRoomsSet();
+
+  const powerLevelStateResult = usePowerLevelsState(spaceId);
+  const spacePowerLevels = usePowerLevels(powerLevelStateResult.value);
   const lex = useMemo(() => new ASCIILexicalTable(' '.charCodeAt(0), '~'.charCodeAt(0), 6), []);
-  const members = useRoomMembers(mx, space.roomId);
+
+  const powerLevelTagsStateResult = usePowerLevelTagsState(spaceId);
+  const powerLevelTags = usePowerLevelTags(spacePowerLevels, powerLevelTagsStateResult.value);
+  const membersAPI = useCreateRoomMembersAPI(spaceId);
+  const membersPending = usePendingMembers(spaceId);
+  usePendingMemberLoader(spaceId, membersPending);
 
   const scrollRef = useRef<HTMLDivElement>(null);
   const heroSectionRef = useRef<HTMLDivElement>(null);
   const [heroSectionHeight, setHeroSectionHeight] = useState<number>();
-  const [spaceRooms, setSpaceRooms] = useAtom(spaceRoomsAtom);
+  const setSpaceRooms = useSetAtom(spaceRoomsAtom);
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const screenSize = useScreenSizeContext();
   const [onTop, setOnTop] = useState(true);
   const [closedCategories, setClosedCategories] = useAtom(useClosedLobbyCategoriesAtom());
-  const [sidebarItems] = useSidebarItems(
-    useOrphanSpaces(mx, allRoomsAtom, useAtomValue(roomToParentsAtom))
+
+  const roomToParents = useAtomValue(roomToParentsAtom);
+  const orphanSpaces = useOrphanSpaces(ct, allRoomsAtom, roomToParents);
+  const { value: cinnySpacesEvent } = useAccountData<AccountDataEvent<InCinnySpacesContent>>(
+    AccountDataType.CinnySpaces
   );
+  const sidebarItems = useSidebarItems(orphanSpaces, cinnySpacesEvent);
+
   const sidebarSpaces = useMemo(() => {
     const sideSpaces = sidebarItems.flatMap((item) => {
       if (typeof item === 'string') return item;
@@ -175,25 +195,23 @@ export function Lobby() {
     return new Set(sideSpaces);
   }, [sidebarItems]);
 
-  const [spacesItems, setSpacesItem] = useState<Map<string, IHierarchyRoom>>(() => new Map());
+  const [spacesItems, setSpacesItem] = useState<Map<string, SpaceHierarchyRoomChunk>>(
+    () => new Map()
+  );
 
   useElementSizeObserver(
     useCallback(() => heroSectionRef.current, []),
     useCallback((w, height) => setHeroSectionHeight(height), [])
   );
 
-  const getRoom = useGetRoom(allJoinedRooms);
-
   const [draggingItem, setDraggingItem] = useState<HierarchyItem>();
   const hierarchy = useSpaceHierarchy(
-    space.roomId,
-    spaceRooms,
-    getRoom,
+    spaceId,
     useCallback(
       (childId) =>
-        closedCategories.has(makeLobbyCategoryId(space.roomId, childId)) ||
+        closedCategories.has(makeLobbyCategoryId(spaceId, childId)) ||
         (draggingItem ? 'space' in draggingItem : false),
-      [closedCategories, space.roomId, draggingItem]
+      [closedCategories, spaceId, draggingItem]
     )
   );
 
@@ -210,17 +228,17 @@ export function Lobby() {
     useMemo(
       () =>
         hierarchy
-          .flatMap((i) => {
-            const childRooms = Array.isArray(i.rooms) ? i.rooms.map((r) => getRoom(r.roomId)) : [];
+          .flatMap((i): string[] => {
+            const childRooms = Array.isArray(i.rooms) ? i.rooms.map((r) => r.roomId) : [];
 
-            return [getRoom(i.space.roomId), ...childRooms];
+            return [i.space.roomId, ...childRooms];
           })
-          .filter((r) => !!r) as Room[],
-      [hierarchy, getRoom]
+          .filter((r) => ct.rooms.join.read.includes(r)),
+      [hierarchy, ct]
     )
   );
 
-  const canDrop: CanDropCallback = useCanDropLobbyItem(space, roomsPowerLevels, getRoom);
+  const canDrop: CanDropCallback = useCanDropLobbyItem(spaceId, roomsPowerLevels);
 
   const [reorderSpaceState, reorderSpace] = useAsyncCallback(
     useCallback(
@@ -258,25 +276,31 @@ export function Lobby() {
             const parentPL = roomsPowerLevels.get(reorder.item.parentId);
             if (!parentPL) return false;
 
-            const creators = getRoomCreatorsForRoomId(mx, reorder.item.parentId);
+            const creators = ct.roomToCreators.read.get(reorder.item.parentId);
             const permissions = getRoomPermissionsAPI(creators, parentPL);
-            const canEdit = permissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId());
+            const canEdit = permissions.stateEvent(StateEvent.SpaceChild, ct.session.userId);
             return canEdit && reorder.orderKey !== currentOrders[index];
           });
 
         if (reorders) {
           await rateLimitedActions(reorders, async (reorder) => {
-            if (!reorder.item.parentId) return;
-            await mx.sendStateEvent(
-              reorder.item.parentId,
-              StateEvent.SpaceChild as any,
-              { ...reorder.item.content, order: reorder.orderKey },
-              reorder.item.roomId
+            if (!reorder.item.parentId) return undefined;
+            const resp = await ct.requestAuthJSON(
+              putStateEvent({
+                pathParams: {
+                  roomId: reorder.item.parentId,
+                  eventType: StateEvent.SpaceChild,
+                  stateKey: reorder.item.roomId,
+                },
+                body: { ...reorder.item.content, order: reorder.orderKey },
+              })
             );
+            const [err] = await parseMatrixResp(resp);
+            return err;
           });
         }
       },
-      [mx, hierarchy, lex, roomsPowerLevels]
+      [ct, hierarchy, lex, roomsPowerLevels]
     )
   );
   const reorderingSpace = reorderSpaceState.status === AsyncStatus.Loading;
@@ -284,7 +308,6 @@ export function Lobby() {
   const [reorderRoomState, reorderRoom] = useAsyncCallback(
     useCallback(
       async (item: HierarchyItem, containerItem: HierarchyItem) => {
-        const itemRoom = mx.getRoom(item.roomId);
         if (!item.parentId) {
           return;
         }
@@ -294,49 +317,70 @@ export function Lobby() {
 
         // remove from current space
         if (item.parentId !== containerParentId) {
-          mx.sendStateEvent(item.parentId, StateEvent.SpaceChild as any, {}, item.roomId);
+          ct.requestAuthJSON(
+            putStateEvent({
+              pathParams: {
+                roomId: item.parentId,
+                eventType: StateEvent.SpaceChild,
+                stateKey: item.roomId,
+              },
+              body: {},
+            })
+          );
         }
 
         if (
-          itemRoom &&
-          itemRoom.getJoinRule() === JoinRule.Restricted &&
+          ct.roomToJoinRule.read.get(item.roomId) === 'restricted' &&
           item.parentId !== containerParentId
         ) {
           // change join rule allow parameter when dragging
           // restricted room from one space to another
-          const joinRuleContent = getStateEvent(
-            itemRoom,
-            StateEvent.RoomJoinRules
-          )?.getContent<RoomJoinRulesEventContent>();
+          const joinRuleContent = ct.state.join.joinRules.read.find(
+            (e) => e.roomId === item.roomId && e.event.state_key === ''
+          )?.event.content;
 
           if (joinRuleContent) {
             const allow =
-              joinRuleContent.allow?.filter((allowRule) => allowRule.room_id !== item.parentId) ??
-              [];
-            allow.push({ type: RestrictedAllowType.RoomMembership, room_id: containerParentId });
-            mx.sendStateEvent(itemRoom.roomId, StateEvent.RoomJoinRules as any, {
-              ...joinRuleContent,
-              allow,
-            });
+              ObjectReader.array(joinRuleContent, 'allow')?.filter(
+                (allowRule) => ObjectReader.string(allowRule, 'room_id') !== item.parentId
+              ) ?? [];
+            const allowCondition: AllowCondition = {
+              type: 'm.room_membership',
+              room_id: containerParentId,
+            };
+            allow.push(allowCondition);
+            ct.requestAuthJSON(
+              putStateEvent({
+                pathParams: {
+                  roomId: item.roomId,
+                  eventType: StateEvent.RoomJoinRules,
+                  stateKey: '',
+                },
+                body: {
+                  ...joinRuleContent,
+                  allow,
+                },
+              })
+            );
           }
         }
 
-        const itemSpaces = Array.from(
+        const itemRooms = Array.from(
           hierarchy?.find((i) => i.space.roomId === containerParentId)?.rooms ?? []
-        );
+        ).filter((i) => i.roomId !== item.roomId);
 
         const beforeItem: HierarchyItem | undefined =
           'space' in containerItem ? undefined : containerItem;
-        const beforeIndex = itemSpaces.findIndex((i) => i.roomId === beforeItem?.roomId);
+        const beforeIndex = itemRooms.findIndex((i) => i.roomId === beforeItem?.roomId);
         const insertIndex = beforeIndex + 1;
 
-        itemSpaces.splice(insertIndex, 0, {
+        itemRooms.splice(insertIndex, 0, {
           ...item,
           parentId: containerParentId,
           content: { ...itemContent, order: undefined },
         });
 
-        const currentOrders = itemSpaces.map((i) => {
+        const currentOrders = itemRooms.map((i) => {
           if (typeof i.content.order === 'string' && lex.has(i.content.order)) {
             return i.content.order;
           }
@@ -347,23 +391,29 @@ export function Lobby() {
 
         const reorders = newOrders
           ?.map((orderKey, index) => ({
-            item: itemSpaces[index],
+            item: itemRooms[index],
             orderKey,
           }))
           .filter((reorder, index) => reorder.item && reorder.orderKey !== currentOrders[index]);
 
         if (reorders) {
           await rateLimitedActions(reorders, async (reorder) => {
-            await mx.sendStateEvent(
-              containerParentId,
-              StateEvent.SpaceChild as any,
-              { ...reorder.item.content, order: reorder.orderKey },
-              reorder.item.roomId
+            const resp = await ct.requestAuthJSON(
+              putStateEvent({
+                pathParams: {
+                  roomId: containerParentId,
+                  eventType: StateEvent.SpaceChild,
+                  stateKey: reorder.item.roomId,
+                },
+                body: { ...reorder.item.content, order: reorder.orderKey },
+              })
             );
+            const [err] = await parseMatrixResp(resp);
+            return err;
           });
         }
       },
-      [mx, hierarchy, lex]
+      [ct, hierarchy, lex]
     )
   );
   const reorderingRoom = reorderRoomState.status === AsyncStatus.Loading;
@@ -388,7 +438,7 @@ export function Lobby() {
   );
 
   const handleSpacesFound = useCallback(
-    (sItems: IHierarchyRoom[]) => {
+    (sItems: SpaceHierarchyRoomChunk[]) => {
       setSpaceRooms({ type: 'PUT', roomIds: sItems.map((i) => i.room_id) });
       setSpacesItem((current) => {
         const newItems = produce(current, (draft) => {
@@ -407,8 +457,10 @@ export function Lobby() {
   const handleOpenRoom: MouseEventHandler<HTMLButtonElement> = (evt) => {
     const rId = evt.currentTarget.getAttribute('data-room-id');
     if (!rId) return;
-    const pSpaceIdOrAlias = getCanonicalAliasOrRoomId(mx, space.roomId);
-    navigate(getSpaceRoomPath(pSpaceIdOrAlias, getCanonicalAliasOrRoomId(mx, rId)));
+    const spaceAlias = ct.roomToAlias.read.get(spaceId);
+    const roomAlias = ct.roomToAlias.read.get(rId);
+
+    navigate(getSpaceRoomPath(spaceAlias ?? spaceId, roomAlias ?? rId));
   };
 
   const togglePinToSidebar = useCallback(
@@ -417,127 +469,134 @@ export function Lobby() {
       if (!sidebarSpaces.has(rId)) {
         newItems.push(rId);
       }
-      const newSpacesContent = makeCinnySpacesContent(mx, newItems);
-      mx.setAccountData(AccountDataEvent.CinnySpaces as any, newSpacesContent as any);
+      const newSpacesContent = makeCinnySpacesContent(newItems, cinnySpacesEvent);
+      ct.requestAuthJSON(
+        putAccountData({
+          pathParams: {
+            userId: ct.session.userId,
+            type: AccountDataType.CinnySpaces,
+          },
+          body: newSpacesContent,
+        })
+      );
     },
-    [mx, sidebarItems, sidebarSpaces]
+    [ct, sidebarItems, sidebarSpaces, cinnySpacesEvent]
   );
 
   return (
-    <PowerLevelsContextProvider value={spacePowerLevels}>
-      <Box grow="Yes">
-        <Page>
-          <LobbyHeader
-            showProfile={!onTop}
-            powerLevels={roomsPowerLevels.get(space.roomId) ?? {}}
-          />
-          <Box style={{ position: 'relative' }} grow="Yes">
-            <Scroll ref={scrollRef} hideTrack visibility="Hover">
-              <PageContent>
-                <PageContentCenter>
-                  <ScrollTopContainer
-                    scrollRef={scrollRef}
-                    anchorRef={heroSectionRef}
-                    onVisibilityChange={setOnTop}
-                  >
-                    <IconButton
-                      onClick={() => virtualizer.scrollToOffset(0)}
-                      variant="SurfaceVariant"
-                      radii="Pill"
-                      outlined
-                      size="300"
-                      aria-label="Scroll to Top"
-                    >
-                      <Icon src={Icons.ChevronTop} size="300" />
-                    </IconButton>
-                  </ScrollTopContainer>
-                  <div
-                    style={{
-                      position: 'relative',
-                      height: virtualizer.getTotalSize(),
-                    }}
-                  >
-                    <PageHeroSection ref={heroSectionRef} style={{ paddingTop: 0 }}>
-                      <LobbyHero />
-                    </PageHeroSection>
-                    {vItems.map((vItem) => {
-                      const item = hierarchy[vItem.index];
-                      if (!item) return null;
-                      const nextSpaceId = hierarchy[vItem.index + 1]?.space.roomId;
-
-                      const categoryId = makeLobbyCategoryId(space.roomId, item.space.roomId);
-
-                      return (
-                        <VirtualTile
-                          virtualItem={vItem}
-                          style={{
-                            paddingTop: vItem.index === 0 ? 0 : config.space.S500,
-                          }}
-                          ref={virtualizer.measureElement}
-                          key={vItem.index}
-                        >
-                          <SpaceHierarchy
-                            spaceItem={item.space}
-                            summary={spacesItems.get(item.space.roomId)}
-                            roomItems={item.rooms}
-                            allJoinedRooms={allJoinedRooms}
-                            mDirects={mDirects}
-                            roomsPowerLevels={roomsPowerLevels}
-                            categoryId={categoryId}
-                            closed={
-                              closedCategories.has(categoryId) ||
-                              (draggingItem ? 'space' in draggingItem : false)
-                            }
-                            handleClose={handleCategoryClick}
-                            draggingItem={draggingItem}
-                            onDragging={setDraggingItem}
-                            canDrop={canDrop}
-                            disabledReorder={reordering}
-                            nextSpaceId={nextSpaceId}
-                            getRoom={getRoom}
-                            pinned={sidebarSpaces.has(item.space.roomId)}
-                            togglePinToSidebar={togglePinToSidebar}
-                            onSpacesFound={handleSpacesFound}
-                            onOpenRoom={handleOpenRoom}
-                          />
-                        </VirtualTile>
-                      );
-                    })}
-                  </div>
-                  {reordering && (
-                    <Box
-                      style={{
-                        position: 'absolute',
-                        bottom: config.space.S400,
-                        left: 0,
-                        right: 0,
-                        zIndex: 2,
-                        pointerEvents: 'none',
-                      }}
-                      justifyContent="Center"
-                    >
-                      <Chip
-                        variant="Secondary"
-                        outlined
-                        radii="Pill"
-                        before={<Spinner variant="Secondary" fill="Soft" size="100" />}
+    <RoomMembersAPIProvider value={membersAPI}>
+      <PowerLevelsContextProvider value={spacePowerLevels}>
+        <PowerLevelTagsContextProvider value={powerLevelTags}>
+          <Box grow="Yes">
+            <Page>
+              <LobbyHeader showProfile={!onTop} powerLevels={roomsPowerLevels.get(spaceId) ?? {}} />
+              <Box style={{ position: 'relative' }} grow="Yes">
+                <Scroll ref={scrollRef} hideTrack visibility="Hover">
+                  <PageContent>
+                    <PageContentCenter>
+                      <ScrollTopContainer
+                        scrollRef={scrollRef}
+                        anchorRef={heroSectionRef}
+                        onVisibilityChange={setOnTop}
                       >
-                        <Text size="L400">Reordering</Text>
-                      </Chip>
-                    </Box>
-                  )}
-                </PageContentCenter>
-              </PageContent>
-            </Scroll>
+                        <IconButton
+                          onClick={() => virtualizer.scrollToOffset(0)}
+                          variant="SurfaceVariant"
+                          radii="Pill"
+                          outlined
+                          size="300"
+                          aria-label="Scroll to Top"
+                        >
+                          <Icon src={Icons.ChevronTop} size="300" />
+                        </IconButton>
+                      </ScrollTopContainer>
+                      <div
+                        style={{
+                          position: 'relative',
+                          height: virtualizer.getTotalSize(),
+                        }}
+                      >
+                        <PageHeroSection ref={heroSectionRef} style={{ paddingTop: 0 }}>
+                          <LobbyHero />
+                        </PageHeroSection>
+                        {vItems.map((vItem) => {
+                          const item = hierarchy[vItem.index];
+                          if (!item) return null;
+                          const nextSpaceId = hierarchy[vItem.index + 1]?.space.roomId;
+
+                          const categoryId = makeLobbyCategoryId(spaceId, item.space.roomId);
+
+                          return (
+                            <VirtualTile
+                              virtualItem={vItem}
+                              style={{
+                                paddingTop: vItem.index === 0 ? 0 : config.space.S500,
+                              }}
+                              ref={virtualizer.measureElement}
+                              key={vItem.index}
+                            >
+                              <SpaceHierarchy
+                                spaceItem={item.space}
+                                summary={spacesItems.get(item.space.roomId)}
+                                roomItems={item.rooms}
+                                allJoinedRooms={allJoinedRooms}
+                                roomsPowerLevels={roomsPowerLevels}
+                                categoryId={categoryId}
+                                closed={
+                                  closedCategories.has(categoryId) ||
+                                  (draggingItem ? 'space' in draggingItem : false)
+                                }
+                                handleClose={handleCategoryClick}
+                                draggingItem={draggingItem}
+                                onDragging={setDraggingItem}
+                                canDrop={canDrop}
+                                disabledReorder={reordering}
+                                nextSpaceId={nextSpaceId}
+                                pinned={sidebarSpaces.has(item.space.roomId)}
+                                togglePinToSidebar={togglePinToSidebar}
+                                onSpacesFound={handleSpacesFound}
+                                onOpenRoom={handleOpenRoom}
+                              />
+                            </VirtualTile>
+                          );
+                        })}
+                      </div>
+                      {reordering && (
+                        <Box
+                          style={{
+                            position: 'absolute',
+                            bottom: config.space.S400,
+                            left: 0,
+                            right: 0,
+                            zIndex: 2,
+                            pointerEvents: 'none',
+                          }}
+                          justifyContent="Center"
+                        >
+                          <Chip
+                            variant="Secondary"
+                            outlined
+                            radii="Pill"
+                            before={<Spinner variant="Secondary" fill="Soft" size="100" />}
+                          >
+                            <Text size="L400">Reordering</Text>
+                          </Chip>
+                        </Box>
+                      )}
+                    </PageContentCenter>
+                  </PageContent>
+                </Scroll>
+              </Box>
+            </Page>
+            {screenSize === ScreenSize.Desktop && isDrawer && (
+              <RoomProvider value={spaceId}>
+                <Line variant="Background" direction="Vertical" size="300" />
+                <MembersDrawer />
+              </RoomProvider>
+            )}
           </Box>
-        </Page>
-        {screenSize === ScreenSize.Desktop && isDrawer && (
-          <>
-            <Line variant="Background" direction="Vertical" size="300" />
-            <MembersDrawer room={space} members={members} />
-          </>
-        )}
-      </Box>
-    </PowerLevelsContextProvider>
+        </PowerLevelTagsContextProvider>
+      </PowerLevelsContextProvider>
+    </RoomMembersAPIProvider>
   );
 }
diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx
index ed526c68..f9692525 100644
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -20,9 +20,7 @@ import FocusTrap from 'focus-trap-react';
 import { PageHeader } from '../../components/page';
 import { useSetSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import { useRoomAvatar, useRoomName } from '../../hooks/useRoomMeta';
 import { useSpace } from '../../hooks/useSpace';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { RoomAvatar } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
 import * as css from './LobbyHeader.css';
@@ -32,12 +30,16 @@ import { LeaveSpacePrompt } from '../../components/leave-space-prompt';
 import { stopPropagation } from '../../utils/keyboard';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../components/BackRouteHandler';
-import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
+import { useClient } from '../../hooks/useClient';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 type LobbyMenuProps = {
   powerLevels: IPowerLevels;
@@ -45,12 +47,12 @@ type LobbyMenuProps = {
 };
 const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
   ({ powerLevels, requestClose }, ref) => {
-    const mx = useMatrixClient();
-    const space = useSpace();
-    const creators = useRoomCreators(space);
+    const ct = useClient();
+    const spaceId = useSpace();
+    const creators = useRoomCreators(spaceId);
 
     const permissions = useRoomPermissions(creators, powerLevels);
-    const canInvite = permissions.action('invite', mx.getSafeUserId());
+    const canInvite = permissions.action('invite', ct.session.userId);
     const openSpaceSettings = useOpenSpaceSettings();
 
     const [invitePrompt, setInvitePrompt] = useState(false);
@@ -60,7 +62,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
     };
 
     const handleRoomSettings = () => {
-      openSpaceSettings(space.roomId);
+      openSpaceSettings(spaceId);
       requestClose();
     };
 
@@ -68,7 +70,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
       <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
         {invitePrompt && (
           <InviteUserPrompt
-            room={space}
+            roomId={spaceId}
             requestClose={() => {
               setInvitePrompt(false);
               requestClose();
@@ -121,7 +123,7 @@ const LobbyMenu = forwardRef<HTMLDivElement, LobbyMenuProps>(
                 </MenuItem>
                 {promptLeave && (
                   <LeaveSpacePrompt
-                    roomId={space.roomId}
+                    roomId={spaceId}
                     onDone={requestClose}
                     onCancel={() => setPromptLeave(false)}
                   />
@@ -140,19 +142,28 @@ type LobbyHeaderProps = {
   powerLevels: IPowerLevels;
 };
 export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const space = useSpace();
+  const spaceId = useSpace();
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const screenSize = useScreenSizeContext();
 
-  const name = useRoomName(space);
-  const avatarMxc = useRoomAvatar(space);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(spaceId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const avatarMxc = getRoomAvatar(spaceId);
   const avatarUrl = avatarMxc
-    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
+  const name = getRoomName(spaceId) ?? 'Unknown';
+
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setMenuAnchor(evt.currentTarget.getBoundingClientRect());
   };
@@ -187,7 +198,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
                 <>
                   <Avatar size="300">
                     <RoomAvatar
-                      roomId={space.roomId}
+                      roomId={spaceId}
                       src={avatarUrl}
                       alt={name}
                       renderFallback={() => <Text size="H4">{nameInitials(name)}</Text>}
diff --git a/src/app/features/lobby/LobbyHero.tsx b/src/app/features/lobby/LobbyHero.tsx
index 1cd0b8e2..e6fa24d0 100644
--- a/src/app/features/lobby/LobbyHero.tsx
+++ b/src/app/features/lobby/LobbyHero.tsx
@@ -1,9 +1,7 @@
 import React from 'react';
 import { Avatar, Overlay, OverlayBackdrop, OverlayCenter, Text } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { useRoomAvatar, useRoomName, useRoomTopic } from '../../hooks/useRoomMeta';
 import { useSpace } from '../../hooks/useSpace';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { RoomAvatar } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
 import { UseStateProvider } from '../../components/UseStateProvider';
@@ -11,25 +9,41 @@ import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import * as css from './LobbyHero.css';
 import { PageHero } from '../../components/page';
 import { onEnterOrSpace, stopPropagation } from '../../utils/keyboard';
-import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useClient } from '../../hooks/useClient';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
+import { useRoomTopic } from '../../hooks/storage/useRoomTopic';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 export function LobbyHero() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const space = useSpace();
+  const spaceId = useSpace();
 
-  const name = useRoomName(space);
-  const topic = useRoomTopic(space);
-  const avatarMxc = useRoomAvatar(space);
-  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96, 'crop') ?? undefined : undefined;
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(spaceId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const topic = useRoomTopic(spaceId);
+
+  const avatarMxc = getRoomAvatar(spaceId);
+  const avatarUrl = avatarMxc
+    ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
+    : undefined;
+
+  const name = getRoomName(spaceId) ?? 'Unknown';
 
   return (
     <PageHero
       icon={
         <Avatar size="500">
           <RoomAvatar
-            roomId={space.roomId}
+            roomId={spaceId}
             src={avatarUrl}
             alt={name}
             renderFallback={() => <Text size="H4">{nameInitials(name)}</Text>}
diff --git a/src/app/features/lobby/RoomItem.tsx b/src/app/features/lobby/RoomItem.tsx
index 7de59acd..8db5506e 100644
--- a/src/app/features/lobby/RoomItem.tsx
+++ b/src/app/features/lobby/RoomItem.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, ReactNode, useCallback, useRef } from 'react';
+import React, { MouseEventHandler, ReactNode, useCallback, useRef, useState } from 'react';
 import {
   Avatar,
   Badge,
@@ -13,72 +13,90 @@ import {
   Spinner,
   Text,
   Tooltip,
-  TooltipProvider,
   as,
   color,
   toRem,
+  PopOut,
+  RectCords,
+  IconButton,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { JoinRule, MatrixError, Room } from 'matrix-js-sdk';
-import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
+import { SpaceHierarchyRoomChunk } from 'neurone/lib/api/types';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { postJoin } from 'neurone/lib/api/matrix/client/v3/join';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { SequenceCard } from '../../components/sequence-card';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
 import { millify } from '../../plugins/millify';
 import { LocalRoomSummaryLoader } from '../../components/RoomSummaryLoader';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import { onEnterOrSpace, stopPropagation } from '../../utils/keyboard';
-import { Membership } from '../../../types/matrix/room';
+import { JoinRule } from '../../../types/matrix/room';
 import * as css from './RoomItem.css';
 import * as styleCss from './style.css';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
 import { ItemDraggableTarget, useDraggableItem } from './DnD';
-import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
+import { useClient } from '../../hooks/useClient';
+import { BreakWord } from '../../styles/Text.css';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 type RoomJoinButtonProps = {
   roomId: string;
   via?: string[];
 };
 function RoomJoinButton({ roomId, via }: RoomJoinButtonProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
-  const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
-    useCallback(() => mx.joinRoom(roomId, { viaServers: via }), [mx, roomId, via])
+  const [joinState, join] = useAsyncCallback(
+    useCallback(async () => {
+      const resp = await ct.requestAuthJSON(
+        postJoin({
+          pathParams: { roomIdOrAlias: roomId },
+          searchParams: { via, server_name: via },
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(printMatrixError(err));
+    }, [ct, roomId, via])
   );
 
   const canJoin = joinState.status === AsyncStatus.Idle || joinState.status === AsyncStatus.Error;
 
+  const [cords, setCords] = useState<RectCords>();
+  const handleErrorMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
   return (
     <Box shrink="No" gap="200" alignItems="Center">
       {joinState.status === AsyncStatus.Error && (
-        <TooltipProvider
-          tooltip={
+        <PopOut
+          anchor={cords}
+          content={
             <Tooltip variant="Critical" style={{ maxWidth: toRem(200) }}>
               <Box direction="Column" gap="100">
-                <Text style={{ wordBreak: 'break-word' }} size="T400">
-                  {joinState.error.data?.error || joinState.error.message}
+                <Text className={BreakWord} size="T400">
+                  {typeof joinState.error === 'object' && joinState.error instanceof Error
+                    ? joinState.error.message
+                    : 'Unknown error'}
                 </Text>
-                <Text size="T200">{joinState.error.name}</Text>
               </Box>
             </Tooltip>
           }
         >
-          {(triggerRef) => (
+          <IconButton variant="SurfaceVariant" radii="300" size="300" onClick={handleErrorMenu}>
             <Icon
-              ref={triggerRef}
               style={{ color: color.Critical.Main, cursor: 'pointer' }}
               src={Icons.Warning}
-              size="400"
+              size="200"
               filled
               tabIndex={0}
-              aria-label={joinState.error.data?.error || joinState.error.message}
+              aria-label="Join room error message"
             />
-          )}
-        </TooltipProvider>
+          </IconButton>
+        </PopOut>
       )}
       <Chip
         variant="Secondary"
@@ -135,11 +153,7 @@ function RoomProfileError({ roomId, suggested, inaccessibleRoom, via }: RoomProf
           src={undefined}
           alt={roomId}
           renderFallback={() => (
-            <RoomIcon
-              size="300"
-              joinRule={inaccessibleRoom ? JoinRule.Invite : JoinRule.Restricted}
-              filled
-            />
+            <RoomIcon size="300" joinRule={inaccessibleRoom ? 'invite' : 'restricted'} filled />
           )}
         />
       </Avatar>
@@ -279,18 +293,17 @@ function RoomProfile({
 type RoomItemCardProps = {
   item: HierarchyItem;
   loading: boolean;
-  error: Error | null;
-  summary: IHierarchyRoom | undefined;
-  dm?: boolean;
+  error: unknown;
+  summary: SpaceHierarchyRoomChunk | undefined;
   firstChild?: boolean;
   lastChild?: boolean;
   onOpen: MouseEventHandler<HTMLButtonElement>;
+  joined?: boolean;
   options?: ReactNode;
   before?: ReactNode;
   after?: ReactNode;
   onDragging: (item?: HierarchyItem) => void;
   canReorder: boolean;
-  getRoom: (roomId: string) => Room | undefined;
 };
 export const RoomItemCard = as<'div', RoomItemCardProps>(
   (
@@ -299,28 +312,24 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
       loading,
       error,
       summary,
-      dm,
       onOpen,
+      joined,
       options,
       before,
       after,
       onDragging,
       canReorder,
-      getRoom,
       ...props
     },
     ref
   ) => {
-    const mx = useMatrixClient();
+    const ct = useClient();
     const useAuthentication = useMediaAuthentication();
     const { roomId, content } = item;
-    const room = getRoom(roomId);
     const targetRef = useRef<HTMLDivElement>(null);
     const targetHandleRef = useRef<HTMLDivElement>(null);
     useDraggableItem(item, targetRef, onDragging, targetHandleRef);
 
-    const joined = room?.getMyMembership() === Membership.Join;
-
     return (
       <SequenceCard
         className={css.RoomItemCard}
@@ -333,18 +342,26 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
         {before}
         <Box ref={canReorder ? targetRef : null} grow="Yes">
           {canReorder && <ItemDraggableTarget ref={targetHandleRef} />}
-          {room ? (
-            <LocalRoomSummaryLoader room={room}>
+          {joined ? (
+            <LocalRoomSummaryLoader roomId={roomId}>
               {(localSummary) => (
                 <RoomProfile
                   roomId={roomId}
                   roomType={localSummary.roomType}
-                  name={localSummary.name}
+                  name={localSummary.name ?? 'Unknown'}
                   topic={localSummary.topic}
                   avatarUrl={
-                    dm
-                      ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                      : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                    localSummary.avatarUrl
+                      ? mxcToHttp(
+                          ct.session.baseUrl,
+                          localSummary.avatarUrl,
+                          useAuthentication
+                        ).thumbnail({
+                          width: 96,
+                          height: 96,
+                          method: 'crop',
+                        })
+                      : undefined
                   }
                   memberCount={localSummary.memberCount}
                   suggested={content.suggested}
@@ -402,13 +419,20 @@ export const RoomItemCard = as<'div', RoomItemCardProps>(
                   topic={summary.topic}
                   avatarUrl={
                     summary?.avatar_url
-                      ? mxcUrlToHttp(mx, summary.avatar_url, useAuthentication, 96, 96, 'crop') ??
-                        undefined
+                      ? mxcToHttp(
+                          ct.session.baseUrl,
+                          summary.avatar_url,
+                          useAuthentication
+                        ).thumbnail({
+                          width: 96,
+                          height: 96,
+                          method: 'crop',
+                        })
                       : undefined
                   }
                   memberCount={summary.num_joined_members}
                   suggested={content.suggested}
-                  joinRule={summary.join_rule}
+                  joinRule={summary.join_rule as JoinRule}
                   options={<RoomJoinButton roomId={roomId} via={content.via} />}
                 />
               )}
diff --git a/src/app/features/lobby/SpaceHierarchy.tsx b/src/app/features/lobby/SpaceHierarchy.tsx
index 280b8a5a..7178feb2 100644
--- a/src/app/features/lobby/SpaceHierarchy.tsx
+++ b/src/app/features/lobby/SpaceHierarchy.tsx
@@ -1,7 +1,6 @@
 import React, { forwardRef, MouseEventHandler, useEffect, useMemo } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
-import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
 import { Box, config, Text } from 'folds';
+import { SpaceHierarchyRoomChunk } from 'neurone/lib/api/types';
 import {
   HierarchyItem,
   HierarchyItemRoom,
@@ -9,22 +8,22 @@ import {
   useFetchSpaceHierarchyLevel,
 } from '../../hooks/useSpaceHierarchy';
 import { IPowerLevels } from '../../hooks/usePowerLevels';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { SpaceItemCard } from './SpaceItem';
 import { AfterItemDropTarget, CanDropCallback } from './DnD';
 import { HierarchyItemMenu } from './HierarchyItemMenu';
 import { RoomItemCard } from './RoomItem';
 import { RoomType, StateEvent } from '../../../types/matrix/room';
 import { SequenceCard } from '../../components/sequence-card';
-import { getRoomCreatorsForRoomId } from '../../hooks/useRoomCreators';
 import { getRoomPermissionsAPI } from '../../hooks/useRoomPermissions';
+import { useClient } from '../../hooks/useClient';
+import { rError } from '../../../client/reader';
+import { ErrorCode } from '../../cs-errorcode';
 
 type SpaceHierarchyProps = {
-  summary: IHierarchyRoom | undefined;
+  summary: SpaceHierarchyRoomChunk | undefined;
   spaceItem: HierarchyItemSpace;
   roomItems?: HierarchyItemRoom[];
   allJoinedRooms: Set<string>;
-  mDirects: Set<string>;
   roomsPowerLevels: Map<string, IPowerLevels>;
   categoryId: string;
   closed: boolean;
@@ -34,10 +33,9 @@ type SpaceHierarchyProps = {
   canDrop: CanDropCallback;
   disabledReorder?: boolean;
   nextSpaceId?: string;
-  getRoom: (roomId: string) => Room | undefined;
   pinned: boolean;
   togglePinToSidebar: (roomId: string) => void;
-  onSpacesFound: (spaceItems: IHierarchyRoom[]) => void;
+  onSpacesFound: (spaceItems: SpaceHierarchyRoomChunk[]) => void;
   onOpenRoom: MouseEventHandler<HTMLButtonElement>;
 };
 export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
@@ -47,7 +45,6 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
       spaceItem,
       roomItems,
       allJoinedRooms,
-      mDirects,
       roomsPowerLevels,
       categoryId,
       closed,
@@ -57,7 +54,6 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
       canDrop,
       disabledReorder,
       nextSpaceId,
-      getRoom,
       pinned,
       togglePinToSidebar,
       onOpenRoom,
@@ -65,12 +61,11 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
     },
     ref
   ) => {
-    const mx = useMatrixClient();
-
+    const ct = useClient();
     const { fetching, error, rooms } = useFetchSpaceHierarchyLevel(spaceItem.roomId, true);
 
     const subspaces = useMemo(() => {
-      const s: Map<string, IHierarchyRoom> = new Map();
+      const s: Map<string, SpaceHierarchyRoomChunk> = new Map();
       rooms.forEach((r) => {
         if (r.room_type === RoomType.Space) {
           s.set(r.room_id, r);
@@ -80,7 +75,7 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
     }, [rooms]);
 
     const spacePowerLevels = roomsPowerLevels.get(spaceItem.roomId);
-    const spaceCreators = getRoomCreatorsForRoomId(mx, spaceItem.roomId);
+    const spaceCreators = ct.roomToCreators.read.get(spaceItem.roomId);
     const spacePermissions =
       spacePowerLevels && getRoomPermissionsAPI(spaceCreators, spacePowerLevels);
 
@@ -89,21 +84,19 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
 
     const { parentId } = spaceItem;
     const parentPowerLevels = parentId ? roomsPowerLevels.get(parentId) : undefined;
-    const parentCreators = parentId ? getRoomCreatorsForRoomId(mx, parentId) : undefined;
+    const parentCreators = parentId ? ct.roomToCreators.read.get(parentId) : undefined;
     const parentPermissions =
-      parentCreators &&
-      parentPowerLevels &&
-      getRoomPermissionsAPI(parentCreators, parentPowerLevels);
+      parentPowerLevels && getRoomPermissionsAPI(parentCreators, parentPowerLevels);
 
     useEffect(() => {
       onSpacesFound(Array.from(subspaces.values()));
     }, [subspaces, onSpacesFound]);
 
     let childItems = roomItems?.filter((i) => !subspaces.has(i.roomId));
-    if (!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())) {
+    if (!spacePermissions?.stateEvent(StateEvent.SpaceChild, ct.session.userId)) {
       // hide unknown rooms for normal user
       childItems = childItems?.filter((i) => {
-        const forbidden = error instanceof MatrixError ? error.errcode === 'M_FORBIDDEN' : false;
+        const forbidden = rError.errcode(error) === ErrorCode.M_FORBIDDEN;
         const inaccessibleRoom = !rooms.get(i.roomId) && !fetching && (error ? forbidden : true);
         return !inaccessibleRoom;
       });
@@ -119,11 +112,10 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
           categoryId={categoryId}
           closed={closed}
           handleClose={handleClose}
-          getRoom={getRoom}
-          canEditChild={!!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())}
+          canEditChild={!!spacePermissions?.stateEvent(StateEvent.SpaceChild, ct.session.userId)}
           canReorder={
-            parentPowerLevels && !disabledReorder && parentPermissions
-              ? parentPermissions.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+            !disabledReorder && parentPermissions
+              ? parentPermissions.stateEvent(StateEvent.SpaceChild, ct.session.userId)
               : false
           }
           options={
@@ -134,7 +126,7 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
                 powerLevels={spacePowerLevels}
                 joined={allJoinedRooms.has(spaceItem.roomId)}
                 canEditChild={
-                  !!parentPermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+                  !!parentPermissions?.stateEvent(StateEvent.SpaceChild, ct.session.userId)
                 }
                 pinned={pinned}
                 onTogglePin={togglePinToSidebar}
@@ -159,8 +151,8 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
 
               const roomPowerLevels = roomsPowerLevels.get(roomItem.roomId) ?? {};
 
-              const lastItem = index === childItems.length;
-              const nextRoomId = lastItem ? nextSpaceId : childItems[index + 1]?.roomId;
+              const lastItem = index === childItems?.length;
+              const nextRoomId = lastItem ? nextSpaceId : childItems?.[index + 1]?.roomId;
 
               const roomDragging =
                 draggingItem?.roomId === roomItem.roomId &&
@@ -173,11 +165,10 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
                   loading={fetching}
                   error={error}
                   summary={roomSummary}
-                  dm={mDirects.has(roomItem.roomId)}
                   onOpen={onOpenRoom}
-                  getRoom={getRoom}
+                  joined={allJoinedRooms.has(roomItem.roomId)}
                   canReorder={
-                    !!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId()) &&
+                    !!spacePermissions?.stateEvent(StateEvent.SpaceChild, ct.session.userId) &&
                     !disabledReorder
                   }
                   options={
@@ -186,7 +177,7 @@ export const SpaceHierarchy = forwardRef<HTMLDivElement, SpaceHierarchyProps>(
                       powerLevels={roomPowerLevels}
                       joined={allJoinedRooms.has(roomItem.roomId)}
                       canEditChild={
-                        !!spacePermissions?.stateEvent(StateEvent.SpaceChild, mx.getSafeUserId())
+                        !!spacePermissions?.stateEvent(StateEvent.SpaceChild, ct.session.userId)
                       }
                     />
                   }
diff --git a/src/app/features/lobby/SpaceItem.tsx b/src/app/features/lobby/SpaceItem.tsx
index ed3eaff9..64a86d44 100644
--- a/src/app/features/lobby/SpaceItem.tsx
+++ b/src/app/features/lobby/SpaceItem.tsx
@@ -1,4 +1,11 @@
-import React, { MouseEventHandler, ReactNode, useCallback, useRef, useState } from 'react';
+import React, {
+  Fragment,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useRef,
+  useState,
+} from 'react';
 import {
   Box,
   Avatar,
@@ -18,26 +25,28 @@ import {
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import classNames from 'classnames';
-import { MatrixError, Room } from 'matrix-js-sdk';
-import { IHierarchyRoom } from 'matrix-js-sdk/lib/@types/spaces';
+import { postJoin } from 'neurone/lib/api/matrix/client/v3/join';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { SpaceHierarchyRoomChunk } from 'neurone/lib/api/types';
 import { HierarchyItem } from '../../hooks/useSpaceHierarchy';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { RoomAvatar } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
-import { LocalRoomSummaryLoader } from '../../components/RoomSummaryLoader';
-import { getRoomAvatarUrl } from '../../utils/room';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import * as css from './SpaceItem.css';
 import * as styleCss from './style.css';
 import { useDraggableItem } from './DnD';
 import { stopPropagation } from '../../utils/keyboard';
-import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenCreateRoomModal } from '../../state/hooks/createRoomModal';
 import { useOpenCreateSpaceModal } from '../../state/hooks/createSpaceModal';
 import { AddExistingModal } from '../add-existing';
 import { CreateRoomType } from '../../components/create-room/types';
 import { BetaNoticeBadge } from '../../components/BetaNoticeBadge';
+import { useClient } from '../../hooks/useClient';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 function SpaceProfileLoading() {
   return (
@@ -110,10 +119,19 @@ function UnjoinedSpaceProfile({
   avatarUrl,
   suggested,
 }: UnjoinedSpaceProfileProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
-  const [joinState, join] = useAsyncCallback<Room, MatrixError, []>(
-    useCallback(() => mx.joinRoom(roomId, { viaServers: via }), [mx, roomId, via])
+  const [joinState, join] = useAsyncCallback(
+    useCallback(async () => {
+      const resp = await ct.requestAuthJSON(
+        postJoin({
+          pathParams: { roomIdOrAlias: roomId },
+          searchParams: { via, server_name: via },
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(printMatrixError(err));
+    }, [ct, roomId, via])
   );
 
   const canJoin = joinState.status === AsyncStatus.Idle || joinState.status === AsyncStatus.Error;
@@ -154,7 +172,7 @@ function UnjoinedSpaceProfile({
         {joinState.status === AsyncStatus.Error && (
           <Badge variant="Critical" fill="Soft" radii="Pill" outlined>
             <Text size="L400" truncate>
-              {joinState.error.name}
+              Error
             </Text>
           </Badge>
         )}
@@ -165,22 +183,28 @@ function UnjoinedSpaceProfile({
 
 type SpaceProfileProps = {
   roomId: string;
-  name: string;
-  avatarUrl?: string;
   suggested?: boolean;
   closed: boolean;
   categoryId: string;
   handleClose?: MouseEventHandler<HTMLButtonElement>;
 };
-function SpaceProfile({
-  roomId,
-  name,
-  avatarUrl,
-  suggested,
-  closed,
-  categoryId,
-  handleClose,
-}: SpaceProfileProps) {
+function SpaceProfile({ roomId, suggested, closed, categoryId, handleClose }: SpaceProfileProps) {
+  const ct = useClient();
+  const useAuthentication = useMediaAuthentication();
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const name = getRoomName(roomId) ?? 'Unknown';
+  const avatar = getRoomAvatar(roomId);
+  const avatarUrl = avatar
+    ? mxcToHttp(ct.session.baseUrl, avatar, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
+    : undefined;
+
   return (
     <Chip
       data-category-id={categoryId}
@@ -330,7 +354,7 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
   };
 
   const handleCreateSpace = () => {
-    openCreateSpaceModal(item.roomId as any);
+    openCreateSpaceModal(item.roomId);
     setCords(undefined);
   };
 
@@ -388,7 +412,7 @@ function AddSpaceButton({ item }: { item: HierarchyItem }) {
 }
 
 type SpaceItemCardProps = {
-  summary: IHierarchyRoom | undefined;
+  summary: SpaceHierarchyRoomChunk | undefined;
   loading?: boolean;
   item: HierarchyItem;
   joined?: boolean;
@@ -401,7 +425,6 @@ type SpaceItemCardProps = {
   canEditChild: boolean;
   canReorder: boolean;
   onDragging: (item?: HierarchyItem) => void;
-  getRoom: (roomId: string) => Room | undefined;
 };
 export const SpaceItemCard = as<'div', SpaceItemCardProps>(
   (
@@ -420,15 +443,13 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
       canEditChild,
       canReorder,
       onDragging,
-      getRoom,
       ...props
     },
     ref
   ) => {
-    const mx = useMatrixClient();
+    const ct = useClient();
     const useAuthentication = useMediaAuthentication();
     const { roomId, content } = item;
-    const space = getRoom(roomId);
     const targetRef = useRef<HTMLDivElement>(null);
     useDraggableItem(item, targetRef, onDragging);
 
@@ -444,28 +465,25 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
         {before}
         <Box grow="Yes" gap="100" alignItems="Inherit" justifyContent="SpaceBetween">
           <Box ref={canReorder ? targetRef : null}>
-            {space ? (
-              <LocalRoomSummaryLoader room={space}>
-                {(localSummary) =>
-                  item.parentId ? (
-                    <SpaceProfile
-                      roomId={roomId}
-                      name={localSummary.name}
-                      avatarUrl={getRoomAvatarUrl(mx, space, 96, useAuthentication)}
-                      suggested={content.suggested}
-                      closed={closed}
-                      categoryId={categoryId}
-                      handleClose={handleClose}
-                    />
-                  ) : (
-                    <RootSpaceProfile
-                      closed={closed}
-                      categoryId={categoryId}
-                      handleClose={handleClose}
-                    />
-                  )
-                }
-              </LocalRoomSummaryLoader>
+            {joined ? (
+              <>
+                {item.parentId && (
+                  <SpaceProfile
+                    roomId={roomId}
+                    suggested={content.suggested}
+                    closed={closed}
+                    categoryId={categoryId}
+                    handleClose={handleClose}
+                  />
+                )}
+                {!item.parentId && (
+                  <RootSpaceProfile
+                    closed={closed}
+                    categoryId={categoryId}
+                    handleClose={handleClose}
+                  />
+                )}
+              </>
             ) : (
               <>
                 {!summary &&
@@ -484,8 +502,11 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
                     name={summary.name || summary.canonical_alias || roomId}
                     avatarUrl={
                       summary?.avatar_url
-                        ? mxcUrlToHttp(mx, summary.avatar_url, useAuthentication, 96, 96, 'crop') ??
-                          undefined
+                        ? mxcToHttp(
+                            ct.session.baseUrl,
+                            summary.avatar_url,
+                            useAuthentication
+                          ).thumbnail({ width: 96, height: 96, method: 'crop' }) ?? undefined
                         : undefined
                     }
                     suggested={content.suggested}
@@ -494,7 +515,7 @@ export const SpaceItemCard = as<'div', SpaceItemCardProps>(
               </>
             )}
           </Box>
-          {space && canEditChild && (
+          {joined && canEditChild && (
             <Box shrink="No" alignItems="Inherit" gap="200">
               <AddRoomButton item={item} />
               {item.parentId === undefined && <AddSpaceButton item={item} />}
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index ff9565b2..71d0dc77 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -318,6 +318,7 @@ export function RoomNavItem({
                   filled={selected}
                   size="100"
                   joinRule={joinRule}
+                  roomType={ct.roomToType.read.get(roomId)}
                 />
               )}
             </Avatar>
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index a18fb35d..29d5e351 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -341,7 +341,12 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
                 src={avatarUrl}
                 alt={name}
                 renderFallback={() => (
-                  <RoomIcon size="200" joinRule={roomToJoinRule.get(roomId)} filled />
+                  <RoomIcon
+                    size="200"
+                    joinRule={roomToJoinRule.get(roomId)}
+                    roomType={ct.roomToType.read.get(roomId)}
+                    filled
+                  />
                 )}
               />
             </Avatar>
diff --git a/src/app/hooks/useLocalRoomSummary.ts b/src/app/hooks/useLocalRoomSummary.ts
index 4802a3cf..9f105cff 100644
--- a/src/app/hooks/useLocalRoomSummary.ts
+++ b/src/app/hooks/useLocalRoomSummary.ts
@@ -13,7 +13,7 @@ export type LocalRoomSummary = {
   avatarUrl?: string;
   canonicalAlias?: string;
   memberCount?: number;
-  space?: boolean;
+  roomType?: string;
   joinRule?: JoinRule;
 };
 export const useLocalRoomSummary = (roomId: string): LocalRoomSummary => {
@@ -25,7 +25,7 @@ export const useLocalRoomSummary = (roomId: string): LocalRoomSummary => {
   const roomToAlias = useObservableValue(ct.roomToAlias);
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
   const roomToSummary = useObservableValue(ct.roomToSummary);
-  const spaceRooms = useObservableValue(ct.spaceRooms);
+  const roomToType = useObservableValue(ct.roomToType);
 
   return {
     roomId,
@@ -34,7 +34,7 @@ export const useLocalRoomSummary = (roomId: string): LocalRoomSummary => {
     avatarUrl: getRoomAvatar(roomId),
     canonicalAlias: roomToAlias.get(roomId),
     memberCount: roomToSummary.get(roomId)?.['m.joined_member_count'],
-    space: spaceRooms.has(roomId),
+    roomType: roomToType.get(roomId),
     joinRule: roomToJoinRule.get(roomId),
   };
 };
diff --git a/src/app/hooks/usePowerLevels.ts b/src/app/hooks/usePowerLevels.ts
index 52c9c566..631b5395 100644
--- a/src/app/hooks/usePowerLevels.ts
+++ b/src/app/hooks/usePowerLevels.ts
@@ -1,11 +1,8 @@
-import { MatrixEvent, Room } from 'matrix-js-sdk';
-import { createContext, useCallback, useContext, useMemo, useState } from 'react';
+import { MatrixEvent } from 'matrix-js-sdk';
+import { createContext, useCallback, useContext, useMemo } from 'react';
 import produce from 'immer';
 import { PendingObservableResult } from 'neurone/lib/utils/observable';
 import { StateEvent, StateEventType } from '../../types/matrix/room';
-import { useStateEventCallback } from './useStateEventCallback';
-import { useMatrixClient } from './useMatrixClient';
-import { getStateEvent } from '../utils/room';
 import { getJoinRoomStateId, JoinRoomStateObject } from '../../client/storage/collections';
 import { useClient } from './useClient';
 import { useObservableValuePromise } from './useObservableValue';
@@ -84,12 +81,14 @@ export function usePowerLevelsState(
   return useObservableValuePromise(eventObservablePromise);
 }
 
-export function usePowerLevels(eventObj: JoinRoomStateObject | undefined): IPowerLevels {
-  const powerLevels: IPowerLevels = useMemo(() => {
-    const content: IPowerLevels | undefined = eventObj?.event.content;
+function parsePowerLevels(eventObj?: JoinRoomStateObject): IPowerLevels {
+  const content: IPowerLevels | undefined = eventObj?.event.content;
 
-    return !content ? DEFAULT_POWER_LEVELS : fillMissingPowers(content);
-  }, [eventObj]);
+  return !content ? DEFAULT_POWER_LEVELS : fillMissingPowers(content);
+}
+
+export function usePowerLevels(eventObj: JoinRoomStateObject | undefined): IPowerLevels {
+  const powerLevels: IPowerLevels = useMemo(() => parsePowerLevels(eventObj), [eventObj]);
 
   return powerLevels;
 }
@@ -104,38 +103,27 @@ export const usePowerLevelsContext = (): IPowerLevels => {
   return pl;
 };
 
-export const useRoomsPowerLevels = (rooms: Room[]): Map<string, IPowerLevels> => {
-  const mx = useMatrixClient();
-  const getRoomsPowerLevels = useCallback(() => {
-    const rToPl = new Map<string, IPowerLevels>();
+export const useRoomsPowerLevels = (rooms: string[]): Map<string, IPowerLevels> => {
+  const ct = useClient();
+  const powerLevelEventsPromise = useMemo(
+    () => ct.storage.joinRoomState.observableRead.queryIndex('type', StateEvent.RoomPowerLevels),
+    [ct]
+  );
+  const plEventsResult = useObservableValuePromise(powerLevelEventsPromise);
 
-    rooms.forEach((room) => {
-      const mEvent = getStateEvent(room, StateEvent.RoomPowerLevels, '');
-      rToPl.set(room.roomId, getPowersLevelFromMatrixEvent(mEvent));
+  const roomToPowerLevels: Map<string, IPowerLevels> = useMemo(() => {
+    const rToP = new Map<string, IPowerLevels>();
+
+    console.log(plEventsResult.value?.find((v) => v.roomId === '!KqyBSJuhpIHbWaROMB:kde.org'));
+    rooms.forEach((roomId) => {
+      const evtObj = plEventsResult.value?.find(
+        (o) => o.roomId === roomId && o.event.state_key === ''
+      );
+      rToP.set(roomId, parsePowerLevels(evtObj));
     });
 
-    return rToPl;
-  }, [rooms]);
-
-  const [roomToPowerLevels, setRoomToPowerLevels] = useState(() => getRoomsPowerLevels());
-
-  useStateEventCallback(
-    mx,
-    useCallback(
-      (event) => {
-        const roomId = event.getRoomId();
-        if (
-          roomId &&
-          event.getType() === StateEvent.RoomPowerLevels &&
-          event.getStateKey() === '' &&
-          rooms.find((r) => r.roomId === roomId)
-        ) {
-          setRoomToPowerLevels(getRoomsPowerLevels());
-        }
-      },
-      [rooms, getRoomsPowerLevels]
-    )
-  );
+    return rToP;
+  }, [plEventsResult, rooms]);
 
   return roomToPowerLevels;
 };
diff --git a/src/app/hooks/useSpaceHierarchy.ts b/src/app/hooks/useSpaceHierarchy.ts
index 8379fd86..f2031de0 100644
--- a/src/app/hooks/useSpaceHierarchy.ts
+++ b/src/app/hooks/useSpaceHierarchy.ts
@@ -95,7 +95,8 @@ const getSpaceHierarchy = (
   rootSpaceId: string,
   roomToChildEvents: Map<string, StateEventWithoutRoomId<SpaceChildContent>[]>,
   spaceRooms: Set<string>,
-  spaceRoomsCache: Set<string>
+  spaceRoomsCache: Set<string>,
+  closedCategory: (spaceId: string) => boolean
 ): SpaceHierarchy[] => {
   const spaceItems: HierarchyItemSpace[] = getHierarchySpaces(
     rootSpaceId,
@@ -106,6 +107,9 @@ const getSpaceHierarchy = (
 
   const hierarchy: SpaceHierarchy[] = spaceItems.map((spaceItem) => {
     const childEvents = roomToChildEvents.get(spaceItem.roomId);
+    if (!spaceRooms.has(spaceItem.roomId) || closedCategory(spaceItem.roomId)) {
+      return { space: spaceItem };
+    }
 
     const childItems: HierarchyItemRoom[] = [];
     childEvents?.forEach((childEvent) => {
@@ -131,15 +135,19 @@ const getSpaceHierarchy = (
   return hierarchy;
 };
 
-export const useSpaceHierarchy = (spaceId: string): SpaceHierarchy[] => {
+export const useSpaceHierarchy = (
+  spaceId: string,
+  closedCategory: (spaceId: string) => boolean
+): SpaceHierarchy[] => {
   const ct = useClient();
   const roomToChildEvents = useObservableValue(ct.roomToChildEvents);
   const spaceRooms = useObservableValue(ct.spaceRooms);
   const spaceRoomsCache = useAtomValue(spaceRoomsAtom);
 
   const hierarchy = useMemo(
-    () => getSpaceHierarchy(spaceId, roomToChildEvents, spaceRooms, spaceRoomsCache),
-    [spaceId, roomToChildEvents, spaceRooms, spaceRoomsCache]
+    () =>
+      getSpaceHierarchy(spaceId, roomToChildEvents, spaceRooms, spaceRoomsCache, closedCategory),
+    [spaceId, roomToChildEvents, spaceRooms, spaceRoomsCache, closedCategory]
   );
 
   return hierarchy;
@@ -216,7 +224,7 @@ const PER_PAGE_COUNT = 100;
 const MAX_AUTO_PAGE_COUNT = 50;
 export type FetchSpaceHierarchyLevelData = {
   fetching: boolean;
-  error: Error | null;
+  error: unknown;
   rooms: Map<string, SpaceHierarchyRoomChunk>;
 };
 export const useFetchSpaceHierarchyLevel = (
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index c5318e06..0fec4863 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -230,8 +230,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
               element={<WelcomePage />}
             />
           )}
-          {/* <Route path={_LOBBY_PATH} element={<Lobby />} />
-          <Route path={_SEARCH_PATH} element={<SpaceSearch />} /> */}
+          <Route path={_LOBBY_PATH} element={<Lobby />} />
+          {/*<Route path={_SEARCH_PATH} element={<SpaceSearch />} /> */}
           <Route
             path={_ROOM_PATH}
             element={
diff --git a/src/client/context.ts b/src/client/context.ts
index 78bf0533..7c889907 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -1,6 +1,7 @@
 import { ComputedObservableValue, ObservableValue } from 'neurone/lib/utils/observable';
 import { MatrixRequest } from 'neurone/lib/matrix-request';
 import { HistoryVisibility, Machine } from 'neurone/lib/crypto/machine';
+import { ObjectReader } from 'neurone/lib/utils';
 import { Disposer } from 'neurone/lib/utils/disposable';
 import {
   MessageEventWithoutRoomId,
@@ -22,7 +23,6 @@ import { GetTxnId } from './txn';
 import { Timeline } from './room';
 import { AccountDataType } from '../types/matrix/accountData';
 import { DecryptionManager } from './decryption';
-import { ObjectReader } from 'neurone/lib/utils';
 
 export type StateContext = {
   join: {
@@ -89,6 +89,7 @@ export type ClientContext = {
   roomToAvatar: ObservableValue<Map<string, string>>;
   roomToHistoryVisibility: ObservableValue<Map<string, HistoryVisibility>>;
   roomToJoinRule: ObservableValue<Map<string, JoinRule>>;
+  roomToType: ObservableValue<Map<string, string | undefined>>;
   roomToReplacement: ObservableValue<Map<string, string>>;
   roomToCreators: ObservableValue<Map<string, Set<string>>>;
   roomToVersion: ObservableValue<Map<string, string>>;
@@ -389,10 +390,10 @@ export const createRoomContext = async (
   };
 };
 
-export const createEncryptedRoomsObservable = async (
+export const createEncryptedRoomsObservable = (
   state: StateContext,
   disposer: Disposer
-): Promise<ObservableValue<Set<string>>> => {
+): ObservableValue<Set<string>> => {
   const encryptedRoomsObservable: ObservableValue<Set<string>> = new ComputedObservableValue(() => {
     const encryptedRooms = new Set<string>();
 
@@ -440,10 +441,10 @@ export const createDirectRoomsObservable = async (
   return directRoomsObservable;
 };
 
-export const createRoomToReplacementObservable = async (
+export const createRoomToReplacementObservable = (
   state: StateContext,
   disposer: Disposer
-): Promise<ObservableValue<Map<string, string>>> => {
+): ObservableValue<Map<string, string>> => {
   const roomToReplacementObservable: ObservableValue<Map<string, string>> =
     new ComputedObservableValue(() => {
       const roomToReplacement = new Map<string, string>();
@@ -463,13 +464,13 @@ export const createRoomToReplacementObservable = async (
   return roomToReplacementObservable;
 };
 
-export const createSpaceMapping = async (
+export const createSpaceMapping = (
   state: StateContext,
   disposer: Disposer
-): Promise<{
+): {
   roomToParents: ObservableValue<Map<string, Set<string>>>;
   roomToChildEvents: ObservableValue<Map<string, StateEventWithoutRoomId<SpaceChildContent>[]>>;
-}> => {
+} => {
   const roomToParentsObservable: ObservableValue<Map<string, Set<string>>> =
     new ComputedObservableValue(() => {
       const roomToParents = new Map<string, Set<string>>();
@@ -533,10 +534,10 @@ export const createRoomToSummaryObservable = async (
   return roomToSummaryObservable;
 };
 
-export const createRoomToAliasObservable = async (
+export const createRoomToAliasObservable = (
   state: StateContext,
   disposer: Disposer
-): Promise<ObservableValue<Map<string, string>>> => {
+): ObservableValue<Map<string, string>> => {
   const roomToAliasObservable: ObservableValue<Map<string, string>> =
     new ComputedObservableValue(() => {
       const roomToAlias = new Map<string, string>();
@@ -570,10 +571,10 @@ export const createRoomToAliasObservable = async (
   return roomToAliasObservable;
 };
 
-export const createRoomToNameObservable = async (
+export const createRoomToNameObservable = (
   state: StateContext,
   disposer: Disposer
-): Promise<ObservableValue<Map<string, string>>> => {
+): ObservableValue<Map<string, string>> => {
   const roomToNameObservable: ObservableValue<Map<string, string>> =
     new ComputedObservableValue(() => {
       const roomToName = new Map<string, string>();
@@ -601,10 +602,10 @@ export const createRoomToNameObservable = async (
   return roomToNameObservable;
 };
 
-export const createRoomToAvatarObservable = async (
+export const createRoomToAvatarObservable = (
   state: StateContext,
   disposer: Disposer
-): Promise<ObservableValue<Map<string, string>>> => {
+): ObservableValue<Map<string, string>> => {
   const roomToAvatarObservable: ObservableValue<Map<string, string>> =
     new ComputedObservableValue(() => {
       const roomToAvatar = new Map<string, string>();
@@ -631,10 +632,10 @@ export const createRoomToAvatarObservable = async (
   return roomToAvatarObservable;
 };
 
-export const createRoomToHistoryVisibilityObservable = async (
+export const createRoomToHistoryVisibilityObservable = (
   state: StateContext,
   disposer: Disposer
-): Promise<ObservableValue<Map<string, HistoryVisibility>>> => {
+): ObservableValue<Map<string, HistoryVisibility>> => {
   const roomToHistoryVisibilityObservable: ObservableValue<Map<string, HistoryVisibility>> =
     new ComputedObservableValue(() => {
       const roomToHistoryVisibility = new Map<string, HistoryVisibility>();
@@ -657,10 +658,10 @@ export const createRoomToHistoryVisibilityObservable = async (
   return roomToHistoryVisibilityObservable;
 };
 
-export const createRoomToJoinRuleObservable = async (
+export const createRoomToJoinRuleObservable = (
   state: StateContext,
   disposer: Disposer
-): Promise<ObservableValue<Map<string, JoinRule>>> => {
+): ObservableValue<Map<string, JoinRule>> => {
   const roomToJoinRuleObservable: ObservableValue<Map<string, JoinRule>> =
     new ComputedObservableValue(() => {
       const roomToJoinRule = new Map<string, JoinRule>();
@@ -689,6 +690,32 @@ export const createRoomToJoinRuleObservable = async (
   return roomToJoinRuleObservable;
 };
 
+export const createRoomToTypeObservable = (
+  state: StateContext,
+  disposer: Disposer
+): ObservableValue<Map<string, string | undefined>> => {
+  const roomToTypeObservable: ObservableValue<Map<string, string | undefined>> =
+    new ComputedObservableValue(() => {
+      const roomToJoinRule = new Map<string, string | undefined>();
+
+      const addType = (obj: RoomStateObject) => {
+        const { content } = obj.event;
+        const type = ObjectReader.string(content, 'type');
+        roomToJoinRule.set(obj.roomId, type);
+      };
+
+      state.join.create.read.forEach(addType);
+      state.invite.create.read.forEach(addType);
+      state.knock.create.read.forEach(addType);
+      state.leave.create.read.forEach(addType);
+
+      return roomToJoinRule;
+    }, [state.join.create, state.invite.create, state.knock.create, state.leave.create]);
+
+  disposer.collect(roomToTypeObservable);
+  return roomToTypeObservable;
+};
+
 export const createRoomToLatestEventObservable = async (
   storage: Storage,
   disposer: Disposer
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index 505a636d..8228ef76 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -19,6 +19,7 @@ import {
   createRoomToNameObservable,
   createRoomToReplacementObservable,
   createRoomToSummaryObservable,
+  createRoomToTypeObservable,
   createSpaceMapping,
   createStateContext,
   createSyncTokenObservable,
@@ -81,17 +82,18 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     state,
     disposer
   );
-  const encryptedRooms = await createEncryptedRoomsObservable(state, disposer);
+  const encryptedRooms = createEncryptedRoomsObservable(state, disposer);
   const directRooms = await createDirectRoomsObservable(storage, disposer);
-  const { roomToParents, roomToChildEvents } = await createSpaceMapping(state, disposer);
+  const { roomToParents, roomToChildEvents } = createSpaceMapping(state, disposer);
 
   const roomToSummary = await createRoomToSummaryObservable(storage, disposer);
-  const roomToAlias = await createRoomToAliasObservable(state, disposer);
-  const roomToName = await createRoomToNameObservable(state, disposer);
-  const roomToAvatar = await createRoomToAvatarObservable(state, disposer);
-  const roomToHistoryVisibility = await createRoomToHistoryVisibilityObservable(state, disposer);
-  const roomToJoinRule = await createRoomToJoinRuleObservable(state, disposer);
-  const roomToReplacement = await createRoomToReplacementObservable(state, disposer);
+  const roomToAlias = createRoomToAliasObservable(state, disposer);
+  const roomToName = createRoomToNameObservable(state, disposer);
+  const roomToAvatar = createRoomToAvatarObservable(state, disposer);
+  const roomToHistoryVisibility = createRoomToHistoryVisibilityObservable(state, disposer);
+  const roomToJoinRule = createRoomToJoinRuleObservable(state, disposer);
+  const roomToType = createRoomToTypeObservable(state, disposer);
+  const roomToReplacement = createRoomToReplacementObservable(state, disposer);
   const roomToLatestEvent = await createRoomToLatestEventObservable(storage, disposer);
 
   const syncTokenObservable = await createSyncTokenObservable(storage, disposer);
@@ -137,6 +139,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     roomToAvatar,
     roomToHistoryVisibility,
     roomToJoinRule,
+    roomToType,
     roomToReplacement,
     roomToLatestEvent,
     roomToCreators,
diff --git a/src/client/reader/Error.ts b/src/client/reader/Error.ts
index dbbfe52d..073a50ca 100644
--- a/src/client/reader/Error.ts
+++ b/src/client/reader/Error.ts
@@ -1,15 +1,15 @@
 import { ObjectReader } from 'neurone/lib/utils';
 
 export class rError {
-  static error(data?: object): string | undefined {
+  static error(data?: unknown): string | undefined {
     return ObjectReader.string(data, 'error');
   }
 
-  static errcode(data?: object): string | undefined {
+  static errcode(data?: unknown): string | undefined {
     return ObjectReader.string(data, 'errcode');
   }
 
-  static retryAfterMs(data?: object): number | undefined {
+  static retryAfterMs(data?: unknown): number | undefined {
     return ObjectReader.number(data, 'retry_after_ms');
   }
 }
diff --git a/src/types/matrix/room.ts b/src/types/matrix/room.ts
index 124e9d4e..8b1bde82 100644
--- a/src/types/matrix/room.ts
+++ b/src/types/matrix/room.ts
@@ -92,9 +92,11 @@ export type JoinRule =
   | 'restricted'
   | 'knock_restricted';
 
+export type AllowConditionType = 'm.room_membership';
+
 export type AllowCondition = {
   room_id: string;
-  type: string[];
+  type: AllowConditionType;
 };
 export type JoinRulesContent = {
   allow?: AllowCondition[];

From 48bc35dad6e5b6db93e87b17c419a5aa543f6621 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 20 Jul 2026 21:44:01 +0530
Subject: [PATCH 004/158] add roomToTopic map for syncronus reads

---
 src/app/hooks/storage/useRoomTopic.ts | 12 +++---
 src/client/context.ts                 | 58 ++++++++++++++++++++++++++-
 src/client/initialize.ts              |  3 ++
 3 files changed, 65 insertions(+), 8 deletions(-)

diff --git a/src/app/hooks/storage/useRoomTopic.ts b/src/app/hooks/storage/useRoomTopic.ts
index 14e1cebb..bcc5c914 100644
--- a/src/app/hooks/storage/useRoomTopic.ts
+++ b/src/app/hooks/storage/useRoomTopic.ts
@@ -1,11 +1,9 @@
-import { StateEventType } from '../../../types/matrix/room';
-import { useRoomStateEvent } from './useRoomStateEvent';
+import { useClient } from '../useClient';
+import { useObservableValue } from '../useObservableValue';
 
 export const useRoomTopic = (roomId: string): string | undefined => {
-  const topicEventResult = useRoomStateEvent(roomId, StateEventType.RoomTopic, '');
+  const ct = useClient();
+  const roomToTopic = useObservableValue(ct.roomToTopic);
 
-  const content = topicEventResult.value?.event.content;
-  if (content && 'topic' in content && typeof content.topic === 'string') return content.topic;
-
-  return undefined;
+  return roomToTopic.get(roomId);
 };
diff --git a/src/client/context.ts b/src/client/context.ts
index 7c889907..87028ffb 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -32,6 +32,7 @@ export type StateContext = {
     spaceChild: ObservableValue<JoinRoomStateObject[]>;
     canonicalAlias: ObservableValue<JoinRoomStateObject[]>;
     name: ObservableValue<JoinRoomStateObject[]>;
+    topic: ObservableValue<JoinRoomStateObject[]>;
     avatar: ObservableValue<JoinRoomStateObject[]>;
     joinRules: ObservableValue<JoinRoomStateObject[]>;
     historyVisibility: ObservableValue<JoinRoomStateObject[]>;
@@ -41,6 +42,7 @@ export type StateContext = {
     encryption: ObservableValue<InviteRoomStateObject[]>;
     canonicalAlias: ObservableValue<InviteRoomStateObject[]>;
     name: ObservableValue<InviteRoomStateObject[]>;
+    topic: ObservableValue<InviteRoomStateObject[]>;
     avatar: ObservableValue<InviteRoomStateObject[]>;
     joinRules: ObservableValue<InviteRoomStateObject[]>;
   };
@@ -49,6 +51,7 @@ export type StateContext = {
     encryption: ObservableValue<KnockRoomStateObject[]>;
     canonicalAlias: ObservableValue<KnockRoomStateObject[]>;
     name: ObservableValue<KnockRoomStateObject[]>;
+    topic: ObservableValue<KnockRoomStateObject[]>;
     avatar: ObservableValue<KnockRoomStateObject[]>;
     joinRules: ObservableValue<KnockRoomStateObject[]>;
   };
@@ -57,6 +60,7 @@ export type StateContext = {
     encryption: ObservableValue<LeaveRoomStateObject[]>;
     canonicalAlias: ObservableValue<LeaveRoomStateObject[]>;
     name: ObservableValue<LeaveRoomStateObject[]>;
+    topic: ObservableValue<LeaveRoomStateObject[]>;
     avatar: ObservableValue<LeaveRoomStateObject[]>;
     joinRules: ObservableValue<LeaveRoomStateObject[]>;
   };
@@ -86,6 +90,7 @@ export type ClientContext = {
   roomToSummary: ObservableValue<Map<string, RoomSummary>>;
   roomToAlias: ObservableValue<Map<string, string>>;
   roomToName: ObservableValue<Map<string, string>>;
+  roomToTopic: ObservableValue<Map<string, string>>;
   roomToAvatar: ObservableValue<Map<string, string>>;
   roomToHistoryVisibility: ObservableValue<Map<string, HistoryVisibility>>;
   roomToJoinRule: ObservableValue<Map<string, JoinRule>>;
@@ -205,6 +210,24 @@ export async function createStateContext(
   );
   disposer.collect(joinName, inviteName, knockName, leaveName);
 
+  const joinTopic = await storage.joinRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomTopic
+  );
+  const inviteTopic = await storage.inviteRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomTopic
+  );
+  const knockTopic = await storage.knockRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomTopic
+  );
+  const leaveTopic = await storage.leaveRoomState.observableRead.queryIndex(
+    'type',
+    StateEventType.RoomTopic
+  );
+  disposer.collect(joinTopic, inviteTopic, knockTopic, leaveTopic);
+
   const joinAvatar = await storage.joinRoomState.observableRead.queryIndex(
     'type',
     StateEventType.RoomAvatar
@@ -255,6 +278,7 @@ export async function createStateContext(
       spaceChild: joinSpaceChild,
       canonicalAlias: joinCanonicalAlias,
       name: joinName,
+      topic: joinTopic,
       avatar: joinAvatar,
       joinRules: joinJoinRules,
       historyVisibility: joinHistoryVisibility,
@@ -264,6 +288,7 @@ export async function createStateContext(
       encryption: inviteEncryption,
       canonicalAlias: inviteCanonicalAlias,
       name: inviteName,
+      topic: inviteTopic,
       avatar: inviteAvatar,
       joinRules: inviteJoinRules,
     },
@@ -272,6 +297,7 @@ export async function createStateContext(
       encryption: knockEncryption,
       canonicalAlias: knockCanonicalAlias,
       name: knockName,
+      topic: knockTopic,
       avatar: knockAvatar,
       joinRules: knockJoinRules,
     },
@@ -280,6 +306,7 @@ export async function createStateContext(
       encryption: leaveEncryption,
       canonicalAlias: leaveCanonicalAlias,
       name: leaveName,
+      topic: leaveTopic,
       avatar: leaveAvatar,
       joinRules: leaveJoinRules,
     },
@@ -602,6 +629,33 @@ export const createRoomToNameObservable = (
   return roomToNameObservable;
 };
 
+export const createRoomToTopicObservable = (
+  state: StateContext,
+  disposer: Disposer
+): ObservableValue<Map<string, string>> => {
+  const roomToTopicObservable: ObservableValue<Map<string, string>> =
+    new ComputedObservableValue(() => {
+      const roomToTopic = new Map<string, string>();
+
+      const addName = (obj: RoomStateObject) => {
+        const { content, state_key: stateKey } = obj.event;
+        const topic = ObjectReader.string(content, 'topic');
+        if (topic && stateKey === '') {
+          roomToTopic.set(obj.roomId, topic);
+        }
+      };
+      state.join.topic.read.forEach(addName);
+      state.invite.topic.read.forEach(addName);
+      state.knock.topic.read.forEach(addName);
+      state.leave.topic.read.forEach(addName);
+
+      return roomToTopic;
+    }, [state.join.topic, state.invite.topic, state.knock.topic, state.leave.topic]);
+
+  disposer.collect(roomToTopicObservable);
+  return roomToTopicObservable;
+};
+
 export const createRoomToAvatarObservable = (
   state: StateContext,
   disposer: Disposer
@@ -701,7 +755,9 @@ export const createRoomToTypeObservable = (
       const addType = (obj: RoomStateObject) => {
         const { content } = obj.event;
         const type = ObjectReader.string(content, 'type');
-        roomToJoinRule.set(obj.roomId, type);
+        if (type) {
+          roomToJoinRule.set(obj.roomId, type);
+        }
       };
 
       state.join.create.read.forEach(addType);
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index 8228ef76..81d27aaa 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -19,6 +19,7 @@ import {
   createRoomToNameObservable,
   createRoomToReplacementObservable,
   createRoomToSummaryObservable,
+  createRoomToTopicObservable,
   createRoomToTypeObservable,
   createSpaceMapping,
   createStateContext,
@@ -89,6 +90,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
   const roomToSummary = await createRoomToSummaryObservable(storage, disposer);
   const roomToAlias = createRoomToAliasObservable(state, disposer);
   const roomToName = createRoomToNameObservable(state, disposer);
+  const roomToTopic = createRoomToTopicObservable(state, disposer);
   const roomToAvatar = createRoomToAvatarObservable(state, disposer);
   const roomToHistoryVisibility = createRoomToHistoryVisibilityObservable(state, disposer);
   const roomToJoinRule = createRoomToJoinRuleObservable(state, disposer);
@@ -136,6 +138,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     roomToSummary,
     roomToAlias,
     roomToName,
+    roomToTopic,
     roomToAvatar,
     roomToHistoryVisibility,
     roomToJoinRule,

From b6e68d9c193e10ecbe8254fcc298aec869e0c355 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 20 Jul 2026 22:05:53 +0530
Subject: [PATCH 005/158] fix creators & history visibility map reactivity

---
 src/client/context.ts | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/client/context.ts b/src/client/context.ts
index 87028ffb..021d79cf 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -380,6 +380,8 @@ export const createRoomContext = async (
             }
           });
         }
+
+        roomToCreators.set(obj.roomId, creators);
       });
 
       return roomToCreators;
@@ -706,7 +708,7 @@ export const createRoomToHistoryVisibilityObservable = (
       state.join.historyVisibility.read.forEach(addHistoryVisibility);
 
       return roomToHistoryVisibility;
-    }, [state.join.joinRules]);
+    }, [state.join.historyVisibility]);
 
   disposer.collect(roomToHistoryVisibilityObservable);
   return roomToHistoryVisibilityObservable;

From 2788c8f813c15ca30688e5aa82fa90d002fcb4d5 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 20 Jul 2026 22:41:51 +0530
Subject: [PATCH 006/158] replace sdk in lobby add room/space and existing
 window

---
 src/app/features/add-existing/AddExisting.tsx | 111 +++++++++++-------
 .../features/create-room/CreateRoomModal.tsx  |   9 +-
 .../create-space/CreateSpaceModal.tsx         |   9 +-
 src/app/hooks/usePowerLevels.ts               |   8 +-
 4 files changed, 74 insertions(+), 63 deletions(-)

diff --git a/src/app/features/add-existing/AddExisting.tsx b/src/app/features/add-existing/AddExisting.tsx
index d100096b..337b0c62 100644
--- a/src/app/features/add-existing/AddExisting.tsx
+++ b/src/app/features/add-existing/AddExisting.tsx
@@ -29,16 +29,14 @@ import React, {
 } from 'react';
 import { useAtomValue } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { Room } from 'matrix-js-sdk';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { stopPropagation } from '../../utils/keyboard';
 import { useDirects, useRooms, useSpaces } from '../../state/hooks/roomList';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { mDirectAtom } from '../../state/mDirectList';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
 import { VirtualTile } from '../../components/virtualizer';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
@@ -54,6 +52,13 @@ import { StateEvent } from '../../../types/matrix/room';
 import { getViaServers } from '../../plugins/via-servers';
 import { rateLimitedActions } from '../../utils/matrix';
 import { useAlive } from '../../hooks/useAlive';
+import { useClient } from '../../hooks/useClient';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { getJoinRoomStateId } from '../../../client/storage/collections';
+import { getPowerLevels } from '../../hooks/usePowerLevels';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 const SEARCH_OPTS: UseAsyncSearchOptions = {
   limit: 500,
@@ -71,33 +76,34 @@ type AddExistingModalProps = {
   requestClose: () => void;
 };
 export function AddExistingModal({ parentId, space, requestClose }: AddExistingModalProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const alive = useAlive();
 
   const mDirects = useAtomValue(mDirectAtom);
-  const spaces = useSpaces(mx, allRoomsAtom);
-  const rooms = useRooms(mx, allRoomsAtom, mDirects);
-  const directs = useDirects(mx, allRoomsAtom, mDirects);
+  const spaces = useSpaces(ct, allRoomsAtom);
+  const rooms = useRooms(ct, allRoomsAtom, mDirects);
+  const directs = useDirects(ct, allRoomsAtom, mDirects);
   const roomIdToParents = useAtomValue(roomToParentsAtom);
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  const [selected, setSelected] = useState<string[]>([]);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(ct.rooms.join.read);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
 
-  const allRoomsSet = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allRoomsSet);
+  const [selected, setSelected] = useState<string[]>([]);
 
   const allItems: string[] = useMemo(() => {
     const rIds = space ? [...spaces] : [...rooms, ...directs];
 
     return rIds
       .filter((rId) => rId !== parentId && !roomIdToParents.get(rId)?.has(parentId))
-      .sort(factoryRoomIdByAtoZ(mx));
-  }, [spaces, rooms, directs, space, parentId, roomIdToParents, mx]);
+      .sort(factoryRoomIdByAtoZ(getRoomName));
+  }, [spaces, rooms, directs, space, parentId, roomIdToParents, getRoomName]);
 
   const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
-    (rId) => getRoom(rId)?.name ?? rId,
-    [getRoom]
+    (rId) => getRoomName(rId) ?? rId,
+    [getRoomName]
   );
 
   const [searchResult, searchRoom, resetSearch] = useAsyncSearch(
@@ -128,25 +134,36 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
     searchRoom(value);
   };
 
-  const [applyState, applyChanges] = useAsyncCallback<undefined, Error, [Room[]]>(
+  const [applyState, applyChanges] = useAsyncCallback<void, Error, [string[]]>(
     useCallback(
       async (selectedRooms) => {
-        await rateLimitedActions(selectedRooms, async (room) => {
-          const via = getViaServers(room);
-
-          await mx.sendStateEvent(
-            parentId,
-            StateEvent.SpaceChild as any,
-            {
-              auto_join: false,
-              suggested: false,
-              via,
-            },
-            room.roomId
+        await rateLimitedActions(selectedRooms, async (roomId) => {
+          const creators = ct.roomToCreators.read.get(roomId);
+          const powerLevelsStateObj = await ct.storage.joinRoomState.read.get(
+            getJoinRoomStateId(roomId, StateEvent.RoomPowerLevels, '')
           );
+          const powerLevels = getPowerLevels(powerLevelsStateObj);
+          const users = (await ct.storage.joinRoomMember.read.queryIndex('roomId', roomId)).map(
+            (m) => m.userId
+          );
+          const via = getViaServers(creators, powerLevels, users);
+
+          const resp = await ct.requestAuthJSON(
+            putStateEvent({
+              pathParams: { roomId: parentId, eventType: StateEvent.SpaceChild, stateKey: roomId },
+              body: {
+                auto_join: false,
+                suggested: false,
+                via,
+              },
+            })
+          );
+
+          const [err] = await parseMatrixResp(resp);
+          return err;
         });
       },
-      [mx, parentId]
+      [ct, parentId]
     )
   );
   const applyingChanges = applyState.status === AsyncStatus.Loading;
@@ -164,8 +181,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
   };
 
   const handleApplyChanges = () => {
-    const selectedRooms = selected.map((rId) => getRoom(rId)).filter((room) => room !== undefined);
-    applyChanges(selectedRooms).then(() => {
+    applyChanges([...selected]).then(() => {
       if (alive()) {
         setSelected([]);
         requestClose();
@@ -253,10 +269,11 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                     >
                       {vItems.map((vItem) => {
                         const roomId = items[vItem.index];
-                        const room = getRoom(roomId);
-                        if (!room) return null;
                         const selectedItem = selected?.includes(roomId);
-                        const dm = mDirects.has(room.roomId);
+                        const dm = mDirects.has(roomId);
+
+                        const roomName = getRoomName(roomId) ?? 'Unknown';
+                        const roomAvatar = getRoomAvatar(roomId);
 
                         return (
                           <VirtualTile
@@ -275,26 +292,30 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                               aria-pressed={selectedItem}
                               before={
                                 <Avatar size="200" radii={dm ? '400' : '300'}>
-                                  {dm || room.isSpaceRoom() ? (
+                                  {dm || ct.spaceRooms.read.has(roomId) ? (
                                     <RoomAvatar
-                                      roomId={room.roomId}
+                                      roomId={roomId}
                                       src={
-                                        dm
-                                          ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                                          : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                                        roomAvatar
+                                          ? mxcToHttp(
+                                              ct.session.baseUrl,
+                                              roomAvatar,
+                                              useAuthentication
+                                            ).thumbnail({ width: 96, height: 96, method: 'crop' })
+                                          : undefined
                                       }
-                                      alt={room.name}
+                                      alt={roomName}
                                       renderFallback={() => (
                                         <Text as="span" size="H6">
-                                          {nameInitials(room.name)}
+                                          {nameInitials(roomName)}
                                         </Text>
                                       )}
                                     />
                                   ) : (
                                     <RoomIcon
                                       size="200"
-                                      joinRule={room.getJoinRule()}
-                                      roomType={room.getType()}
+                                      joinRule={ct.roomToJoinRule.read.get(roomId)}
+                                      roomType={ct.roomToType.read.get(roomId)}
                                     />
                                   )}
                                 </Avatar>
@@ -304,8 +325,8 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                               <Box grow="Yes">
                                 <Text truncate size="T400">
                                   {queryHighlighRegex
-                                    ? highlightText(queryHighlighRegex, [room.name])
-                                    : room.name}
+                                    ? highlightText(queryHighlighRegex, [roomName])
+                                    : roomName}
                                 </Text>
                               </Box>
                             </MenuItem>
diff --git a/src/app/features/create-room/CreateRoomModal.tsx b/src/app/features/create-room/CreateRoomModal.tsx
index d5d8c92d..08d51572 100644
--- a/src/app/features/create-room/CreateRoomModal.tsx
+++ b/src/app/features/create-room/CreateRoomModal.tsx
@@ -14,7 +14,6 @@ import {
   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 {
@@ -32,12 +31,8 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
   const { spaceId, type } = state;
   const closeDialog = useCloseCreateRoomModal();
 
-  const allJoinedRooms = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allJoinedRooms);
-  const space = spaceId ? getRoom(spaceId) : undefined;
-
   return (
-    <SpaceProvider value={space ?? null}>
+    <SpaceProvider value={spaceId ?? null}>
       <Overlay open backdrop={<OverlayBackdrop />}>
         <OverlayCenter>
           <FocusTrap
@@ -77,7 +72,7 @@ function CreateRoomModal({ state }: CreateRoomModalProps) {
                     direction="Column"
                     gap="500"
                   >
-                    <CreateRoomForm space={space} onCreate={closeDialog} defaultType={type} />
+                    <CreateRoomForm spaceId={spaceId} onCreate={closeDialog} defaultType={type} />
                   </Box>
                 </Scroll>
               </Box>
diff --git a/src/app/features/create-space/CreateSpaceModal.tsx b/src/app/features/create-space/CreateSpaceModal.tsx
index c1bc6898..860953bc 100644
--- a/src/app/features/create-space/CreateSpaceModal.tsx
+++ b/src/app/features/create-space/CreateSpaceModal.tsx
@@ -14,7 +14,6 @@ import {
   Text,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
 import { SpaceProvider } from '../../hooks/useSpace';
 import { CreateSpaceForm } from './CreateSpace';
 import {
@@ -31,12 +30,8 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
   const { spaceId } = state;
   const closeDialog = useCloseCreateSpaceModal();
 
-  const allJoinedRooms = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allJoinedRooms);
-  const space = spaceId ? getRoom(spaceId) : undefined;
-
   return (
-    <SpaceProvider value={space ?? null}>
+    <SpaceProvider value={spaceId ?? null}>
       <Overlay open backdrop={<OverlayBackdrop />}>
         <OverlayCenter>
           <FocusTrap
@@ -75,7 +70,7 @@ function CreateSpaceModal({ state }: CreateSpaceModalProps) {
                     direction="Column"
                     gap="500"
                   >
-                    <CreateSpaceForm space={space} onCreate={closeDialog} />
+                    <CreateSpaceForm spaceId={spaceId} onCreate={closeDialog} />
                   </Box>
                 </Scroll>
               </Box>
diff --git a/src/app/hooks/usePowerLevels.ts b/src/app/hooks/usePowerLevels.ts
index 631b5395..0516bb6a 100644
--- a/src/app/hooks/usePowerLevels.ts
+++ b/src/app/hooks/usePowerLevels.ts
@@ -6,6 +6,7 @@ import { StateEvent, StateEventType } from '../../types/matrix/room';
 import { getJoinRoomStateId, JoinRoomStateObject } from '../../client/storage/collections';
 import { useClient } from './useClient';
 import { useObservableValuePromise } from './useObservableValue';
+import { ClientContext } from '../../client/context';
 
 export type PowerLevelActions = 'invite' | 'redact' | 'kick' | 'ban' | 'historical';
 export type PowerLevelNotificationsAction = 'room';
@@ -81,14 +82,14 @@ export function usePowerLevelsState(
   return useObservableValuePromise(eventObservablePromise);
 }
 
-function parsePowerLevels(eventObj?: JoinRoomStateObject): IPowerLevels {
+export function getPowerLevels(eventObj?: JoinRoomStateObject): IPowerLevels {
   const content: IPowerLevels | undefined = eventObj?.event.content;
 
   return !content ? DEFAULT_POWER_LEVELS : fillMissingPowers(content);
 }
 
 export function usePowerLevels(eventObj: JoinRoomStateObject | undefined): IPowerLevels {
-  const powerLevels: IPowerLevels = useMemo(() => parsePowerLevels(eventObj), [eventObj]);
+  const powerLevels: IPowerLevels = useMemo(() => getPowerLevels(eventObj), [eventObj]);
 
   return powerLevels;
 }
@@ -114,12 +115,11 @@ export const useRoomsPowerLevels = (rooms: string[]): Map<string, IPowerLevels>
   const roomToPowerLevels: Map<string, IPowerLevels> = useMemo(() => {
     const rToP = new Map<string, IPowerLevels>();
 
-    console.log(plEventsResult.value?.find((v) => v.roomId === '!KqyBSJuhpIHbWaROMB:kde.org'));
     rooms.forEach((roomId) => {
       const evtObj = plEventsResult.value?.find(
         (o) => o.roomId === roomId && o.event.state_key === ''
       );
-      rToP.set(roomId, parsePowerLevels(evtObj));
+      rToP.set(roomId, getPowerLevels(evtObj));
     });
 
     return rToP;

From a67f855e09d5e8355dcad1bd1ad585c14d9e040a Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 21 Jul 2026 09:59:00 +0530
Subject: [PATCH 007/158] render create room modal

---
 src/app/pages/Router.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 0fec4863..1ec49ad5 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -135,11 +135,11 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                   >
                     <Outlet />
                   </ClientLayout>
-                  {/* <SearchModalRenderer />
-                  <UserRoomProfileRenderer />
+                  {/*<SearchModalRenderer />
+                  <UserRoomProfileRenderer />*/}
                   <CreateRoomModalRenderer />
                   <CreateSpaceModalRenderer />
-                  <RoomSettingsRenderer />
+                  {/*<RoomSettingsRenderer />
                   <SpaceSettingsRenderer />
                   <ReceiveSelfDeviceVerification />
                   <AutoRestoreBackupOnVerification /> */}

From baf281bca98eec76d49fa7b146d949a2b4c4a1fb Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 21 Jul 2026 10:01:07 +0530
Subject: [PATCH 008/158] fix restricted room wrong allow type

---
 src/app/components/create-room/utils.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/create-room/utils.ts b/src/app/components/create-room/utils.ts
index 84e6c75a..1c91d0bd 100644
--- a/src/app/components/create-room/utils.ts
+++ b/src/app/components/create-room/utils.ts
@@ -52,7 +52,7 @@ const createRoomJoinRulesState = (
       join_rule: knock ? 'knock_restricted' : 'restricted',
       allow: [
         {
-          type: [StateEventType.RoomMember],
+          type: 'm.room_membership',
           room_id: parentId,
         },
       ],

From 23537b7a769bcf7f8dbac94d61a20343d0a2c43b Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 21 Jul 2026 15:33:11 +0530
Subject: [PATCH 009/158] move room user profile to new sdk

---
 .../components/UserRoomProfileRenderer.tsx    |  11 +-
 src/app/components/presence/Presence.tsx      |  11 +-
 .../components/user-profile/CreatorChip.tsx   |  20 +-
 src/app/components/user-profile/PowerChip.tsx |  81 ++++----
 src/app/components/user-profile/UserChips.tsx | 116 ++++++-----
 .../user-profile/UserModeration.tsx           |  84 +++++---
 .../user-profile/UserRoomProfile.tsx          | 183 ++++++++++--------
 src/app/hooks/useMemberPowerCompare.ts        |   9 +-
 src/app/hooks/useMutualRooms.ts               |  60 +++---
 src/app/hooks/usePowerLevels.ts               |   6 +-
 src/app/hooks/useUserPresence.ts              |  59 ++----
 src/app/pages/Router.tsx                      |   4 +-
 12 files changed, 360 insertions(+), 284 deletions(-)

diff --git a/src/app/components/UserRoomProfileRenderer.tsx b/src/app/components/UserRoomProfileRenderer.tsx
index ca7aa837..45b10dd9 100644
--- a/src/app/components/UserRoomProfileRenderer.tsx
+++ b/src/app/components/UserRoomProfileRenderer.tsx
@@ -4,22 +4,15 @@ import FocusTrap from 'focus-trap-react';
 import { useCloseUserRoomProfile, useUserRoomProfileState } from '../state/hooks/userRoomProfile';
 import { UserRoomProfile } from './user-profile';
 import { UserRoomProfileState } from '../state/userRoomProfile';
-import { useAllJoinedRoomsSet, useGetRoom } from '../hooks/useGetRoom';
 import { stopPropagation } from '../utils/keyboard';
 import { SpaceProvider } from '../hooks/useSpace';
 import { RoomProvider } from '../hooks/useRoom';
 
 function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState }) {
   const { roomId, spaceId, userId, cords, position } = state;
-  const allJoinedRooms = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allJoinedRooms);
-  const room = getRoom(roomId);
-  const space = spaceId ? getRoom(spaceId) : undefined;
 
   const close = useCloseUserRoomProfile();
 
-  if (!room) return null;
-
   return (
     <PopOut
       anchor={cords}
@@ -35,8 +28,8 @@ function UserRoomProfileContextMenu({ state }: { state: UserRoomProfileState })
           }}
         >
           <Menu style={{ width: toRem(340) }}>
-            <SpaceProvider value={space ?? null}>
-              <RoomProvider value={room}>
+            <SpaceProvider value={spaceId ?? null}>
+              <RoomProvider value={roomId}>
                 <UserRoomProfile userId={userId} />
               </RoomProvider>
             </SpaceProvider>
diff --git a/src/app/components/presence/Presence.tsx b/src/app/components/presence/Presence.tsx
index 108852f2..a3253673 100644
--- a/src/app/components/presence/Presence.tsx
+++ b/src/app/components/presence/Presence.tsx
@@ -11,13 +11,14 @@ import {
   toRem,
 } from 'folds';
 import React, { ReactNode, useId } from 'react';
+import { Presence } from 'neurone/lib/api/types';
 import * as css from './styles.css';
-import { Presence, usePresenceLabel } from '../../hooks/useUserPresence';
+import { usePresenceLabel } from '../../hooks/useUserPresence';
 
 const PresenceToColor: Record<Presence, MainColor> = {
-  [Presence.Online]: 'Success',
-  [Presence.Unavailable]: 'Warning',
-  [Presence.Offline]: 'Secondary',
+  online: 'Success',
+  unavailable: 'Warning',
+  offline: 'Secondary',
 };
 
 type PresenceBadgeProps = {
@@ -51,7 +52,7 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
           ref={triggerRef}
           size={size}
           variant={PresenceToColor[presence]}
-          fill={presence === Presence.Offline ? 'Soft' : 'Solid'}
+          fill={presence === 'offline' ? 'Soft' : 'Solid'}
           radii="Pill"
         />
       )}
diff --git a/src/app/components/user-profile/CreatorChip.tsx b/src/app/components/user-profile/CreatorChip.tsx
index f59d2ae5..c1fdafb0 100644
--- a/src/app/components/user-profile/CreatorChip.tsx
+++ b/src/app/components/user-profile/CreatorChip.tsx
@@ -5,7 +5,6 @@ import { isKeyHotkey } from 'is-hotkey';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
 import { PowerColorBadge, PowerIcon } from '../power';
 import { getPowerTagIconSrc } from '../../hooks/useMemberPowerTag';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { stopPropagation } from '../../utils/keyboard';
 import { useRoom } from '../../hooks/useRoom';
@@ -14,18 +13,19 @@ import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useOpenSpaceSettings } from '../../state/hooks/spaceSettings';
 import { SpaceSettingsPage } from '../../state/spaceSettings';
 import { RoomSettingsPage } from '../../state/roomSettings';
+import { useClient } from '../../hooks/useClient';
 
 export function CreatorChip() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const room = useRoom();
-  const space = useSpaceOptionally();
+  const roomId = useRoom();
+  const spaceId = useSpaceOptionally();
   const openRoomSettings = useOpenRoomSettings();
   const openSpaceSettings = useOpenSpaceSettings();
 
   const [cords, setCords] = useState<RectCords>();
   const tag = useRoomCreatorsTag();
-  const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
+  const tagIconSrc = tag.icon && getPowerTagIconSrc(ct, useAuthentication, tag.icon);
 
   const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
     setCords(evt.currentTarget.getBoundingClientRect());
@@ -58,14 +58,10 @@ export function CreatorChip() {
                 size="300"
                 radii="300"
                 onClick={() => {
-                  if (room.isSpaceRoom()) {
-                    openSpaceSettings(
-                      room.roomId,
-                      space?.roomId,
-                      SpaceSettingsPage.PermissionsPage
-                    );
+                  if (ct.spaceRooms.read.has(roomId)) {
+                    openSpaceSettings(roomId, spaceId, SpaceSettingsPage.PermissionsPage);
                   } else {
-                    openRoomSettings(room.roomId, space?.roomId, RoomSettingsPage.PermissionsPage);
+                    openRoomSettings(roomId, spaceId, RoomSettingsPage.PermissionsPage);
                   }
                   close();
                 }}
diff --git a/src/app/components/user-profile/PowerChip.tsx b/src/app/components/user-profile/PowerChip.tsx
index a6758300..3a52754a 100644
--- a/src/app/components/user-profile/PowerChip.tsx
+++ b/src/app/components/user-profile/PowerChip.tsx
@@ -23,13 +23,20 @@ import {
 import React, { MouseEventHandler, useCallback, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
+import produce from 'immer';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { PowerColorBadge, PowerIcon } from '../power';
-import { useGetMemberPowerLevel, usePowerLevels } from '../../hooks/usePowerLevels';
-import { getPowers, usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import {
+  applyPermissionPower,
+  PermissionLocation,
+  useGetMemberPowerLevel,
+  usePowerLevelsContext,
+} from '../../hooks/usePowerLevels';
+import { getPowers, usePowerLevelTagsContext } from '../../hooks/usePowerLevelTags';
 import { stopPropagation } from '../../utils/keyboard';
-import { StateEvent } from '../../../types/matrix/room';
+import { StateEvent, StateEventType } from '../../../types/matrix/room';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { RoomSettingsPage } from '../../state/roomSettings';
 import { useRoom } from '../../hooks/useRoom';
@@ -40,9 +47,10 @@ import { SpaceSettingsPage } from '../../state/spaceSettings';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { BreakWord } from '../../styles/Text.css';
 import { getPowerTagIconSrc, useGetMemberPowerTag } from '../../hooks/useMemberPowerTag';
-import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
+import { useClient } from '../../hooks/useClient';
+import { useRoomCreators } from '../../hooks/useRoomCreators';
 
 type SelfDemoteAlertProps = {
   power: number;
@@ -145,30 +153,29 @@ function SharedPowerAlert({ power, onCancel, onChange }: SharedPowerAlertProps)
 }
 
 export function PowerChip({ userId }: { userId: string }) {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const space = useSpaceOptionally();
+  const ct = useClient();
+  const roomId = useRoom();
+  const spaceId = useSpaceOptionally();
   const useAuthentication = useMediaAuthentication();
   const openRoomSettings = useOpenRoomSettings();
   const openSpaceSettings = useOpenSpaceSettings();
 
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-
+  const creators = useRoomCreators(roomId);
+  const powerLevels = usePowerLevelsContext();
   const permissions = useRoomPermissions(creators, powerLevels);
   const getMemberPowerLevel = useGetMemberPowerLevel(powerLevels);
   const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
 
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const powerLevelTags = usePowerLevelTagsContext();
+  const getMemberPowerTag = useGetMemberPowerTag(creators, powerLevels);
 
-  const myUserId = mx.getSafeUserId();
+  const myUserId = ct.session.userId;
   const canChangePowers =
     permissions.stateEvent(StateEvent.RoomPowerLevels, myUserId) &&
     (myUserId === userId ? true : hasMorePower(myUserId, userId));
 
   const tag = getMemberPowerTag(userId);
-  const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
+  const tagIconSrc = tag.icon && getPowerTagIconSrc(ct, useAuthentication, tag.icon);
 
   const [cords, setCords] = useState<RectCords>();
 
@@ -178,12 +185,28 @@ export function PowerChip({ userId }: { userId: string }) {
 
   const close = () => setCords(undefined);
 
-  const [powerState, changePower] = useAsyncCallback<undefined, Error, [number]>(
+  const [powerState, changePower] = useAsyncCallback<void, Error, [number]>(
     useCallback(
       async (power: number) => {
-        await mx.setPowerLevel(room.roomId, userId, power);
+        const editedPowerLevels = produce(powerLevels, (draftPowerLevels) => {
+          const location: PermissionLocation = {
+            user: true,
+            key: userId,
+          };
+          applyPermissionPower(draftPowerLevels, location, power);
+
+          return draftPowerLevels;
+        });
+        const resp = await ct.requestAuthJSON(
+          putStateEvent({
+            pathParams: { roomId, eventType: StateEventType.RoomPowerLevels, stateKey: '' },
+            body: editedPowerLevels,
+          })
+        );
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(printMatrixError(err));
       },
-      [mx, userId, room]
+      [ct, userId, roomId, powerLevels]
     )
   );
   const changing = powerState.status === AsyncStatus.Loading;
@@ -196,11 +219,11 @@ export function PowerChip({ userId }: { userId: string }) {
     if (!canChangePowers) return;
     if (power === getMemberPowerLevel(userId)) return;
 
-    if (userId === mx.getSafeUserId()) {
+    if (userId === myUserId) {
       setSelfDemote(power);
       return;
     }
-    if (!creators.has(myUserId) && power === getMemberPowerLevel(myUserId)) {
+    if (!creators?.has(myUserId) && power === getMemberPowerLevel(myUserId)) {
       setSharedPower(power);
       return;
     }
@@ -252,10 +275,10 @@ export function PowerChip({ userId }: { userId: string }) {
                 {getPowers(powerLevelTags).map((power) => {
                   const powerTag = powerLevelTags[power];
                   const powerTagIconSrc =
-                    powerTag.icon && getPowerTagIconSrc(mx, useAuthentication, powerTag.icon);
+                    powerTag.icon && getPowerTagIconSrc(ct, useAuthentication, powerTag.icon);
 
                   const selected = getMemberPowerLevel(userId) === power;
-                  const canAssignPower = creators.has(myUserId)
+                  const canAssignPower = creators?.has(myUserId)
                     ? true
                     : power <= getMemberPowerLevel(myUserId);
 
@@ -293,18 +316,10 @@ export function PowerChip({ userId }: { userId: string }) {
                   size="300"
                   radii="300"
                   onClick={() => {
-                    if (room.isSpaceRoom()) {
-                      openSpaceSettings(
-                        room.roomId,
-                        space?.roomId,
-                        SpaceSettingsPage.PermissionsPage
-                      );
+                    if (ct.spaceRooms.read.has(roomId)) {
+                      openSpaceSettings(roomId, spaceId, SpaceSettingsPage.PermissionsPage);
                     } else {
-                      openRoomSettings(
-                        room.roomId,
-                        space?.roomId,
-                        RoomSettingsPage.PermissionsPage
-                      );
+                      openRoomSettings(roomId, spaceId, RoomSettingsPage.PermissionsPage);
                     }
                     close();
                   }}
diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx
index c65e2cef..296c52b3 100644
--- a/src/app/components/user-profile/UserChips.tsx
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -2,7 +2,6 @@ import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react'
 import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
-import { Room } from 'matrix-js-sdk';
 import {
   PopOut,
   Menu,
@@ -20,7 +19,7 @@ import {
   Scroll,
   Avatar,
 } from 'folds';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
 import { getMxIdServer } from '../../utils/matrix';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { stopPropagation } from '../../utils/keyboard';
@@ -28,27 +27,27 @@ import { copyToClipboard } from '../../utils/dom';
 import { getExploreServerPath } from '../../pages/pathUtils';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { factoryRoomIdByAtoZ } from '../../utils/sort';
-import {
-  useMutualRooms,
-  useMutualRoomsSupport,
-  useUnstableMutualRoomsSupport,
-} from '../../hooks/useMutualRooms';
+import { useMutualRooms } from '../../hooks/useMutualRooms';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useDirectRooms } from '../../pages/client/direct/useDirectRooms';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
 import { RoomAvatar, RoomIcon } from '../room-avatar';
-import { getDirectRoomAvatarUrl, getRoomAvatarUrl } from '../../utils/room';
 import { nameInitials } from '../../utils/common';
 import { getMatrixToUser } from '../../plugins/matrix-to';
 import { useTimeoutToggle } from '../../hooks/useTimeoutToggle';
-import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
+import { getIgnoredUsersContent, useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { CutoutCard } from '../cutout-card';
 import { SettingTile } from '../setting-tile';
+import { useClient } from '../../hooks/useClient';
+import { AccountDataType } from '../../../types/matrix/accountData';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 export function ServerChip({ server }: { server: string }) {
-  const mx = useMatrixClient();
-  const myServer = getMxIdServer(mx.getSafeUserId());
+  const ct = useClient();
+  const myServer = getMxIdServer(ct.session.userId);
   const navigate = useNavigate();
   const closeProfile = useCloseUserRoomProfile();
   const [copied, setCopied] = useTimeoutToggle();
@@ -229,24 +228,26 @@ export function ShareChip({ userId }: { userId: string }) {
 }
 
 type MutualRoomsData = {
-  rooms: Room[];
-  spaces: Room[];
-  directs: Room[];
+  rooms: string[];
+  spaces: string[];
+  directs: string[];
 };
 
+const EMPTY_LIST: string[] = [];
 export function MutualRoomsChip({ userId }: { userId: string }) {
-  const mx = useMatrixClient();
-  const mutualRoomSupported = useMutualRoomsSupport();
-  const mutualRoomUnstable = useUnstableMutualRoomsSupport();
+  const ct = useClient();
   const mutualRoomsState = useMutualRooms(userId);
-  console.log(mutualRoomSupported, mutualRoomsState);
+
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const closeUserRoomProfile = useCloseUserRoomProfile();
   const directs = useDirectRooms();
   const useAuthentication = useMediaAuthentication();
 
-  const allJoinedRooms = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allJoinedRooms);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(
+    mutualRoomsState.status === AsyncStatus.Success ? mutualRoomsState.data : EMPTY_LIST
+  );
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
 
   const [cords, setCords] = useState<RectCords>();
 
@@ -264,36 +265,33 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
     };
 
     if (mutualRoomsState.status === AsyncStatus.Success) {
-      const mutualRooms = mutualRoomsState.data
-        .sort(factoryRoomIdByAtoZ(mx))
-        .map(getRoom)
-        .filter((room) => !!room);
-      mutualRooms.forEach((room) => {
-        if (room.isSpaceRoom()) {
-          data.spaces.push(room);
+      const mutualRooms = mutualRoomsState.data.sort(factoryRoomIdByAtoZ(getRoomName));
+
+      mutualRooms.forEach((roomId) => {
+        if (ct.spaceRooms.read.has(roomId)) {
+          data.spaces.push(roomId);
           return;
         }
-        if (directs.includes(room.roomId)) {
-          data.directs.push(room);
+        if (directs.includes(roomId)) {
+          data.directs.push(roomId);
           return;
         }
-        data.rooms.push(room);
+        data.rooms.push(roomId);
       });
     }
     return data;
-  }, [mutualRoomsState, getRoom, directs, mx]);
+  }, [mutualRoomsState, getRoomName, directs, ct]);
 
-  if (
-    userId === mx.getSafeUserId() ||
-    (!mutualRoomSupported && !mutualRoomUnstable) ||
-    mutualRoomsState.status === AsyncStatus.Error
-  ) {
+  if (userId === ct.session.userId || mutualRoomsState.status === AsyncStatus.Error) {
     return null;
   }
 
-  const renderItem = (room: Room) => {
-    const { roomId } = room;
+  const renderItem = (roomId: string) => {
     const dm = directs.includes(roomId);
+    const space = ct.spaceRooms.read.has(roomId);
+
+    const avatarUrl = getRoomAvatar(roomId);
+    const roomName = getRoomName(roomId) ?? 'Unknown';
 
     return (
       <MenuItem
@@ -304,7 +302,7 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
         radii="300"
         style={{ paddingLeft: config.space.S100 }}
         onClick={() => {
-          if (room.isSpaceRoom()) {
+          if (space) {
             navigateSpace(roomId);
           } else {
             navigateRoom(roomId);
@@ -313,29 +311,37 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
         }}
         before={
           <Avatar size="200" radii={dm ? '400' : '300'}>
-            {dm || room.isSpaceRoom() ? (
+            {dm || space ? (
               <RoomAvatar
-                roomId={room.roomId}
+                roomId={roomId}
                 src={
-                  dm
-                    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-                    : getRoomAvatarUrl(mx, room, 96, useAuthentication)
+                  avatarUrl
+                    ? mxcToHttp(ct.session.baseUrl, avatarUrl, useAuthentication).thumbnail({
+                        width: 96,
+                        height: 96,
+                        method: 'crop',
+                      })
+                    : undefined
                 }
-                alt={room.name}
+                alt={roomName}
                 renderFallback={() => (
                   <Text as="span" size="H6">
-                    {nameInitials(room.name)}
+                    {nameInitials(roomName)}
                   </Text>
                 )}
               />
             ) : (
-              <RoomIcon size="100" joinRule={room.getJoinRule()} roomType={room.getType()} />
+              <RoomIcon
+                size="100"
+                joinRule={ct.roomToJoinRule.read.get(roomId)}
+                roomType={ct.roomToType.read.get(roomId)}
+              />
             )}
           </Avatar>
         }
       >
         <Text size="B300" truncate>
-          {room.name}
+          {roomName}
         </Text>
       </MenuItem>
     );
@@ -443,7 +449,7 @@ export function IgnoredUserAlert() {
 }
 
 export function OptionsChip({ userId }: { userId: string }) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [cords, setCords] = useState<RectCords>();
 
   const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -459,8 +465,14 @@ export function OptionsChip({ userId }: { userId: string }) {
     useCallback(async () => {
       const users = ignoredUsers.filter((u) => u !== userId);
       if (!ignored) users.push(userId);
-      await mx.setIgnoredUsers(users);
-    }, [mx, ignoredUsers, userId, ignored])
+
+      return ct.requestAuthJSON(
+        putAccountData({
+          pathParams: { userId: ct.session.userId, type: AccountDataType.IgnoredUserList },
+          body: getIgnoredUsersContent(users),
+        })
+      );
+    }, [ct, ignoredUsers, userId, ignored])
   );
   const ignoring = ignoreState.status === AsyncStatus.Loading;
 
diff --git a/src/app/components/user-profile/UserModeration.tsx b/src/app/components/user-profile/UserModeration.tsx
index 814bb5ba..0bc4d601 100644
--- a/src/app/components/user-profile/UserModeration.tsx
+++ b/src/app/components/user-profile/UserModeration.tsx
@@ -1,14 +1,16 @@
 import { Box, Button, color, config, Icon, Icons, Spinner, Text, Input } from 'folds';
 import React, { useCallback, useRef } from 'react';
+import { postBan, postInvite, postKick, postUnban } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { useRoom } from '../../hooks/useRoom';
 import { CutoutCard } from '../cutout-card';
 import { SettingTile } from '../setting-tile';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { BreakWord } from '../../styles/Text.css';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { timeDayMonYear, timeHourMinute } from '../../utils/time';
+import { useClient } from '../../hooks/useClient';
 
 type UserKickAlertProps = {
   reason?: string;
@@ -64,18 +66,28 @@ type UserBanAlertProps = {
   ts?: number;
 };
 export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBanAlertProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
   const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
 
   const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
   const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
 
-  const [unbanState, unban] = useAsyncCallback<undefined, Error, []>(
+  const [unbanState, unban] = useAsyncCallback<void, Error, []>(
     useCallback(async () => {
-      await mx.unban(room.roomId, userId);
-    }, [mx, room, userId])
+      const resp = await ct.requestAuthJSON(
+        postUnban({
+          pathParams: { roomId },
+          body: { user_id: userId },
+        })
+      );
+
+      const [err] = await parseMatrixResp(resp);
+      if (err) {
+        throw new Error(err.data.error ?? 'Unknown error.');
+      }
+    }, [ct, roomId, userId])
   );
   const banning = unbanState.status === AsyncStatus.Loading;
   const error = unbanState.status === AsyncStatus.Error;
@@ -139,18 +151,25 @@ type UserInviteAlertProps = {
   ts?: number;
 };
 export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: UserInviteAlertProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
   const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
 
   const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
   const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
 
-  const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
+  const [kickState, kick] = useAsyncCallback<void, Error, []>(
     useCallback(async () => {
-      await mx.kick(room.roomId, userId);
-    }, [mx, room, userId])
+      const resp = await ct.requestAuthJSON(
+        postKick({
+          pathParams: { roomId },
+          body: { user_id: userId },
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error);
+    }, [ct, roomId, userId])
   );
   const kicking = kickState.status === AsyncStatus.Loading;
   const error = kickState.status === AsyncStatus.Error;
@@ -215,8 +234,8 @@ type UserModerationProps = {
   canInvite: boolean;
 };
 export function UserModeration({ userId, canKick, canBan, canInvite }: UserModerationProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
   const reasonInputRef = useRef<HTMLInputElement>(null);
 
   const getReason = useCallback((): string | undefined => {
@@ -227,22 +246,43 @@ export function UserModeration({ userId, canKick, canBan, canInvite }: UserModer
     return reason;
   }, []);
 
-  const [kickState, kick] = useAsyncCallback<undefined, Error, []>(
+  const [kickState, kick] = useAsyncCallback<void, Error, []>(
     useCallback(async () => {
-      await mx.kick(room.roomId, userId, getReason());
-    }, [mx, room, userId, getReason])
+      const resp = await ct.requestAuthJSON(
+        postKick({
+          pathParams: { roomId },
+          body: { user_id: userId, reason: getReason() },
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error);
+    }, [ct, roomId, userId, getReason])
   );
 
-  const [banState, ban] = useAsyncCallback<undefined, Error, []>(
+  const [banState, ban] = useAsyncCallback<void, Error, []>(
     useCallback(async () => {
-      await mx.ban(room.roomId, userId, getReason());
-    }, [mx, room, userId, getReason])
+      const resp = await ct.requestAuthJSON(
+        postBan({
+          pathParams: { roomId },
+          body: { user_id: userId, reason: getReason() },
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error);
+    }, [ct, roomId, userId, getReason])
   );
 
-  const [inviteState, invite] = useAsyncCallback<undefined, Error, []>(
+  const [inviteState, invite] = useAsyncCallback<void, Error, []>(
     useCallback(async () => {
-      await mx.invite(room.roomId, userId, getReason());
-    }, [mx, room, userId, getReason])
+      const resp = await ct.requestAuthJSON(
+        postInvite({
+          pathParams: { roomId },
+          body: { user_id: userId, reason: getReason() },
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error);
+    }, [ct, roomId, userId, getReason])
   );
 
   const disabled =
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 78d201ec..b96e7906 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -1,12 +1,15 @@
 import { Box, Button, config, Icon, Icons, Text } from 'folds';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
+import { ObjectReader } from 'neurone/lib/utils';
 import { UserHero, UserHeroName } from './UserHero';
-import { getMxIdServer, mxcUrlToHttp } from '../../utils/matrix';
-import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { getMxIdServer } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { usePowerLevels } from '../../hooks/usePowerLevels';
+import {
+  PowerLevelsContextProvider,
+  usePowerLevels,
+  usePowerLevelsState,
+} from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
 import { useUserPresence } from '../../hooks/useUserPresence';
 import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
@@ -14,7 +17,6 @@ import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { PowerChip } from './PowerChip';
 import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
-import { useMembership } from '../../hooks/useMembership';
 import { Membership } from '../../../types/matrix/room';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
@@ -22,40 +24,54 @@ import { useMemberPowerCompare } from '../../hooks/useMemberPowerCompare';
 import { CreatorChip } from './CreatorChip';
 import { getDirectCreatePath, withSearchParam } from '../../pages/pathUtils';
 import { DirectCreateSearchParams } from '../../pages/paths';
+import { useRoomMember } from '../../hooks/useRoomMember';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { useClient } from '../../hooks/useClient';
+import {
+  PowerLevelTagsContextProvider,
+  usePowerLevelTags,
+  usePowerLevelTagsState,
+} from '../../hooks/usePowerLevelTags';
 
 type UserRoomProfileProps = {
   userId: string;
 };
 export function UserRoomProfile({ userId }: UserRoomProfileProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const navigate = useNavigate();
   const closeUserRoomProfile = useCloseUserRoomProfile();
   const ignoredUsers = useIgnoredUsers();
   const ignored = ignoredUsers.includes(userId);
 
-  const room = useRoom();
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
+  const roomId = useRoom();
+  const stateObjResult = usePowerLevelsState(roomId);
+  const powerLevels = usePowerLevels(stateObjResult.value);
+  const creators = useRoomCreators(roomId);
+  const powerLevelTagsResult = usePowerLevelTagsState(roomId);
+  const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsResult.value);
 
   const permissions = useRoomPermissions(creators, powerLevels);
   const { hasMorePower } = useMemberPowerCompare(creators, powerLevels);
 
-  const myUserId = mx.getSafeUserId();
-  const creator = creators.has(userId);
+  const myUserId = ct.session.userId;
+  const creator = creators?.has(userId);
 
   const canKickUser = permissions.action('kick', myUserId) && hasMorePower(myUserId, userId);
   const canBanUser = permissions.action('ban', myUserId) && hasMorePower(myUserId, userId);
   const canUnban = permissions.action('ban', myUserId);
   const canInvite = permissions.action('invite', myUserId);
 
-  const member = room.getMember(userId);
-  const membership = useMembership(room, userId);
+  const { memberEventResult, getMembership, getName, getAvatar } = useRoomMember(roomId, userId);
+
+  const membership = getMembership();
 
   const server = getMxIdServer(userId);
-  const displayName = getMemberDisplayName(room, userId);
-  const avatarMxc = getMemberAvatarMxc(room, userId);
-  const avatarUrl = (avatarMxc && mxcUrlToHttp(mx, avatarMxc, useAuthentication)) ?? undefined;
+  const displayName = getName();
+  const avatarMxc = getAvatar();
+  const avatarUrl = avatarMxc
+    ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).url()
+    : undefined;
 
   const presence = useUserPresence(userId);
 
@@ -68,75 +84,78 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
   };
 
   return (
-    <Box direction="Column">
-      <UserHero
-        userId={userId}
-        avatarUrl={avatarUrl}
-        presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
-      />
-      <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
-        <Box direction="Column" gap="400">
-          <Box gap="400" alignItems="Start">
-            <UserHeroName displayName={displayName} userId={userId} />
-            {userId !== myUserId && (
-              <Box shrink="No">
-                <Button
-                  size="300"
-                  variant="Primary"
-                  fill="Solid"
-                  radii="300"
-                  before={<Icon size="50" src={Icons.Message} filled />}
-                  onClick={handleMessage}
-                >
-                  <Text size="B300">Message</Text>
-                </Button>
+    <PowerLevelsContextProvider value={powerLevels}>
+      <PowerLevelTagsContextProvider value={powerLevelTags}>
+        <Box direction="Column">
+          <UserHero
+            userId={userId}
+            avatarUrl={avatarUrl}
+            presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
+          />
+          <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
+            <Box direction="Column" gap="400">
+              <Box gap="400" alignItems="Start">
+                <UserHeroName displayName={displayName} userId={userId} />
+                {userId !== myUserId && (
+                  <Box shrink="No">
+                    <Button
+                      size="300"
+                      variant="Primary"
+                      fill="Solid"
+                      radii="300"
+                      before={<Icon size="50" src={Icons.Message} filled />}
+                      onClick={handleMessage}
+                    >
+                      <Text size="B300">Message</Text>
+                    </Button>
+                  </Box>
+                )}
               </Box>
+              <Box alignItems="Center" gap="200" wrap="Wrap">
+                {server && <ServerChip server={server} />}
+                <ShareChip userId={userId} />
+                {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
+                {userId !== myUserId && <MutualRoomsChip userId={userId} />}
+                {userId !== myUserId && <OptionsChip userId={userId} />}
+              </Box>
+            </Box>
+            {ignored && <IgnoredUserAlert />}
+            {memberEventResult.value && membership === Membership.Ban && (
+              <UserBanAlert
+                userId={userId}
+                reason={ObjectReader.string(memberEventResult.value.event.content, 'reason')}
+                canUnban={canUnban}
+                bannedBy={memberEventResult.value.event.sender}
+                ts={memberEventResult.value.event.origin_server_ts}
+              />
             )}
-          </Box>
-          <Box alignItems="Center" gap="200" wrap="Wrap">
-            {server && <ServerChip server={server} />}
-            <ShareChip userId={userId} />
-            {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
-            {userId !== myUserId && <MutualRoomsChip userId={userId} />}
-            {userId !== myUserId && <OptionsChip userId={userId} />}
+            {memberEventResult.value &&
+              membership === Membership.Leave &&
+              memberEventResult.value.event.sender !== userId && (
+                <UserKickAlert
+                  reason={ObjectReader.string(memberEventResult.value.event.content, 'reason')}
+                  kickedBy={memberEventResult.value.event.sender}
+                  ts={memberEventResult.value.event.origin_server_ts}
+                />
+              )}
+            {memberEventResult.value && membership === Membership.Invite && (
+              <UserInviteAlert
+                userId={userId}
+                reason={ObjectReader.string(memberEventResult.value.event.content, 'reason')}
+                canKick={canKickUser}
+                invitedBy={memberEventResult.value.event.sender}
+                ts={memberEventResult.value.event.origin_server_ts}
+              />
+            )}
+            <UserModeration
+              userId={userId}
+              canInvite={canInvite && membership === Membership.Leave}
+              canKick={canKickUser && membership === Membership.Join}
+              canBan={canBanUser && membership !== Membership.Ban}
+            />
           </Box>
         </Box>
-        {ignored && <IgnoredUserAlert />}
-        {member && membership === Membership.Ban && (
-          <UserBanAlert
-            userId={userId}
-            reason={member.events.member?.getContent().reason}
-            canUnban={canUnban}
-            bannedBy={member.events.member?.getSender()}
-            ts={member.events.member?.getTs()}
-          />
-        )}
-        {member &&
-          membership === Membership.Leave &&
-          member.events.member &&
-          member.events.member.getSender() !== userId && (
-            <UserKickAlert
-              reason={member.events.member?.getContent().reason}
-              kickedBy={member.events.member?.getSender()}
-              ts={member.events.member?.getTs()}
-            />
-          )}
-        {member && membership === Membership.Invite && (
-          <UserInviteAlert
-            userId={userId}
-            reason={member.events.member?.getContent().reason}
-            canKick={canKickUser}
-            invitedBy={member.events.member?.getSender()}
-            ts={member.events.member?.getTs()}
-          />
-        )}
-        <UserModeration
-          userId={userId}
-          canInvite={canInvite && membership === Membership.Leave}
-          canKick={canKickUser && membership === Membership.Join}
-          canBan={canBanUser && membership !== Membership.Ban}
-        />
-      </Box>
-    </Box>
+      </PowerLevelTagsContextProvider>
+    </PowerLevelsContextProvider>
   );
 }
diff --git a/src/app/hooks/useMemberPowerCompare.ts b/src/app/hooks/useMemberPowerCompare.ts
index 72163edf..14f70dd3 100644
--- a/src/app/hooks/useMemberPowerCompare.ts
+++ b/src/app/hooks/useMemberPowerCompare.ts
@@ -1,15 +1,18 @@
 import { useCallback } from 'react';
 import { IPowerLevels, readPowerLevel } from './usePowerLevels';
 
-export const useMemberPowerCompare = (creators: Set<string>, powerLevels: IPowerLevels) => {
+export const useMemberPowerCompare = (
+  creators: Set<string> | undefined,
+  powerLevels: IPowerLevels
+) => {
   /**
    * returns `true` if `userIdA` has more power than `userIdB`
    * returns `false` otherwise
    */
   const hasMorePower = useCallback(
     (userIdA: string, userIdB: string): boolean => {
-      const aIsCreator = creators.has(userIdA);
-      const bIsCreator = creators.has(userIdB);
+      const aIsCreator = creators?.has(userIdA);
+      const bIsCreator = creators?.has(userIdB);
       if (aIsCreator && bIsCreator) return false;
       if (aIsCreator) return true;
       if (bIsCreator) return false;
diff --git a/src/app/hooks/useMutualRooms.ts b/src/app/hooks/useMutualRooms.ts
index 9a51e21d..893449ff 100644
--- a/src/app/hooks/useMutualRooms.ts
+++ b/src/app/hooks/useMutualRooms.ts
@@ -1,16 +1,15 @@
 import { useCallback } from 'react';
-import { MatrixClient, Method } from 'matrix-js-sdk';
-import { useMatrixClient } from './useMatrixClient';
+import { withSearchParams } from 'neurone/lib/api/utils';
+import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
+import { ClientContext } from '../../client/context';
 import { AsyncState, useAsyncCallbackValue } from './useAsyncCallback';
 import { useUnstableFeatureSupport, useSpecVersions } from './useSpecVersions';
+import { useClient } from './useClient';
 
 export const useUnstableMutualRoomsSupport = (): boolean => {
   const checkSupport = useUnstableFeatureSupport();
 
-  const supported =
-    checkSupport('uk.half-shot.msc2666') ||
-    checkSupport('uk.half-shot.msc2666.mutual_rooms') ||
-    checkSupport('uk.half-shot.msc2666.query_mutual_rooms');
+  const supported = checkSupport('uk.half-shot.msc2666.query_mutual_rooms');
 
   return !!supported;
 };
@@ -31,24 +30,33 @@ type MutualRoomsOK = {
   count: number;
 };
 
-const fetchAllMutualRooms = async (mx: MatrixClient, userId: string): Promise<string[]> => {
+const fetchAllMutualRooms = async (
+  ct: ClientContext,
+  userId: string,
+  unstable?: boolean
+): Promise<string[]> => {
   const mutualRooms: Set<string> = new Set();
 
   let nextBatch: string | undefined;
   do {
     // eslint-disable-next-line no-await-in-loop
-    const result = await mx.http.authedRequest<MutualRoomsOK>(
-      Method.Get,
-      '/mutual_rooms',
-      {
-        user_id: userId,
-        from: nextBatch,
-      },
-      undefined,
-      {
-        prefix: '/_matrix/client/v1',
-      }
-    );
+    const resp = await ct.requestAuthJSON({
+      method: 'GET',
+      path: withSearchParams(
+        unstable
+          ? '/_matrix/client/unstable/uk.half-shot.msc2666/user/mutual_rooms'
+          : '/_matrix/client/v1/mutual_rooms',
+        {
+          user_id: userId,
+          from: nextBatch,
+        }
+      ),
+      requireAuthentication: true,
+    });
+    // eslint-disable-next-line no-await-in-loop
+    const [err, result] = await parseMatrixResp<MutualRoomsOK>(resp);
+    if (err) throw new Error(printMatrixError(err));
+
     result.joined.forEach((r) => mutualRooms.add(r));
     nextBatch = result.next_batch;
   } while (typeof nextBatch === 'string');
@@ -57,17 +65,19 @@ const fetchAllMutualRooms = async (mx: MatrixClient, userId: string): Promise<st
 };
 
 export const useMutualRooms = (userId: string): AsyncState<string[], unknown> => {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
   const unstableSupport = useUnstableMutualRoomsSupport();
   const support = useMutualRoomsSupport();
 
   const [mutualRoomsState] = useAsyncCallbackValue(
-    useCallback(() => {
-      if (support) return fetchAllMutualRooms(mx, userId);
-      if (unstableSupport) return mx._unstable_getSharedRooms(userId);
-      return Promise.resolve([]);
-    }, [mx, userId, unstableSupport, support])
+    useCallback(async () => {
+      if (support) return fetchAllMutualRooms(ct, userId);
+      if (unstableSupport) return fetchAllMutualRooms(ct, userId, true);
+
+      const memberships = await ct.storage.joinRoomMember.read.queryIndex('userId', userId);
+      return memberships.map((membership) => membership.roomId);
+    }, [ct, userId, unstableSupport, support])
   );
 
   return mutualRoomsState;
diff --git a/src/app/hooks/usePowerLevels.ts b/src/app/hooks/usePowerLevels.ts
index 0516bb6a..ef549c1f 100644
--- a/src/app/hooks/usePowerLevels.ts
+++ b/src/app/hooks/usePowerLevels.ts
@@ -6,7 +6,6 @@ import { StateEvent, StateEventType } from '../../types/matrix/room';
 import { getJoinRoomStateId, JoinRoomStateObject } from '../../client/storage/collections';
 import { useClient } from './useClient';
 import { useObservableValuePromise } from './useObservableValue';
-import { ClientContext } from '../../client/context';
 
 export type PowerLevelActions = 'invite' | 'redact' | 'kick' | 'ban' | 'historical';
 export type PowerLevelNotificationsAction = 'room';
@@ -243,8 +242,13 @@ export const applyPermissionPower = (
     if (typeof location.key === 'string') {
       const users = powerLevels.users ?? {};
       users[location.key] = power;
+
+      if (powerLevels.users_default === power) {
+        delete users[location.key];
+      }
       // eslint-disable-next-line no-param-reassign
       powerLevels.users = users;
+
       return powerLevels;
     }
     // eslint-disable-next-line no-param-reassign
diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts
index 5137950e..537efb1a 100644
--- a/src/app/hooks/useUserPresence.ts
+++ b/src/app/hooks/useUserPresence.ts
@@ -1,12 +1,8 @@
-import { useEffect, useMemo, useState } from 'react';
-import { User, UserEvent, UserEventHandlerMap } from 'matrix-js-sdk';
-import { useMatrixClient } from './useMatrixClient';
-
-export enum Presence {
-  Online = 'online',
-  Unavailable = 'unavailable',
-  Offline = 'offline',
-}
+import { useMemo } from 'react';
+import { Presence } from 'neurone/lib/api/types';
+import { useClient } from './useClient';
+import { useObservableValuePromise } from './useObservableValue';
+import { PresenceObject } from '../../client/storage/collections';
 
 export type UserPresence = {
   presence: Presence;
@@ -15,44 +11,31 @@ export type UserPresence = {
   lastActiveTs?: number;
 };
 
-const getUserPresence = (user: User): UserPresence => ({
-  presence: user.presence as Presence,
-  status: user.presenceStatusMsg,
-  active: user.currentlyActive,
-  lastActiveTs: user.getLastActiveTs(),
+const getUserPresence = (user?: PresenceObject): UserPresence => ({
+  presence: user?.presence ?? 'offline',
+  status: user?.content.status_msg ?? undefined,
+  active: user?.content.currently_active ?? false,
+  lastActiveTs: user?.content.last_active_ago,
 });
 
 export const useUserPresence = (userId: string): UserPresence | undefined => {
-  const mx = useMatrixClient();
-  const user = mx.getUser(userId);
+  const ct = useClient();
+  const presencePromise = useMemo(
+    () => ct.storage.presence.observableRead.get(userId),
+    [ct, userId]
+  );
+  const presenceResult = useObservableValuePromise(presencePromise);
+  const presenceObj = presenceResult.value;
 
-  const [presence, setPresence] = useState(() => (user ? getUserPresence(user) : undefined));
-
-  useEffect(() => {
-    const updatePresence: UserEventHandlerMap[UserEvent.Presence] = (event, u) => {
-      if (u.userId === user?.userId) {
-        setPresence(getUserPresence(user));
-      }
-    };
-    user?.on(UserEvent.Presence, updatePresence);
-    user?.on(UserEvent.CurrentlyActive, updatePresence);
-    user?.on(UserEvent.LastPresenceTs, updatePresence);
-    return () => {
-      user?.removeListener(UserEvent.Presence, updatePresence);
-      user?.removeListener(UserEvent.CurrentlyActive, updatePresence);
-      user?.removeListener(UserEvent.LastPresenceTs, updatePresence);
-    };
-  }, [user]);
-
-  return presence;
+  return getUserPresence(presenceObj);
 };
 
 export const usePresenceLabel = (): Record<Presence, string> =>
   useMemo(
     () => ({
-      [Presence.Online]: 'Active',
-      [Presence.Unavailable]: 'Busy',
-      [Presence.Offline]: 'Away',
+      online: 'Active',
+      unavailable: 'Busy',
+      offline: 'Away',
     }),
     []
   );
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 1ec49ad5..afe3c4ae 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -135,8 +135,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                   >
                     <Outlet />
                   </ClientLayout>
-                  {/*<SearchModalRenderer />
-                  <UserRoomProfileRenderer />*/}
+                  {/*<SearchModalRenderer />*/}
+                  <UserRoomProfileRenderer />
                   <CreateRoomModalRenderer />
                   <CreateSpaceModalRenderer />
                   {/*<RoomSettingsRenderer />

From c7d4c56a5c1f3b68ba69782dc6f826b27ed74278 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 21 Jul 2026 15:58:40 +0530
Subject: [PATCH 010/158] Create useRoomMember hook

---
 src/app/hooks/useRoomMember.ts | 50 ++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)
 create mode 100644 src/app/hooks/useRoomMember.ts

diff --git a/src/app/hooks/useRoomMember.ts b/src/app/hooks/useRoomMember.ts
new file mode 100644
index 00000000..56da8f63
--- /dev/null
+++ b/src/app/hooks/useRoomMember.ts
@@ -0,0 +1,50 @@
+import { useCallback, useMemo } from 'react';
+import { useClient } from './useClient';
+import { useObservableValuePromise } from './useObservableValue';
+import { getMxIdLocalPart } from '../utils/matrix';
+import {
+  roomMemberContentAvatarUrl,
+  roomMemberContentDisplayname,
+  roomMemberContentMembership,
+} from '../utils/room';
+import { getJoinRoomMemberId } from '../../client/storage/collections';
+
+export const useRoomMember = (roomId: string, userId: string) => {
+  const ct = useClient();
+  const memberEventPromise = useMemo(
+    () => ct.storage.joinRoomMember.observableRead.get(getJoinRoomMemberId(roomId, userId)),
+    [ct, roomId, userId]
+  );
+
+  const memberEventResult = useObservableValuePromise(memberEventPromise);
+
+  const member = memberEventResult.value;
+
+  const getName = useCallback(() => {
+    const content = member?.event.content;
+    const displayName = content ? roomMemberContentDisplayname(content) : undefined;
+
+    return displayName || getMxIdLocalPart(userId) || userId;
+  }, [member, userId]);
+
+  const getAvatar = useCallback(() => {
+    const content = member?.event.content;
+    if (!content) return undefined;
+
+    return roomMemberContentAvatarUrl(content);
+  }, [member]);
+
+  const getMembership = useCallback(() => {
+    const content = member?.event.content;
+    if (!content) return undefined;
+
+    return roomMemberContentMembership(content);
+  }, [member]);
+
+  return {
+    memberEventResult,
+    getName,
+    getAvatar,
+    getMembership,
+  };
+};

From 3fbf379d97b640e9da62e83a5d46dff671a4df55 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 21 Jul 2026 15:59:05 +0530
Subject: [PATCH 011/158] fix presence appear when doesn't exist

---
 src/app/hooks/useUserPresence.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/hooks/useUserPresence.ts b/src/app/hooks/useUserPresence.ts
index 537efb1a..4edfeeb1 100644
--- a/src/app/hooks/useUserPresence.ts
+++ b/src/app/hooks/useUserPresence.ts
@@ -11,11 +11,11 @@ export type UserPresence = {
   lastActiveTs?: number;
 };
 
-const getUserPresence = (user?: PresenceObject): UserPresence => ({
-  presence: user?.presence ?? 'offline',
-  status: user?.content.status_msg ?? undefined,
-  active: user?.content.currently_active ?? false,
-  lastActiveTs: user?.content.last_active_ago,
+const getUserPresence = (user: PresenceObject): UserPresence => ({
+  presence: user.presence ?? 'offline',
+  status: user.content.status_msg ?? undefined,
+  active: user.content.currently_active ?? false,
+  lastActiveTs: user.content.last_active_ago,
 });
 
 export const useUserPresence = (userId: string): UserPresence | undefined => {
@@ -27,7 +27,7 @@ export const useUserPresence = (userId: string): UserPresence | undefined => {
   const presenceResult = useObservableValuePromise(presencePromise);
   const presenceObj = presenceResult.value;
 
-  return getUserPresence(presenceObj);
+  return presenceObj ? getUserPresence(presenceObj) : undefined;
 };
 
 export const usePresenceLabel = (): Record<Presence, string> =>

From b55e66da7dfe9e9d75049143715410843c82cec1 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 21 Jul 2026 15:59:19 +0530
Subject: [PATCH 012/158] fix room header

---
 src/app/features/room/Room.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 1a7e2141..fa66e8c8 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -25,6 +25,7 @@ import { useObservableValue, useObservableValueOptionally } from '../../hooks/us
 import { useClient } from '../../hooks/useClient';
 import { ThreadView } from './thread-view';
 import { TimelineViewProvider } from './hooks/useTimeline';
+import { RoomViewHeader } from './RoomViewHeader';
 
 export function Room() {
   const { eventId } = useParams();
@@ -67,7 +68,12 @@ export function Room() {
           {timeline && (
             <Box grow="Yes">
               <TimelineViewProvider value={timeline}>
-                <RoomView key={roomId} timeline={timeline} eventId={eventId} />
+                <Box grow="Yes" direction="Column">
+                  <RoomViewHeader />
+                  <Box grow="Yes">
+                    <RoomView key={roomId} timeline={timeline} eventId={eventId} />
+                  </Box>
+                </Box>
               </TimelineViewProvider>
 
               {threadTimeline ? (

From 33fc3a00a948eda8413ec6acdc4351209a1c2e93 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 21 Jul 2026 23:16:43 +0530
Subject: [PATCH 013/158] display presence status message in profile banner

---
 src/app/components/presence/Presence.tsx      |  5 +-
 src/app/components/user-profile/UserHero.tsx  | 15 ++++--
 .../user-profile/UserRoomProfile.tsx          |  2 +
 src/app/components/user-profile/styles.css.ts | 52 ++++++++++++++++++-
 4 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/src/app/components/presence/Presence.tsx b/src/app/components/presence/Presence.tsx
index a3253673..380ab731 100644
--- a/src/app/components/presence/Presence.tsx
+++ b/src/app/components/presence/Presence.tsx
@@ -23,10 +23,9 @@ const PresenceToColor: Record<Presence, MainColor> = {
 
 type PresenceBadgeProps = {
   presence: Presence;
-  status?: string;
   size?: '200' | '300' | '400' | '500';
 };
-export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
+export function PresenceBadge({ presence, size }: PresenceBadgeProps) {
   const label = usePresenceLabel();
   const badgeLabelId = useId();
 
@@ -40,8 +39,6 @@ export function PresenceBadge({ presence, status, size }: PresenceBadgeProps) {
         <Tooltip id={badgeLabelId}>
           <Box style={{ maxWidth: toRem(250) }} alignItems="Baseline" gap="100">
             <Text size="L400">{label[presence]}</Text>
-            {status && <Text size="T200">•</Text>}
-            {status && <Text size="T200">{status}</Text>}
           </Box>
         </Tooltip>
       }
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 0e7fb748..0425f950 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -30,6 +30,8 @@ type UserHeroProps = {
 export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
   const [viewAvatar, setViewAvatar] = useState<string>();
 
+  const { status } = presence ?? {};
+
   return (
     <Box direction="Column" className={css.UserHero}>
       <div
@@ -46,9 +48,7 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
       <div className={css.UserHeroAvatarContainer}>
         <AvatarPresence
           className={css.UserAvatarContainer}
-          badge={
-            presence && <PresenceBadge presence={presence.presence} status={presence.status} />
-          }
+          badge={presence && <PresenceBadge presence={presence.presence} />}
         >
           <Avatar
             as={avatarUrl ? 'button' : 'div'}
@@ -65,6 +65,15 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
             />
           </Avatar>
         </AvatarPresence>
+        {status && (
+          <div className={css.UserHeroStatus}>
+            <div className={css.UserHeroStatusContent}>
+              <Text className={classNames(BreakWord, LineClamp3)} size="T200">
+                {status}
+              </Text>
+            </div>
+          </div>
+        )}
         {viewAvatar && (
           <Overlay open backdrop={<OverlayBackdrop />}>
             <OverlayCenter>
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index b96e7906..f5b98af0 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -83,6 +83,8 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
     navigate(withSearchParam(getDirectCreatePath(), directSearchParam));
   };
 
+  ct.storage.presence.read.getAll().then((a) => console.log(a.filter((p) => p.content.status_msg)));
+
   return (
     <PowerLevelsContextProvider value={powerLevels}>
       <PowerLevelTagsContextProvider value={powerLevelTags}>
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index 62272a2e..7ccbd2d0 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 import { color, config, toRem } from 'folds';
 
 export const UserHeader = style({
@@ -52,3 +52,53 @@ export const UserHeroAvatarImg = style({
     },
   },
 });
+
+const StatusAnime = keyframes({
+  '0%': {
+    transform: 'translateY(2px)',
+  },
+  '100%': {
+    transform: 'translateY(0)',
+  },
+});
+
+export const UserHeroStatus = style({
+  position: 'absolute',
+  left: toRem(78),
+  bottom: toRem(58),
+  marginRight: config.space.S100,
+
+  animation: `${StatusAnime} 100ms`,
+
+  selectors: {
+    '&::before, &::after': {
+      content: '',
+      position: 'absolute',
+      left: toRem(5),
+      bottom: toRem(-4),
+
+      width: toRem(10),
+      height: toRem(10),
+
+      background: color.Surface.Container,
+      borderRadius: 999,
+      transform: 'rotate(45deg)',
+    },
+    '&::after': {
+      left: toRem(5),
+      bottom: toRem(-10),
+
+      width: toRem(5),
+      height: toRem(5),
+    },
+  },
+});
+
+export const UserHeroStatusContent = style({
+  position: 'relative',
+  zIndex: 1,
+  padding: `${config.space.S100} ${config.space.S200}`,
+  backgroundColor: color.Surface.Container,
+  color: color.Surface.OnContainer,
+  borderRadius: config.radii.R500,
+});

From 12eda423bb525539887f6798b939d2d2af455ba1 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 21 Jul 2026 23:20:27 +0530
Subject: [PATCH 014/158] remove logs and fix avatar container corner visible

---
 src/app/components/user-profile/UserRoomProfile.tsx | 2 --
 src/app/components/user-profile/styles.css.ts       | 1 -
 2 files changed, 3 deletions(-)

diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index f5b98af0..b96e7906 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -83,8 +83,6 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
     navigate(withSearchParam(getDirectCreatePath(), directSearchParam));
   };
 
-  ct.storage.presence.read.getAll().then((a) => console.log(a.filter((p) => p.content.status_msg)));
-
   return (
     <PowerLevelsContextProvider value={powerLevels}>
       <PowerLevelTagsContextProvider value={powerLevelTags}>
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index 7ccbd2d0..16acd728 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -35,7 +35,6 @@ export const UserAvatarContainer = style({
   left: config.space.S400,
   top: 0,
   transform: 'translateY(-50%)',
-  backgroundColor: color.Surface.Container,
 });
 export const UserHeroAvatar = style({
   outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,

From a981a4d47ef04a2c906a9e5633d2b168407d6b63 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 22 Jul 2026 09:10:06 +0530
Subject: [PATCH 015/158] fix transparent avatar background color in profile

---
 src/app/components/user-profile/styles.css.ts | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index 16acd728..8e9392cf 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -35,6 +35,9 @@ export const UserAvatarContainer = style({
   left: config.space.S400,
   top: 0,
   transform: 'translateY(-50%)',
+  // backgroundcolor for transparent image
+  backgroundColor: color.Surface.Container,
+  borderRadius: config.radii.R400,
 });
 export const UserHeroAvatar = style({
   outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,

From edc48f7a5ac8dcecbb0a28d018bafd5e77763042 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 22 Jul 2026 09:50:09 +0530
Subject: [PATCH 016/158] linkify user status

---
 src/app/components/user-profile/UserHero.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 0425f950..c69e3210 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -12,6 +12,7 @@ import {
 } from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
+import Linkify from 'linkify-react';
 import * as css from './styles.css';
 import { UserAvatar } from '../user-avatar';
 import colorMXID from '../../../util/colorMXID';
@@ -21,6 +22,7 @@ import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
 import { ImageViewer } from '../image-viewer';
 import { stopPropagation } from '../../utils/keyboard';
+import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
 
 type UserHeroProps = {
   userId: string;
@@ -69,7 +71,7 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
           <div className={css.UserHeroStatus}>
             <div className={css.UserHeroStatusContent}>
               <Text className={classNames(BreakWord, LineClamp3)} size="T200">
-                {status}
+                <Linkify options={LINKIFY_OPTS}>{status}</Linkify>
               </Text>
             </div>
           </div>

From c2f483e0a9e0aaeccc92094bb5227dc9da993d6d Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 22 Jul 2026 10:07:24 +0530
Subject: [PATCH 017/158] show presence in member drawer

---
 src/app/components/presence/styles.css.ts |  2 +-
 src/app/features/room/MembersDrawer.tsx   | 34 ++++++++++++++++-------
 2 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/app/components/presence/styles.css.ts b/src/app/components/presence/styles.css.ts
index 12ea7f18..0d7e91d8 100644
--- a/src/app/components/presence/styles.css.ts
+++ b/src/app/components/presence/styles.css.ts
@@ -15,7 +15,7 @@ export const AvatarPresenceBadge = style({
   zIndex: 1,
 
   display: 'flex',
-  padding: config.borderWidth.B600,
+  padding: '5%',
   backgroundColor: 'inherit',
   borderRadius: config.radii.Pill,
   overflow: 'hidden',
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index 7a6ff8b2..d2be4e53 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -62,6 +62,8 @@ import { JoinRoomMemberObject } from '../../../client/storage/collections';
 import { ClientContext } from '../../../client/context';
 import { mxcToHttp } from '../../../client/mxcToHttp';
 import { usePendingMembers } from '../../hooks/usePendingMembers';
+import { useUserPresence } from '../../hooks/useUserPresence';
+import { AvatarPresence, PresenceBadge } from '../../components/presence';
 
 type MemberDrawerHeaderProps = {
   joinedMemberCount: number;
@@ -124,6 +126,8 @@ function MemberItem({
   pressed,
   typing,
 }: MemberItemProps) {
+  const presence = useUserPresence(member.userId);
+
   const name = getName(member.userId);
   const avatarMxcUrl = getAvatar(member.userId);
   const avatarUrl = avatarMxcUrl
@@ -143,14 +147,19 @@ function MemberItem({
       radii="400"
       onClick={onClick}
       before={
-        <Avatar size="200">
-          <UserAvatar
-            userId={member.userId}
-            src={avatarUrl ?? undefined}
-            alt={name}
-            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
-          />
-        </Avatar>
+        <AvatarPresence
+          variant="Background"
+          badge={presence && <PresenceBadge size="200" presence={presence.presence} />}
+        >
+          <Avatar size="200">
+            <UserAvatar
+              userId={member.userId}
+              src={avatarUrl ?? undefined}
+              alt={name}
+              renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+            />
+          </Avatar>
+        </AvatarPresence>
       }
       after={
         typing && (
@@ -160,10 +169,15 @@ function MemberItem({
         )
       }
     >
-      <Box grow="Yes">
-        <Text size="T400" truncate>
+      <Box grow="Yes" direction="Column">
+        <Text size="T300" truncate>
           {name}
         </Text>
+        {presence?.status && (
+          <Text size="T200" priority="300" truncate>
+            {presence.status}
+          </Text>
+        )}
       </Box>
     </MenuItem>
   );

From 5a786984d0ec48a080ca8751960d085a094f3eb6 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 22 Jul 2026 11:44:44 +0530
Subject: [PATCH 018/158] fix room card spinner color

---
 src/app/components/room-card/RoomCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/room-card/RoomCard.tsx b/src/app/components/room-card/RoomCard.tsx
index 0ce5f337..2cdaf40a 100644
--- a/src/app/components/room-card/RoomCard.tsx
+++ b/src/app/components/room-card/RoomCard.tsx
@@ -270,7 +270,7 @@ export const RoomCard = as<'div', RoomCardProps>(
             variant="Secondary"
             size="300"
             disabled={joining}
-            before={joining && <Spinner size="50" variant="Secondary" fill="Soft" />}
+            before={joining && <Spinner size="50" variant="Secondary" fill="Solid" />}
           >
             <Text size="B300" truncate>
               {joining ? 'Joining' : 'Join'}

From 7dae0fa7cc004bbb3a0926e1ca33291ab18f2d0b Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 22 Jul 2026 12:41:28 +0530
Subject: [PATCH 019/158] render profile banner

---
 src/app/components/user-profile/UserHero.tsx    | 17 +++++++++++++----
 .../components/user-profile/UserRoomProfile.tsx |  7 +++++++
 src/app/components/user-profile/styles.css.ts   |  4 +++-
 src/app/hooks/useUserProfile.ts                 | 13 ++++++++++++-
 4 files changed, 35 insertions(+), 6 deletions(-)

diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index c69e3210..73cb7cac 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -27,9 +27,10 @@ import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
 type UserHeroProps = {
   userId: string;
   avatarUrl?: string;
+  bannerUrl?: string;
   presence?: UserPresence;
 };
-export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
+export function UserHero({ userId, avatarUrl, bannerUrl, presence }: UserHeroProps) {
   const [viewAvatar, setViewAvatar] = useState<string>();
 
   const { status } = presence ?? {};
@@ -40,11 +41,19 @@ export function UserHero({ userId, avatarUrl, presence }: UserHeroProps) {
         className={css.UserHeroCoverContainer}
         style={{
           backgroundColor: colorMXID(userId),
-          filter: avatarUrl ? undefined : 'brightness(50%)',
+          filter: bannerUrl && !status ? undefined : 'brightness(50%)',
         }}
       >
-        {avatarUrl && (
-          <img className={css.UserHeroCover} src={avatarUrl} alt={userId} draggable="false" />
+        {bannerUrl && (
+          <img
+            className={classNames(
+              css.UserHeroCover,
+              avatarUrl === bannerUrl && css.UserHeroCoverBlurred
+            )}
+            src={bannerUrl}
+            alt={userId}
+            draggable="false"
+          />
         )}
       </div>
       <div className={css.UserHeroAvatarContainer}>
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index b96e7906..85155a26 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -32,6 +32,7 @@ import {
   usePowerLevelTags,
   usePowerLevelTagsState,
 } from '../../hooks/usePowerLevelTags';
+import { useUserProfile } from '../../hooks/useUserProfile';
 
 type UserRoomProfileProps = {
   userId: string;
@@ -74,6 +75,11 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
     : undefined;
 
   const presence = useUserPresence(userId);
+  const profile = useUserProfile(userId);
+
+  const bannerUrl = profile?.bannerUrl
+    ? mxcToHttp(ct.session.baseUrl, profile.bannerUrl, useAuthentication).url()
+    : avatarUrl;
 
   const handleMessage = () => {
     closeUserRoomProfile();
@@ -90,6 +96,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
           <UserHero
             userId={userId}
             avatarUrl={avatarUrl}
+            bannerUrl={bannerUrl}
             presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
           />
           <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index 8e9392cf..7a5578af 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -15,13 +15,15 @@ export const UserHero = style({
 });
 
 export const UserHeroCoverContainer = style({
-  height: toRem(96),
+  height: toRem(113),
   overflow: 'hidden',
 });
 export const UserHeroCover = style({
   height: '100%',
   width: '100%',
   objectFit: 'cover',
+});
+export const UserHeroCoverBlurred = style({
   filter: 'blur(16px)',
   transform: 'scale(2)',
 });
diff --git a/src/app/hooks/useUserProfile.ts b/src/app/hooks/useUserProfile.ts
index 0f8c46dd..0dfdb82e 100644
--- a/src/app/hooks/useUserProfile.ts
+++ b/src/app/hooks/useUserProfile.ts
@@ -7,6 +7,8 @@ import { useClient } from './useClient';
 export type UserProfile = {
   avatarUrl?: string;
   displayName?: string;
+  bannerUrl?: string;
+  timezone?: string;
 };
 export const useUserProfile = (userId: string): UserProfile | undefined => {
   const ct = useClient();
@@ -18,10 +20,19 @@ export const useUserProfile = (userId: string): UserProfile | undefined => {
       })
     );
 
-    const [, profile] = await parseMatrixResp<GetProfileOK>(response);
+    const [, profile] = await parseMatrixResp<
+      GetProfileOK & {
+        'chat.commet.profile_banner'?: string;
+        'm.banner_url'?: string;
+        'm.tz'?: string;
+      }
+    >(response);
+
     return {
       avatarUrl: profile?.avatar_url || undefined,
       displayName: profile?.displayname || undefined,
+      bannerUrl: profile?.['m.banner_url'] ?? profile?.['chat.commet.profile_banner'] ?? undefined,
+      timezone: profile?.['m.tz'] ?? undefined,
     };
   }, [ct, userId]);
 

From 9a0bba256cc3d798c734cdc45c2d5ceb01ed2c8c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 22 Jul 2026 14:09:26 +0530
Subject: [PATCH 020/158] display user timezone in profile

---
 src/app/components/user-profile/UserHero.tsx  | 42 +++++++++++++++++--
 .../user-profile/UserRoomProfile.tsx          |  6 ++-
 src/app/styles/Text.css.ts                    | 17 ++++++++
 3 files changed, 61 insertions(+), 4 deletions(-)

diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 73cb7cac..a486779b 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -9,6 +9,8 @@ import {
   OverlayBackdrop,
   OverlayCenter,
   Text,
+  Tooltip,
+  TooltipProvider,
 } from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
@@ -17,12 +19,14 @@ import * as css from './styles.css';
 import { UserAvatar } from '../user-avatar';
 import colorMXID from '../../../util/colorMXID';
 import { getMxIdLocalPart } from '../../utils/matrix';
-import { BreakWord, LineClamp3 } from '../../styles/Text.css';
+import { BreakWord, DotDivider, HoverUnderline, LineClamp3 } from '../../styles/Text.css';
 import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
 import { ImageViewer } from '../image-viewer';
 import { stopPropagation } from '../../utils/keyboard';
 import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
+import { useSetting } from '../../state/hooks/settings';
+import { settingsAtom } from '../../state/settings';
 
 type UserHeroProps = {
   userId: string;
@@ -112,15 +116,45 @@ export function UserHero({ userId, avatarUrl, bannerUrl, presence }: UserHeroPro
   );
 }
 
+export function UserTimezone({ timezone }: { timezone: string }) {
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+
+  const time = new Intl.DateTimeFormat('en-US', {
+    timeZone: timezone,
+    hour: '2-digit',
+    minute: '2-digit',
+    hour12: !hour24Clock,
+  }).format(new Date());
+
+  return (
+    <TooltipProvider
+      position="Top"
+      offset={0}
+      tooltip={
+        <Tooltip>
+          <Text size="L400">{timezone}</Text>
+        </Tooltip>
+      }
+    >
+      {(triggerRef) => (
+        <Text as="span" ref={triggerRef} className={HoverUnderline} size="T200" priority="300">
+          {time}
+        </Text>
+      )}
+    </TooltipProvider>
+  );
+}
+
 type UserHeroNameProps = {
   displayName?: string;
   userId: string;
+  timezone?: string;
 };
-export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
+export function UserHeroName({ displayName, userId, timezone }: UserHeroNameProps) {
   const username = getMxIdLocalPart(userId);
 
   return (
-    <Box grow="Yes" direction="Column" gap="0">
+    <Box grow="Yes" direction="Column" gap="100">
       <Box alignItems="Baseline" gap="200" wrap="Wrap">
         <Text
           size="H4"
@@ -134,6 +168,8 @@ export function UserHeroName({ displayName, userId }: UserHeroNameProps) {
         <Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
           @{username}
         </Text>
+        {timezone && <span className={DotDivider} />}
+        {timezone && <UserTimezone timezone={timezone} />}
       </Box>
     </Box>
   );
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 85155a26..97d09772 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -102,7 +102,11 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
           <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
             <Box direction="Column" gap="400">
               <Box gap="400" alignItems="Start">
-                <UserHeroName displayName={displayName} userId={userId} />
+                <UserHeroName
+                  displayName={displayName}
+                  userId={userId}
+                  timezone={profile?.timezone}
+                />
                 {userId !== myUserId && (
                   <Box shrink="No">
                     <Button
diff --git a/src/app/styles/Text.css.ts b/src/app/styles/Text.css.ts
index 4e2bd4b9..0b2a6d8d 100644
--- a/src/app/styles/Text.css.ts
+++ b/src/app/styles/Text.css.ts
@@ -1,4 +1,5 @@
 import { style } from '@vanilla-extract/css';
+import { config, toRem } from 'folds';
 
 export const BreakWord = style({
   wordBreak: 'break-word',
@@ -17,3 +18,19 @@ export const LineClamp3 = style({
   WebkitBoxOrient: 'vertical',
   overflow: 'hidden',
 });
+
+export const HoverUnderline = style({
+  ':hover': {
+    textDecoration: 'underline',
+  },
+});
+
+export const DotDivider = style({
+  display: 'inline-flex',
+  flexShrink: 0,
+  width: toRem(3),
+  height: toRem(3),
+  backgroundColor: 'currentcolor',
+  opacity: config.opacity.P300,
+  borderRadius: '999px',
+});

From 199e66b11720fc3b087dd6d9d2f4c15d7d208ba4 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 22 Jul 2026 21:15:54 +0530
Subject: [PATCH 021/158] move profile message button upwards

---
 src/app/components/presence/Presence.tsx      |   2 +-
 src/app/components/user-profile/UserHero.tsx  | 184 ++++++++++--------
 .../user-profile/UserRoomProfile.tsx          |  63 +++---
 src/app/components/user-profile/styles.css.ts |  10 +-
 4 files changed, 149 insertions(+), 110 deletions(-)

diff --git a/src/app/components/presence/Presence.tsx b/src/app/components/presence/Presence.tsx
index 380ab731..96b5aef2 100644
--- a/src/app/components/presence/Presence.tsx
+++ b/src/app/components/presence/Presence.tsx
@@ -17,7 +17,7 @@ import { usePresenceLabel } from '../../hooks/useUserPresence';
 
 const PresenceToColor: Record<Presence, MainColor> = {
   online: 'Success',
-  unavailable: 'Warning',
+  unavailable: 'Critical',
   offline: 'Secondary',
 };
 
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index a486779b..6684eca0 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import {
   Avatar,
   Box,
@@ -28,103 +28,127 @@ import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 
-type UserHeroProps = {
+export function UserHero({ children }: { children: ReactNode }) {
+  return (
+    <Box direction="Column" className={css.UserHero}>
+      {children}
+    </Box>
+  );
+}
+
+export function UserHeroCover({
+  userId,
+  avatarUrl,
+  bannerUrl,
+  hasStatus,
+}: {
   userId: string;
   avatarUrl?: string;
   bannerUrl?: string;
+  hasStatus: boolean;
+}) {
+  return (
+    <div
+      className={css.UserHeroCoverContainer}
+      style={{
+        backgroundColor: colorMXID(userId),
+        filter: bannerUrl && !hasStatus ? undefined : 'brightness(50%)',
+      }}
+    >
+      {bannerUrl && (
+        <img
+          className={classNames(
+            css.UserHeroCover,
+            avatarUrl === bannerUrl && css.UserHeroCoverBlurred
+          )}
+          src={bannerUrl}
+          alt={userId}
+          draggable="false"
+        />
+      )}
+    </div>
+  );
+}
+type UserHeroAvatarProps = {
+  userId: string;
+  avatarUrl?: string;
   presence?: UserPresence;
 };
-export function UserHero({ userId, avatarUrl, bannerUrl, presence }: UserHeroProps) {
+export function UserHeroAvatar({ userId, avatarUrl, presence }: UserHeroAvatarProps) {
   const [viewAvatar, setViewAvatar] = useState<string>();
 
   const { status } = presence ?? {};
 
   return (
-    <Box direction="Column" className={css.UserHero}>
-      <div
-        className={css.UserHeroCoverContainer}
-        style={{
-          backgroundColor: colorMXID(userId),
-          filter: bannerUrl && !status ? undefined : 'brightness(50%)',
-        }}
+    <div className={css.UserHeroAvatarContainer}>
+      <AvatarPresence
+        className={css.UserAvatarContainer}
+        badge={presence && <PresenceBadge presence={presence.presence} />}
       >
-        {bannerUrl && (
-          <img
-            className={classNames(
-              css.UserHeroCover,
-              avatarUrl === bannerUrl && css.UserHeroCoverBlurred
-            )}
-            src={bannerUrl}
-            alt={userId}
-            draggable="false"
-          />
-        )}
-      </div>
-      <div className={css.UserHeroAvatarContainer}>
-        <AvatarPresence
-          className={css.UserAvatarContainer}
-          badge={presence && <PresenceBadge presence={presence.presence} />}
+        <Avatar
+          as={avatarUrl ? 'button' : 'div'}
+          onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
+          className={css.UserHeroAvatar}
+          size="500"
         >
-          <Avatar
-            as={avatarUrl ? 'button' : 'div'}
-            onClick={avatarUrl ? () => setViewAvatar(avatarUrl) : undefined}
-            className={css.UserHeroAvatar}
-            size="500"
-          >
-            <UserAvatar
-              className={css.UserHeroAvatarImg}
-              userId={userId}
-              src={avatarUrl}
-              alt={userId}
-              renderFallback={() => <Icon size="500" src={Icons.User} filled />}
-            />
-          </Avatar>
-        </AvatarPresence>
-        {status && (
-          <div className={css.UserHeroStatus}>
-            <div className={css.UserHeroStatusContent}>
-              <Text className={classNames(BreakWord, LineClamp3)} size="T200">
-                <Linkify options={LINKIFY_OPTS}>{status}</Linkify>
-              </Text>
-            </div>
+          <UserAvatar
+            className={css.UserHeroAvatarImg}
+            userId={userId}
+            src={avatarUrl}
+            alt={userId}
+            renderFallback={() => <Icon size="500" src={Icons.User} filled />}
+          />
+        </Avatar>
+      </AvatarPresence>
+      {status && (
+        <div className={css.UserHeroStatus}>
+          <div className={css.UserHeroStatusContent}>
+            <Text title={status} className={classNames(BreakWord, LineClamp3)} size="T200">
+              <Linkify options={LINKIFY_OPTS}>{status}</Linkify>
+            </Text>
           </div>
-        )}
-        {viewAvatar && (
-          <Overlay open backdrop={<OverlayBackdrop />}>
-            <OverlayCenter>
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setViewAvatar(undefined),
-                  clickOutsideDeactivates: true,
-                  escapeDeactivates: stopPropagation,
-                }}
-              >
-                <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
-                  <ImageViewer
-                    src={viewAvatar}
-                    alt={userId}
-                    requestClose={() => setViewAvatar(undefined)}
-                  />
-                </Modal>
-              </FocusTrap>
-            </OverlayCenter>
-          </Overlay>
-        )}
-      </div>
-    </Box>
+        </div>
+      )}
+      {viewAvatar && (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setViewAvatar(undefined),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal size="500" onContextMenu={(evt: any) => evt.stopPropagation()}>
+                <ImageViewer
+                  src={viewAvatar}
+                  alt={userId}
+                  requestClose={() => setViewAvatar(undefined)}
+                />
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+    </div>
   );
 }
 
 export function UserTimezone({ timezone }: { timezone: string }) {
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
 
-  const time = new Intl.DateTimeFormat('en-US', {
-    timeZone: timezone,
-    hour: '2-digit',
-    minute: '2-digit',
-    hour12: !hour24Clock,
-  }).format(new Date());
+  let time: string | undefined;
+  try {
+    time = new Intl.DateTimeFormat('en-US', {
+      timeZone: timezone,
+      hour: '2-digit',
+      minute: '2-digit',
+      hour12: !hour24Clock,
+    }).format(new Date());
+  } catch (e) {
+    console.error(e);
+  }
 
   return (
     <TooltipProvider
@@ -155,7 +179,7 @@ export function UserHeroName({ displayName, userId, timezone }: UserHeroNameProp
 
   return (
     <Box grow="Yes" direction="Column" gap="100">
-      <Box alignItems="Baseline" gap="200" wrap="Wrap">
+      <Box alignItems="Baseline" gap="100" wrap="Wrap">
         <Text
           size="H4"
           className={classNames(BreakWord, LineClamp3)}
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 97d09772..c7a61ca0 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -2,7 +2,7 @@ import { Box, Button, config, Icon, Icons, Text } from 'folds';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ObjectReader } from 'neurone/lib/utils';
-import { UserHero, UserHeroName } from './UserHero';
+import { UserHero, UserHeroAvatar, UserHeroCover, UserHeroName } from './UserHero';
 import { getMxIdServer } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import {
@@ -33,6 +33,7 @@ import {
   usePowerLevelTagsState,
 } from '../../hooks/usePowerLevelTags';
 import { useUserProfile } from '../../hooks/useUserProfile';
+import { UserActionButton } from './styles.css';
 
 type UserRoomProfileProps = {
   userId: string;
@@ -93,35 +94,41 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
     <PowerLevelsContextProvider value={powerLevels}>
       <PowerLevelTagsContextProvider value={powerLevelTags}>
         <Box direction="Column">
-          <UserHero
-            userId={userId}
-            avatarUrl={avatarUrl}
-            bannerUrl={bannerUrl}
-            presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
-          />
+          <UserHero>
+            <UserHeroCover
+              userId={userId}
+              avatarUrl={avatarUrl}
+              bannerUrl={bannerUrl}
+              hasStatus={!!presence?.status}
+            />
+            {userId !== myUserId && (
+              <Box grow="Yes" style={{ position: 'relative' }}>
+                <Button
+                  className={UserActionButton}
+                  size="300"
+                  variant="Primary"
+                  fill="Solid"
+                  radii="300"
+                  before={<Icon size="50" src={Icons.Message} filled />}
+                  onClick={handleMessage}
+                >
+                  <Text size="B300">Message</Text>
+                </Button>
+              </Box>
+            )}
+            <UserHeroAvatar
+              userId={userId}
+              avatarUrl={avatarUrl}
+              presence={presence && presence.lastActiveTs !== 0 ? presence : undefined}
+            />
+          </UserHero>
           <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
             <Box direction="Column" gap="400">
-              <Box gap="400" alignItems="Start">
-                <UserHeroName
-                  displayName={displayName}
-                  userId={userId}
-                  timezone={profile?.timezone}
-                />
-                {userId !== myUserId && (
-                  <Box shrink="No">
-                    <Button
-                      size="300"
-                      variant="Primary"
-                      fill="Solid"
-                      radii="300"
-                      before={<Icon size="50" src={Icons.Message} filled />}
-                      onClick={handleMessage}
-                    >
-                      <Text size="B300">Message</Text>
-                    </Button>
-                  </Box>
-                )}
-              </Box>
+              <UserHeroName
+                displayName={displayName}
+                userId={userId}
+                timezone={profile?.timezone}
+              />
               <Box alignItems="Center" gap="200" wrap="Wrap">
                 {server && <ServerChip server={server} />}
                 <ShareChip userId={userId} />
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index 7a5578af..7ea20903 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -70,7 +70,7 @@ export const UserHeroStatus = style({
   position: 'absolute',
   left: toRem(78),
   bottom: toRem(58),
-  marginRight: config.space.S100,
+  marginRight: config.space.S400,
 
   animation: `${StatusAnime} 100ms`,
 
@@ -106,3 +106,11 @@ export const UserHeroStatusContent = style({
   color: color.Surface.OnContainer,
   borderRadius: config.radii.R500,
 });
+
+export const UserActionButton = style({
+  position: 'absolute',
+  right: config.space.S400,
+  zIndex: 1,
+  transform: 'translateY(-10%)',
+  outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
+});

From f167780d15560e9d50521378e3047f6dd2125c0d Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 23 Jul 2026 09:09:04 +0530
Subject: [PATCH 022/158] update profile layout and add pronouns

---
 src/app/components/user-profile/UserChips.tsx |  90 +-----
 src/app/components/user-profile/UserHero.tsx  |  60 ++--
 .../user-profile/UserModeration.tsx           | 304 +++++++++++++-----
 .../user-profile/UserRoomProfile.tsx          |  69 ++--
 src/app/components/user-profile/styles.css.ts |   8 -
 src/app/hooks/useUserProfile.ts               |  29 +-
 6 files changed, 319 insertions(+), 241 deletions(-)

diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx
index 296c52b3..f09507f7 100644
--- a/src/app/components/user-profile/UserChips.tsx
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import React, { MouseEventHandler, useMemo, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import { isKeyHotkey } from 'is-hotkey';
@@ -19,13 +19,12 @@ import {
   Scroll,
   Avatar,
 } from 'folds';
-import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
 import { getMxIdServer } from '../../utils/matrix';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { stopPropagation } from '../../utils/keyboard';
 import { copyToClipboard } from '../../utils/dom';
 import { getExploreServerPath } from '../../pages/pathUtils';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { AsyncStatus } from '../../hooks/useAsyncCallback';
 import { factoryRoomIdByAtoZ } from '../../utils/sort';
 import { useMutualRooms } from '../../hooks/useMutualRooms';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
@@ -35,11 +34,9 @@ import { RoomAvatar, RoomIcon } from '../room-avatar';
 import { nameInitials } from '../../utils/common';
 import { getMatrixToUser } from '../../plugins/matrix-to';
 import { useTimeoutToggle } from '../../hooks/useTimeoutToggle';
-import { getIgnoredUsersContent, useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { CutoutCard } from '../cutout-card';
 import { SettingTile } from '../setting-tile';
 import { useClient } from '../../hooks/useClient';
-import { AccountDataType } from '../../../types/matrix/accountData';
 import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
 import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
 import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
@@ -447,86 +444,3 @@ export function IgnoredUserAlert() {
     </CutoutCard>
   );
 }
-
-export function OptionsChip({ userId }: { userId: string }) {
-  const ct = useClient();
-  const [cords, setCords] = useState<RectCords>();
-
-  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
-    setCords(evt.currentTarget.getBoundingClientRect());
-  };
-
-  const close = () => setCords(undefined);
-
-  const ignoredUsers = useIgnoredUsers();
-  const ignored = ignoredUsers.includes(userId);
-
-  const [ignoreState, toggleIgnore] = useAsyncCallback(
-    useCallback(async () => {
-      const users = ignoredUsers.filter((u) => u !== userId);
-      if (!ignored) users.push(userId);
-
-      return ct.requestAuthJSON(
-        putAccountData({
-          pathParams: { userId: ct.session.userId, type: AccountDataType.IgnoredUserList },
-          body: getIgnoredUsersContent(users),
-        })
-      );
-    }, [ct, ignoredUsers, userId, ignored])
-  );
-  const ignoring = ignoreState.status === AsyncStatus.Loading;
-
-  return (
-    <PopOut
-      anchor={cords}
-      position="Bottom"
-      align="Start"
-      offset={4}
-      content={
-        <FocusTrap
-          focusTrapOptions={{
-            initialFocus: false,
-            onDeactivate: close,
-            clickOutsideDeactivates: true,
-            escapeDeactivates: stopPropagation,
-            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
-            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
-          }}
-        >
-          <Menu>
-            <div style={{ padding: config.space.S100 }}>
-              <MenuItem
-                variant="Critical"
-                fill="None"
-                size="300"
-                radii="300"
-                onClick={() => {
-                  toggleIgnore();
-                  close();
-                }}
-                before={
-                  ignoring ? (
-                    <Spinner variant="Critical" size="50" />
-                  ) : (
-                    <Icon size="50" src={Icons.Prohibited} />
-                  )
-                }
-                disabled={ignoring}
-              >
-                <Text size="B300">{ignored ? 'Unblock User' : 'Block User'}</Text>
-              </MenuItem>
-            </div>
-          </Menu>
-        </FocusTrap>
-      }
-    >
-      <Chip variant="SurfaceVariant" radii="Pill" onClick={open} aria-pressed={!!cords}>
-        {ignoring ? (
-          <Spinner variant="Secondary" size="50" />
-        ) : (
-          <Icon size="50" src={Icons.HorizontalDots} />
-        )}
-      </Chip>
-    </PopOut>
-  );
-}
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 6684eca0..df72b9a7 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -1,7 +1,9 @@
 import React, { ReactNode, useState } from 'react';
 import {
   Avatar,
+  Badge,
   Box,
+  config,
   Icon,
   Icons,
   Modal,
@@ -9,8 +11,6 @@ import {
   OverlayBackdrop,
   OverlayCenter,
   Text,
-  Tooltip,
-  TooltipProvider,
 } from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
@@ -19,7 +19,7 @@ import * as css from './styles.css';
 import { UserAvatar } from '../user-avatar';
 import colorMXID from '../../../util/colorMXID';
 import { getMxIdLocalPart } from '../../utils/matrix';
-import { BreakWord, DotDivider, HoverUnderline, LineClamp3 } from '../../styles/Text.css';
+import { BreakWord, LineClamp3 } from '../../styles/Text.css';
 import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
 import { ImageViewer } from '../image-viewer';
@@ -27,6 +27,7 @@ import { stopPropagation } from '../../utils/keyboard';
 import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
+import { UserPronoun } from '../../hooks/useUserProfile';
 
 export function UserHero({ children }: { children: ReactNode }) {
   return (
@@ -139,47 +140,49 @@ export function UserTimezone({ timezone }: { timezone: string }) {
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
 
   let time: string | undefined;
+  let offset: string | undefined;
+
   try {
-    time = new Intl.DateTimeFormat('en-US', {
+    const parts = new Intl.DateTimeFormat('en-US', {
       timeZone: timezone,
       hour: '2-digit',
       minute: '2-digit',
       hour12: !hour24Clock,
-    }).format(new Date());
+      timeZoneName: 'shortOffset',
+    }).formatToParts(new Date());
+
+    time = parts
+      .filter((p) => (p.type !== 'timeZoneName' && p.type !== 'literal') || p.type === 'literal')
+      .map((p) => p.value)
+      .join('')
+      .trim();
+
+    offset = parts.find((p) => p.type === 'timeZoneName')?.value; // e.g. "GMT+5:30"
   } catch (e) {
     console.error(e);
   }
 
   return (
-    <TooltipProvider
-      position="Top"
-      offset={0}
-      tooltip={
-        <Tooltip>
-          <Text size="L400">{timezone}</Text>
-        </Tooltip>
-      }
-    >
-      {(triggerRef) => (
-        <Text as="span" ref={triggerRef} className={HoverUnderline} size="T200" priority="300">
-          {time}
-        </Text>
-      )}
-    </TooltipProvider>
+    <Box as="span" alignItems="Center" gap="100">
+      <Icon style={{ opacity: config.opacity.P300 }} size="50" src={Icons.Clock} />
+      <Text as="span" size="T200" priority="300">
+        {time} local time{offset ? ` · ${offset}` : ` · ${timezone}`}
+      </Text>
+    </Box>
   );
 }
 
 type UserHeroNameProps = {
   displayName?: string;
   userId: string;
-  timezone?: string;
+  pronouns?: UserPronoun[];
 };
-export function UserHeroName({ displayName, userId, timezone }: UserHeroNameProps) {
+export function UserHeroName({ displayName, userId, pronouns }: UserHeroNameProps) {
   const username = getMxIdLocalPart(userId);
 
   return (
     <Box grow="Yes" direction="Column" gap="100">
-      <Box alignItems="Baseline" gap="100" wrap="Wrap">
+      <Box alignItems="Center" gap="100" wrap="Wrap">
         <Text
           size="H4"
           className={classNames(BreakWord, LineClamp3)}
@@ -188,12 +191,17 @@ export function UserHeroName({ displayName, userId, timezone }: UserHeroNameProp
           {displayName ?? username ?? userId}
         </Text>
       </Box>
-      <Box alignItems="Center" gap="100" wrap="Wrap">
+      <Box alignItems="Center" gap="200" wrap="Wrap">
         <Text size="T200" className={classNames(BreakWord, LineClamp3)} title={username}>
           @{username}
         </Text>
-        {timezone && <span className={DotDivider} />}
-        {timezone && <UserTimezone timezone={timezone} />}
+        {pronouns?.map((pronoun) =>
+          pronoun.summary ? (
+            <Badge key={pronoun.summary} variant="Primary" fill="Soft" size="400">
+              <Text size="L400">{pronoun.summary}</Text>
+            </Badge>
+          ) : undefined
+        )}
       </Box>
     </Box>
   );
diff --git a/src/app/components/user-profile/UserModeration.tsx b/src/app/components/user-profile/UserModeration.tsx
index 0bc4d601..0db24f4b 100644
--- a/src/app/components/user-profile/UserModeration.tsx
+++ b/src/app/components/user-profile/UserModeration.tsx
@@ -1,7 +1,27 @@
-import { Box, Button, color, config, Icon, Icons, Spinner, Text, Input } from 'folds';
-import React, { useCallback, useRef } from 'react';
+import {
+  Box,
+  Button,
+  color,
+  config,
+  Icon,
+  Icons,
+  Spinner,
+  Text,
+  Input,
+  RectCords,
+  PopOut,
+  Menu,
+  MenuItem,
+  toRem,
+  Line,
+  IconButton,
+} from 'folds';
+import React, { MouseEventHandler, useCallback, useRef, useState } from 'react';
 import { postBan, postInvite, postKick, postUnban } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
+import FocusTrap from 'focus-trap-react';
+import { isKeyHotkey } from 'is-hotkey';
 import { useRoom } from '../../hooks/useRoom';
 import { CutoutCard } from '../cutout-card';
 import { SettingTile } from '../setting-tile';
@@ -11,6 +31,9 @@ import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { timeDayMonYear, timeHourMinute } from '../../utils/time';
 import { useClient } from '../../hooks/useClient';
+import { getIgnoredUsersContent, useIgnoredUsers } from '../../hooks/useIgnoredUsers';
+import { AccountDataType } from '../../../types/matrix/accountData';
+import { stopPropagation } from '../../utils/keyboard';
 
 type UserKickAlertProps = {
   reason?: string;
@@ -293,97 +316,206 @@ export function UserModeration({ userId, canKick, canBan, canInvite }: UserModer
   if (!canBan && !canKick && !canInvite) return null;
 
   return (
-    <Box direction="Column" gap="400">
-      <Box direction="Column" gap="200">
-        <Box grow="Yes" direction="Column" gap="100">
-          <Text size="L400">Moderation</Text>
-          <Input
-            ref={reasonInputRef}
-            placeholder="Reason"
+    <Box direction="Column" gap="100">
+      <Box grow="Yes" direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+        <Text size="L400">Moderation</Text>
+        <Input
+          ref={reasonInputRef}
+          placeholder="Reason (Optional)"
+          size="300"
+          variant="Background"
+          outlined
+          radii="300"
+          disabled={disabled}
+        />
+        {kickState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
+            <b>{kickState.error.message}</b>
+          </Text>
+        )}
+        {banState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
+            <b>{banState.error.message}</b>
+          </Text>
+        )}
+        {inviteState.status === AsyncStatus.Error && (
+          <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
+            <b>{inviteState.error.message}</b>
+          </Text>
+        )}
+      </Box>
+      <Box shrink="No" gap="100" direction="Column">
+        {canInvite && (
+          <MenuItem
+            style={{ flexGrow: 1 }}
             size="300"
-            variant="Background"
+            variant="Secondary"
+            fill="None"
             radii="300"
+            after={
+              inviteState.status === AsyncStatus.Loading ? (
+                <Spinner size="50" variant="Secondary" fill="Soft" />
+              ) : (
+                <Icon size="50" src={Icons.Mail} />
+              )
+            }
+            onClick={invite}
             disabled={disabled}
-          />
-          {kickState.status === AsyncStatus.Error && (
-            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
-              <b>{kickState.error.message}</b>
+          >
+            <Text style={{ flexGrow: 1 }} size="B300">
+              Invite to Room
             </Text>
-          )}
-          {banState.status === AsyncStatus.Error && (
-            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
-              <b>{banState.error.message}</b>
+          </MenuItem>
+        )}
+        {canKick && (
+          <MenuItem
+            style={{ flexGrow: 1 }}
+            size="300"
+            variant="Warning"
+            fill="None"
+            radii="300"
+            after={
+              kickState.status === AsyncStatus.Loading ? (
+                <Spinner size="50" variant="Critical" fill="Soft" />
+              ) : (
+                <Icon size="50" src={Icons.ArrowLeft} />
+              )
+            }
+            onClick={kick}
+            disabled={disabled}
+          >
+            <Text style={{ flexGrow: 1 }} size="B300">
+              Kick from Room
             </Text>
-          )}
-          {inviteState.status === AsyncStatus.Error && (
-            <Text style={{ color: color.Critical.Main }} className={BreakWord} size="T200">
-              <b>{inviteState.error.message}</b>
+          </MenuItem>
+        )}
+        {canBan && (
+          <MenuItem
+            style={{ flexGrow: 1 }}
+            size="300"
+            variant="Critical"
+            fill="None"
+            radii="300"
+            after={
+              banState.status === AsyncStatus.Loading ? (
+                <Spinner size="50" variant="Critical" fill="Solid" />
+              ) : (
+                <Icon size="50" src={Icons.NoEntry} />
+              )
+            }
+            onClick={ban}
+            disabled={disabled}
+          >
+            <Text style={{ flexGrow: 1 }} size="B300">
+              Ban from Room
             </Text>
-          )}
-        </Box>
-        <Box shrink="No" gap="200">
-          {canInvite && (
-            <Button
-              style={{ flexGrow: 1 }}
-              size="300"
-              variant="Secondary"
-              fill="Soft"
-              radii="300"
-              before={
-                inviteState.status === AsyncStatus.Loading ? (
-                  <Spinner size="50" variant="Secondary" fill="Soft" />
-                ) : (
-                  <Icon size="50" src={Icons.ArrowRight} />
-                )
-              }
-              onClick={invite}
-              disabled={disabled}
-            >
-              <Text size="B300">Invite</Text>
-            </Button>
-          )}
-          {canKick && (
-            <Button
-              style={{ flexGrow: 1 }}
-              size="300"
-              variant="Critical"
-              fill="Soft"
-              radii="300"
-              before={
-                kickState.status === AsyncStatus.Loading ? (
-                  <Spinner size="50" variant="Critical" fill="Soft" />
-                ) : (
-                  <Icon size="50" src={Icons.ArrowLeft} />
-                )
-              }
-              onClick={kick}
-              disabled={disabled}
-            >
-              <Text size="B300">Kick</Text>
-            </Button>
-          )}
-          {canBan && (
-            <Button
-              style={{ flexGrow: 1 }}
-              size="300"
-              variant="Critical"
-              fill="Solid"
-              radii="300"
-              before={
-                banState.status === AsyncStatus.Loading ? (
-                  <Spinner size="50" variant="Critical" fill="Solid" />
-                ) : (
-                  <Icon size="50" src={Icons.Prohibited} />
-                )
-              }
-              onClick={ban}
-              disabled={disabled}
-            >
-              <Text size="B300">Ban</Text>
-            </Button>
-          )}
-        </Box>
+          </MenuItem>
+        )}
       </Box>
     </Box>
   );
 }
+
+export function OptionsButton({ userId, canBan, canInvite, canKick }: UserModerationProps) {
+  const ct = useClient();
+  const [cords, setCords] = useState<RectCords>();
+
+  const open: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setCords(evt.currentTarget.getBoundingClientRect());
+  };
+
+  const close = () => setCords(undefined);
+
+  const ignoredUsers = useIgnoredUsers();
+  const ignored = ignoredUsers.includes(userId);
+
+  const [ignoreState, toggleIgnore] = useAsyncCallback(
+    useCallback(async () => {
+      const users = ignoredUsers.filter((u) => u !== userId);
+      if (!ignored) users.push(userId);
+
+      return ct.requestAuthJSON(
+        putAccountData({
+          pathParams: { userId: ct.session.userId, type: AccountDataType.IgnoredUserList },
+          body: getIgnoredUsersContent(users),
+        })
+      );
+    }, [ct, ignoredUsers, userId, ignored])
+  );
+  const ignoring = ignoreState.status === AsyncStatus.Loading;
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Bottom"
+      align="Center"
+      offset={4}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            onDeactivate: close,
+            clickOutsideDeactivates: true,
+            escapeDeactivates: stopPropagation,
+            isKeyForward: (evt: KeyboardEvent) => isKeyHotkey('arrowdown', evt),
+            isKeyBackward: (evt: KeyboardEvent) => isKeyHotkey('arrowup', evt),
+          }}
+        >
+          <Menu style={{ minWidth: toRem(175) }}>
+            <Box direction="Column" gap="0">
+              {(canInvite || canBan || canKick) && (
+                <>
+                  <div style={{ padding: config.space.S100 }}>
+                    <UserModeration
+                      userId={userId}
+                      canInvite={canInvite}
+                      canKick={canKick}
+                      canBan={canBan}
+                    />
+                  </div>
+                  <Line size="300" />
+                </>
+              )}
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                <MenuItem
+                  variant="Surface"
+                  fill="Soft"
+                  size="300"
+                  radii="300"
+                  onClick={() => {
+                    toggleIgnore();
+                    close();
+                  }}
+                  after={
+                    ignoring ? (
+                      <Spinner variant="Critical" size="50" />
+                    ) : (
+                      <Icon size="50" src={Icons.Prohibited} />
+                    )
+                  }
+                  disabled={ignoring}
+                >
+                  <Text style={{ flexGrow: 1 }} size="B300">
+                    {ignored ? 'Unblock User' : 'Block User'}
+                  </Text>
+                </MenuItem>
+              </Box>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    >
+      <IconButton
+        style={{ flexShrink: 0 }}
+        variant="SurfaceVariant"
+        fill="Soft"
+        size="400"
+        radii="400"
+        onClick={open}
+        aria-pressed={!!cords}
+      >
+        <Icon size="50" src={Icons.VerticalDots} />
+      </IconButton>
+    </PopOut>
+  );
+}
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index c7a61ca0..9b4fc755 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -2,7 +2,7 @@ import { Box, Button, config, Icon, Icons, Text } from 'folds';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ObjectReader } from 'neurone/lib/utils';
-import { UserHero, UserHeroAvatar, UserHeroCover, UserHeroName } from './UserHero';
+import { UserHero, UserHeroAvatar, UserHeroCover, UserHeroName, UserTimezone } from './UserHero';
 import { getMxIdServer } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import {
@@ -12,10 +12,10 @@ import {
 } from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
 import { useUserPresence } from '../../hooks/useUserPresence';
-import { IgnoredUserAlert, MutualRoomsChip, OptionsChip, ServerChip, ShareChip } from './UserChips';
+import { IgnoredUserAlert, MutualRoomsChip, ServerChip, ShareChip } from './UserChips';
 import { useCloseUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { PowerChip } from './PowerChip';
-import { UserInviteAlert, UserBanAlert, UserModeration, UserKickAlert } from './UserModeration';
+import { UserInviteAlert, UserBanAlert, UserKickAlert, OptionsButton } from './UserModeration';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { Membership } from '../../../types/matrix/room';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
@@ -33,7 +33,6 @@ import {
   usePowerLevelTagsState,
 } from '../../hooks/usePowerLevelTags';
 import { useUserProfile } from '../../hooks/useUserProfile';
-import { UserActionButton } from './styles.css';
 
 type UserRoomProfileProps = {
   userId: string;
@@ -101,21 +100,6 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
               bannerUrl={bannerUrl}
               hasStatus={!!presence?.status}
             />
-            {userId !== myUserId && (
-              <Box grow="Yes" style={{ position: 'relative' }}>
-                <Button
-                  className={UserActionButton}
-                  size="300"
-                  variant="Primary"
-                  fill="Solid"
-                  radii="300"
-                  before={<Icon size="50" src={Icons.Message} filled />}
-                  onClick={handleMessage}
-                >
-                  <Text size="B300">Message</Text>
-                </Button>
-              </Box>
-            )}
             <UserHeroAvatar
               userId={userId}
               avatarUrl={avatarUrl}
@@ -124,17 +108,31 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
           </UserHero>
           <Box direction="Column" gap="500" style={{ padding: config.space.S400 }}>
             <Box direction="Column" gap="400">
-              <UserHeroName
-                displayName={displayName}
-                userId={userId}
-                timezone={profile?.timezone}
-              />
+              <Box alignItems="Start" gap="200" grow="Yes">
+                <UserHeroName
+                  displayName={displayName}
+                  userId={userId}
+                  pronouns={profile?.pronouns}
+                />
+                {userId !== myUserId && (
+                  <OptionsButton
+                    userId={userId}
+                    canInvite={canInvite && membership === 'leave'}
+                    canKick={canKickUser && membership === 'join'}
+                    canBan={canBanUser && membership !== 'ban'}
+                  />
+                )}
+              </Box>
+              {profile?.timezone && <UserTimezone timezone={profile.timezone} />}
+              <Text size="T200">
+                now hierarchy does not have room summary info we need to load it when we will be
+                rendering it
+              </Text>
               <Box alignItems="Center" gap="200" wrap="Wrap">
                 {server && <ServerChip server={server} />}
                 <ShareChip userId={userId} />
                 {creator ? <CreatorChip /> : <PowerChip userId={userId} />}
                 {userId !== myUserId && <MutualRoomsChip userId={userId} />}
-                {userId !== myUserId && <OptionsChip userId={userId} />}
               </Box>
             </Box>
             {ignored && <IgnoredUserAlert />}
@@ -165,12 +163,21 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
                 ts={memberEventResult.value.event.origin_server_ts}
               />
             )}
-            <UserModeration
-              userId={userId}
-              canInvite={canInvite && membership === Membership.Leave}
-              canKick={canKickUser && membership === Membership.Join}
-              canBan={canBanUser && membership !== Membership.Ban}
-            />
+            {userId !== myUserId && (
+              <Box direction="Row" gap="200">
+                <Button
+                  style={{ flexGrow: 1 }}
+                  size="300"
+                  variant="Primary"
+                  fill="Solid"
+                  radii="300"
+                  before={<Icon size="50" src={Icons.Message} />}
+                  onClick={handleMessage}
+                >
+                  <Text size="B300">Message</Text>
+                </Button>
+              </Box>
+            )}
           </Box>
         </Box>
       </PowerLevelTagsContextProvider>
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index 7ea20903..c254ba42 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -106,11 +106,3 @@ export const UserHeroStatusContent = style({
   color: color.Surface.OnContainer,
   borderRadius: config.radii.R500,
 });
-
-export const UserActionButton = style({
-  position: 'absolute',
-  right: config.space.S400,
-  zIndex: 1,
-  transform: 'translateY(-10%)',
-  outline: `${config.borderWidth.B600} solid ${color.Surface.Container}`,
-});
diff --git a/src/app/hooks/useUserProfile.ts b/src/app/hooks/useUserProfile.ts
index 0dfdb82e..97948e63 100644
--- a/src/app/hooks/useUserProfile.ts
+++ b/src/app/hooks/useUserProfile.ts
@@ -2,13 +2,27 @@ import { useCallback } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { getProfile, GetProfileOK } from 'neurone/lib/api/matrix/client/v3/profile';
 import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { ObjectReader } from 'neurone/lib/utils';
 import { useClient } from './useClient';
 
+type PronounResponse = {
+  grammatical_gender?: string;
+  language?: string;
+  summary?: string;
+};
+
+export type UserPronoun = {
+  grammaticalGender?: string;
+  language?: string;
+  summary?: string;
+};
+
 export type UserProfile = {
   avatarUrl?: string;
   displayName?: string;
   bannerUrl?: string;
   timezone?: string;
+  pronouns?: UserPronoun[];
 };
 export const useUserProfile = (userId: string): UserProfile | undefined => {
   const ct = useClient();
@@ -25,14 +39,25 @@ export const useUserProfile = (userId: string): UserProfile | undefined => {
         'chat.commet.profile_banner'?: string;
         'm.banner_url'?: string;
         'm.tz'?: string;
+        'io.fsky.nyx.pronouns': PronounResponse[];
+        'm.pronouns': PronounResponse[];
       }
     >(response);
 
+    const pronouns = profile?.['m.pronouns'] ?? profile?.['io.fsky.nyx.pronouns'];
+
     return {
       avatarUrl: profile?.avatar_url || undefined,
       displayName: profile?.displayname || undefined,
-      bannerUrl: profile?.['m.banner_url'] ?? profile?.['chat.commet.profile_banner'] ?? undefined,
-      timezone: profile?.['m.tz'] ?? undefined,
+      bannerUrl:
+        ObjectReader.string(profile, 'm.banner_url') ??
+        ObjectReader.string(profile, 'chat.commet.profile_banner'),
+      timezone: ObjectReader.string(profile, 'm.tz'),
+      pronouns: pronouns?.map((p) => ({
+        grammaticalGender: ObjectReader.string(p, 'grammatical_gender'),
+        language: ObjectReader.string(p, 'language'),
+        summary: ObjectReader.string(p, 'summary'),
+      })),
     };
   }, [ct, userId]);
 

From 758d328a3946258642397713f8589fa2925f4aaa Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 23 Jul 2026 09:40:28 +0530
Subject: [PATCH 023/158] add user biography

---
 src/app/components/user-profile/UserHero.tsx  | 16 +++++--
 .../user-profile/UserRoomProfile.tsx          | 14 ++++--
 src/app/hooks/useUserProfile.ts               | 48 ++++++++++++-------
 3 files changed, 54 insertions(+), 24 deletions(-)

diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index df72b9a7..232bdb0b 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -27,7 +27,7 @@ import { stopPropagation } from '../../utils/keyboard';
 import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
-import { UserPronoun } from '../../hooks/useUserProfile';
+import { UserBiography, UserPronoun } from '../../hooks/useUserProfile';
 
 export function UserHero({ children }: { children: ReactNode }) {
   return (
@@ -165,7 +165,7 @@ export function UserTimezone({ timezone }: { timezone: string }) {
   return (
     <Box as="span" alignItems="Center" gap="100">
       <Icon style={{ opacity: config.opacity.P300 }} size="50" src={Icons.Clock} />
-      <Text as="span" size="T200" priority="300">
+      <Text as="span" size="T200" priority="300" truncate>
         {time} local time{offset ? ` · ${offset}` : ` · ${timezone}`}
       </Text>
     </Box>
@@ -198,7 +198,9 @@ export function UserHeroName({ displayName, userId, pronouns }: UserHeroNameProp
         {pronouns?.map((pronoun) =>
           pronoun.summary ? (
             <Badge key={pronoun.summary} variant="Primary" fill="Soft" size="400">
-              <Text size="L400">{pronoun.summary}</Text>
+              <Text size="L400" truncate>
+                {pronoun.summary}
+              </Text>
             </Badge>
           ) : undefined
         )}
@@ -206,3 +208,11 @@ export function UserHeroName({ displayName, userId, pronouns }: UserHeroNameProp
     </Box>
   );
 }
+
+export function UserHeroBiography({ bio }: { bio: UserBiography }) {
+  return (
+    <Text className={classNames(BreakWord, LineClamp3)} size="T200">
+      <Linkify options={LINKIFY_OPTS}>{bio.body}</Linkify>
+    </Text>
+  );
+}
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 9b4fc755..74453653 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -2,7 +2,14 @@ import { Box, Button, config, Icon, Icons, Text } from 'folds';
 import React from 'react';
 import { useNavigate } from 'react-router-dom';
 import { ObjectReader } from 'neurone/lib/utils';
-import { UserHero, UserHeroAvatar, UserHeroCover, UserHeroName, UserTimezone } from './UserHero';
+import {
+  UserHero,
+  UserHeroAvatar,
+  UserHeroBiography,
+  UserHeroCover,
+  UserHeroName,
+  UserTimezone,
+} from './UserHero';
 import { getMxIdServer } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import {
@@ -123,11 +130,8 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
                   />
                 )}
               </Box>
+              {profile?.biography ? <UserHeroBiography bio={profile.biography} /> : null}
               {profile?.timezone && <UserTimezone timezone={profile.timezone} />}
-              <Text size="T200">
-                now hierarchy does not have room summary info we need to load it when we will be
-                rendering it
-              </Text>
               <Box alignItems="Center" gap="200" wrap="Wrap">
                 {server && <ServerChip server={server} />}
                 <ShareChip userId={userId} />
diff --git a/src/app/hooks/useUserProfile.ts b/src/app/hooks/useUserProfile.ts
index 97948e63..22de76fb 100644
--- a/src/app/hooks/useUserProfile.ts
+++ b/src/app/hooks/useUserProfile.ts
@@ -5,24 +5,24 @@ import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { ObjectReader } from 'neurone/lib/utils';
 import { useClient } from './useClient';
 
-type PronounResponse = {
-  grammatical_gender?: string;
-  language?: string;
-  summary?: string;
-};
-
 export type UserPronoun = {
   grammaticalGender?: string;
   language?: string;
   summary?: string;
 };
 
+export type UserBiography = {
+  body: string;
+  formattedBody?: string;
+};
+
 export type UserProfile = {
   avatarUrl?: string;
   displayName?: string;
   bannerUrl?: string;
   timezone?: string;
   pronouns?: UserPronoun[];
+  biography?: UserBiography;
 };
 export const useUserProfile = (userId: string): UserProfile | undefined => {
   const ct = useClient();
@@ -36,15 +36,23 @@ export const useUserProfile = (userId: string): UserProfile | undefined => {
 
     const [, profile] = await parseMatrixResp<
       GetProfileOK & {
-        'chat.commet.profile_banner'?: string;
-        'm.banner_url'?: string;
-        'm.tz'?: string;
-        'io.fsky.nyx.pronouns': PronounResponse[];
-        'm.pronouns': PronounResponse[];
+        'chat.commet.profile_banner'?: unknown;
+        'm.banner_url'?: unknown;
+        'm.tz'?: unknown;
+        'io.fsky.nyx.pronouns': unknown;
+        'm.pronouns': unknown;
+        'm.biography': unknown;
+        'gay.fomx.biography': unknown;
       }
     >(response);
 
     const pronouns = profile?.['m.pronouns'] ?? profile?.['io.fsky.nyx.pronouns'];
+    const bio = profile?.['m.biography'] ?? profile?.['gay.fomx.biography'];
+    const bioText = ObjectReader.array(bio, 'm.text');
+
+    const plainBio = bioText?.find((i) => ObjectReader.string(i, 'mimetype') !== 'text/html');
+    const htmlBio = bioText?.find((i) => ObjectReader.string(i, 'mimetype') === 'text/html');
+    const bioBody = ObjectReader.string(plainBio, 'body') ?? ObjectReader.string(htmlBio, 'body');
 
     return {
       avatarUrl: profile?.avatar_url || undefined,
@@ -53,11 +61,19 @@ export const useUserProfile = (userId: string): UserProfile | undefined => {
         ObjectReader.string(profile, 'm.banner_url') ??
         ObjectReader.string(profile, 'chat.commet.profile_banner'),
       timezone: ObjectReader.string(profile, 'm.tz'),
-      pronouns: pronouns?.map((p) => ({
-        grammaticalGender: ObjectReader.string(p, 'grammatical_gender'),
-        language: ObjectReader.string(p, 'language'),
-        summary: ObjectReader.string(p, 'summary'),
-      })),
+      pronouns: Array.isArray(pronouns)
+        ? pronouns?.map((p) => ({
+            grammaticalGender: ObjectReader.string(p, 'grammatical_gender'),
+            language: ObjectReader.string(p, 'language'),
+            summary: ObjectReader.string(p, 'summary'),
+          }))
+        : undefined,
+      biography: bioBody
+        ? {
+            body: bioBody,
+            formattedBody: ObjectReader.string(htmlBio, 'body'),
+          }
+        : undefined,
     };
   }, [ct, userId]);
 

From 4fc961963641dcf4f0d65af07694cc1b1528dd6a Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 23 Jul 2026 10:28:26 +0530
Subject: [PATCH 024/158] improve timezone

---
 src/app/components/user-profile/UserHero.tsx | 3 ++-
 src/app/hooks/useUserProfile.ts              | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 232bdb0b..296f0c55 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -166,7 +166,8 @@ export function UserTimezone({ timezone }: { timezone: string }) {
     <Box as="span" alignItems="Center" gap="100">
       <Icon style={{ opacity: config.opacity.P300 }} size="50" src={Icons.Clock} />
       <Text as="span" size="T200" priority="300" truncate>
-        {time} local time{offset ? ` · ${offset}` : ` · ${timezone}`}
+        {time} local time · {timezone}
+        {offset ? ` (${offset})` : ''}
       </Text>
     </Box>
   );
diff --git a/src/app/hooks/useUserProfile.ts b/src/app/hooks/useUserProfile.ts
index 22de76fb..a24d12e8 100644
--- a/src/app/hooks/useUserProfile.ts
+++ b/src/app/hooks/useUserProfile.ts
@@ -60,7 +60,7 @@ export const useUserProfile = (userId: string): UserProfile | undefined => {
       bannerUrl:
         ObjectReader.string(profile, 'm.banner_url') ??
         ObjectReader.string(profile, 'chat.commet.profile_banner'),
-      timezone: ObjectReader.string(profile, 'm.tz'),
+      timezone: ObjectReader.string(profile, 'm.tz')?.replace(/"/g, ''), // some client add quotes in timezone
       pronouns: Array.isArray(pronouns)
         ? pronouns?.map((p) => ({
             grammaticalGender: ObjectReader.string(p, 'grammatical_gender'),

From 9ba0a132b8b27e3d1df7434d591de90340f9dd9d Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 23 Jul 2026 11:54:37 +0530
Subject: [PATCH 025/158] fix profile cover error state

---
 src/app/components/user-profile/UserHero.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 296f0c55..bf38e250 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -48,6 +48,8 @@ export function UserHeroCover({
   bannerUrl?: string;
   hasStatus: boolean;
 }) {
+  const [err, setError] = useState(false);
+
   return (
     <div
       className={css.UserHeroCoverContainer}
@@ -56,15 +58,16 @@ export function UserHeroCover({
         filter: bannerUrl && !hasStatus ? undefined : 'brightness(50%)',
       }}
     >
-      {bannerUrl && (
+      {!err && bannerUrl && (
         <img
           className={classNames(
             css.UserHeroCover,
             avatarUrl === bannerUrl && css.UserHeroCoverBlurred
           )}
           src={bannerUrl}
-          alt={userId}
+          alt="{userId}"
           draggable="false"
+          onError={() => setError(true)}
         />
       )}
     </div>

From a214fcca2ed36d74bc8b4a212ebae7c7016c258c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 23 Jul 2026 13:49:28 +0530
Subject: [PATCH 026/158] fix unexpected hdr in images

---
 src/index.css | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/src/index.css b/src/index.css
index d4696367..0b4e796a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -81,6 +81,10 @@ a:hover {
   pointer-events: none;
 }
 
+img {
+  dynamic-range-limit: standard;
+}
+
 b {
   font-weight: 500;
 }

From 919fe50ac092e361c78f6c56d689c5f336b73d18 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 23 Jul 2026 21:21:30 +0530
Subject: [PATCH 027/158] add user bio viewer

---
 src/app/components/user-profile/UserHero.tsx  | 34 ++++++++++++++++---
 .../user-profile/UserRoomProfile.tsx          |  2 +-
 2 files changed, 31 insertions(+), 5 deletions(-)

diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index bf38e250..762d3527 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -19,7 +19,7 @@ import * as css from './styles.css';
 import { UserAvatar } from '../user-avatar';
 import colorMXID from '../../../util/colorMXID';
 import { getMxIdLocalPart } from '../../utils/matrix';
-import { BreakWord, LineClamp3 } from '../../styles/Text.css';
+import { BreakWord, HoverUnderline, LineClamp3, PreWrap } from '../../styles/Text.css';
 import { UserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../presence';
 import { ImageViewer } from '../image-viewer';
@@ -28,6 +28,7 @@ import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
 import { useSetting } from '../../state/hooks/settings';
 import { settingsAtom } from '../../state/settings';
 import { UserBiography, UserPronoun } from '../../hooks/useUserProfile';
+import { RoomTopicViewer } from '../room-topic-viewer';
 
 export function UserHero({ children }: { children: ReactNode }) {
   return (
@@ -214,9 +215,34 @@ export function UserHeroName({ displayName, userId, pronouns }: UserHeroNameProp
 }
 
 export function UserHeroBiography({ bio }: { bio: UserBiography }) {
+  const [view, setView] = useState(false);
+
   return (
-    <Text className={classNames(BreakWord, LineClamp3)} size="T200">
-      <Linkify options={LINKIFY_OPTS}>{bio.body}</Linkify>
-    </Text>
+    <>
+      <Text
+        as="button"
+        type="button"
+        onClick={() => setView(true)}
+        className={classNames(BreakWord, PreWrap, LineClamp3, HoverUnderline)}
+        size="T200"
+      >
+        {bio.body}
+      </Text>
+      <Overlay open={view} backdrop={<OverlayBackdrop />}>
+        <OverlayCenter>
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              clickOutsideDeactivates: true,
+              onDeactivate: () => setView(false),
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            {/* TODO: create new component to render formatted body */}
+            <RoomTopicViewer name="Bio" topic={bio.body} requestClose={() => setView(false)} />
+          </FocusTrap>
+        </OverlayCenter>
+      </Overlay>
+    </>
   );
 }
diff --git a/src/app/components/user-profile/UserRoomProfile.tsx b/src/app/components/user-profile/UserRoomProfile.tsx
index 74453653..cad7b60b 100644
--- a/src/app/components/user-profile/UserRoomProfile.tsx
+++ b/src/app/components/user-profile/UserRoomProfile.tsx
@@ -86,7 +86,7 @@ export function UserRoomProfile({ userId }: UserRoomProfileProps) {
 
   const bannerUrl = profile?.bannerUrl
     ? mxcToHttp(ct.session.baseUrl, profile.bannerUrl, useAuthentication).url()
-    : avatarUrl;
+    : profile && avatarUrl;
 
   const handleMessage = () => {
     closeUserRoomProfile();

From e56eeace64c62027336d3edce6dd57b6c6b5b865 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 23 Jul 2026 22:01:44 +0530
Subject: [PATCH 028/158] add new sdk in general room settings

---
 src/app/components/JoinRulesSwitcher.tsx      |  37 ++--
 .../common-settings/general/RoomAddress.tsx   |  61 ++---
 .../general/RoomEncryption.tsx                |  38 ++--
 .../general/RoomHistoryVisibility.tsx         |  61 +++--
 .../common-settings/general/RoomJoinRules.tsx | 112 +++++-----
 .../common-settings/general/RoomProfile.tsx   | 111 ++++++----
 .../common-settings/general/RoomPublish.tsx   |  35 ++-
 .../common-settings/general/RoomUpgrade.tsx   |  99 +++++----
 .../features/room-settings/RoomSettings.tsx   | 209 ++++++++++--------
 .../room-settings/RoomSettingsRenderer.tsx    |  15 +-
 .../room-settings/general/General.tsx         |   4 +-
 src/app/hooks/storage/useRoomStateEvent.ts    |  14 +-
 src/app/hooks/useRoomAliases.ts               | 174 ++++++++-------
 src/app/hooks/useRoomDirectoryVisibility.ts   |  33 ++-
 src/app/pages/Router.tsx                      |   4 +-
 src/app/state/upload.ts                       |   2 +-
 src/app/styles/Text.css.ts                    |   4 +
 src/types/matrix/room.ts                      |   9 +
 18 files changed, 578 insertions(+), 444 deletions(-)

diff --git a/src/app/components/JoinRulesSwitcher.tsx b/src/app/components/JoinRulesSwitcher.tsx
index bbc0a65d..58cf039b 100644
--- a/src/app/components/JoinRulesSwitcher.tsx
+++ b/src/app/components/JoinRulesSwitcher.tsx
@@ -13,44 +13,43 @@ import {
   Button,
   Spinner,
 } from 'folds';
-import { JoinRule } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { stopPropagation } from '../utils/keyboard';
 import { getRoomIconSrc } from '../utils/room';
+import { JoinRule } from '../../types/matrix/room';
 
 export type ExtraJoinRules = 'knock_restricted';
-export type ExtendedJoinRules = JoinRule | ExtraJoinRules;
 
-type JoinRuleIcons = Record<ExtendedJoinRules, IconSrc>;
+type JoinRuleIcons = Record<JoinRule, IconSrc>;
 
 export const useJoinRuleIcons = (roomType?: string): JoinRuleIcons =>
   useMemo(
     () => ({
-      [JoinRule.Invite]: getRoomIconSrc(Icons, roomType, JoinRule.Invite),
-      [JoinRule.Knock]: getRoomIconSrc(Icons, roomType, JoinRule.Knock),
-      knock_restricted: getRoomIconSrc(Icons, roomType, JoinRule.Restricted),
-      [JoinRule.Restricted]: getRoomIconSrc(Icons, roomType, JoinRule.Restricted),
-      [JoinRule.Public]: getRoomIconSrc(Icons, roomType, JoinRule.Public),
-      [JoinRule.Private]: getRoomIconSrc(Icons, roomType, JoinRule.Private),
+      invite: getRoomIconSrc(Icons, roomType, 'invite'),
+      knock: getRoomIconSrc(Icons, roomType, 'knock'),
+      restricted: getRoomIconSrc(Icons, roomType, 'restricted'),
+      knock_restricted: getRoomIconSrc(Icons, roomType, 'knock_restricted'),
+      public: getRoomIconSrc(Icons, roomType, 'public'),
+      private: getRoomIconSrc(Icons, roomType, 'private'),
     }),
     [roomType]
   );
 
-type JoinRuleLabels = Record<ExtendedJoinRules, string>;
+type JoinRuleLabels = Record<JoinRule, string>;
 export const useRoomJoinRuleLabel = (): JoinRuleLabels =>
   useMemo(
     () => ({
-      [JoinRule.Invite]: 'Invite Only',
-      [JoinRule.Knock]: 'Knock & Invite',
+      invite: 'Invite Only',
+      knock: 'Knock & Invite',
       knock_restricted: 'Space Members or Knock',
-      [JoinRule.Restricted]: 'Space Members',
-      [JoinRule.Public]: 'Public',
-      [JoinRule.Private]: 'Invite Only',
+      restricted: 'Space Members',
+      public: 'Public',
+      private: 'Invite Only',
     }),
     []
   );
 
-type JoinRulesSwitcherProps<T extends ExtendedJoinRules[]> = {
+type JoinRulesSwitcherProps<T extends JoinRule[]> = {
   icons: JoinRuleIcons;
   labels: JoinRuleLabels;
   rules: T;
@@ -59,7 +58,7 @@ type JoinRulesSwitcherProps<T extends ExtendedJoinRules[]> = {
   disabled?: boolean;
   changing?: boolean;
 };
-export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
+export function JoinRulesSwitcher<T extends JoinRule[]>({
   icons,
   labels,
   rules,
@@ -75,7 +74,7 @@ export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
   };
 
   const handleChange = useCallback(
-    (selectedRule: ExtendedJoinRules) => {
+    (selectedRule: JoinRule) => {
       setCords(undefined);
       onChange(selectedRule);
     },
@@ -127,7 +126,7 @@ export function JoinRulesSwitcher<T extends ExtendedJoinRules[]>({
         fill="Soft"
         radii="300"
         outlined
-        before={<Icon size="100" src={icons[value] ?? icons[JoinRule.Restricted]} />}
+        before={<Icon size="100" src={icons[value] ?? 'restricted'} />}
         after={
           changing ? (
             <Spinner size="100" variant="Secondary" fill="Soft" />
diff --git a/src/app/features/common-settings/general/RoomAddress.tsx b/src/app/features/common-settings/general/RoomAddress.tsx
index 767a967e..26986eef 100644
--- a/src/app/features/common-settings/general/RoomAddress.tsx
+++ b/src/app/features/common-settings/general/RoomAddress.tsx
@@ -14,11 +14,9 @@ import {
   Text,
   toRem,
 } from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
 import {
   useLocalAliases,
@@ -30,25 +28,26 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { CutoutCard } from '../../../components/cutout-card';
 import { replaceSpaceWithDash } from '../../../utils/common';
 import { useAlive } from '../../../hooks/useAlive';
-import { StateEvent } from '../../../../types/matrix/room';
+import { StateEventType } from '../../../../types/matrix/room';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
 import { getMxIdServer } from '../../../utils/matrix';
+import { useClient } from '../../../hooks/useClient';
 
 type RoomPublishedAddressesProps = {
   permissions: RoomPermissionsAPI;
 };
 
 export function RoomPublishedAddresses({ permissions }: RoomPublishedAddressesProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
 
   const canEditCanonical = permissions.stateEvent(
-    StateEvent.RoomCanonicalAlias,
-    mx.getSafeUserId()
+    StateEventType.RoomCanonicalAlias,
+    ct.session.userId
   );
 
-  const [canonicalAlias, publishedAliases] = usePublishedAliases(room);
-  const setMainAlias = useSetMainAlias(room);
+  const [canonicalAlias, publishedAliases] = usePublishedAliases(roomId);
+  const setMainAlias = useSetMainAlias(roomId, publishedAliases);
 
   const [mainState, setMain] = useAsyncCallback(setMainAlias);
   const loading = mainState.status === AsyncStatus.Loading;
@@ -120,7 +119,7 @@ export function RoomPublishedAddresses({ permissions }: RoomPublishedAddressesPr
 
             {mainState.status === AsyncStatus.Error && (
               <Text size="T200" style={{ color: color.Critical.Main }}>
-                {(mainState.error as MatrixError).message}
+                {mainState.error instanceof Error ? mainState.error.message : 'Unknown Error'}
               </Text>
             )}
           </Box>
@@ -131,8 +130,8 @@ export function RoomPublishedAddresses({ permissions }: RoomPublishedAddressesPr
 }
 
 function LocalAddressInput({ addLocalAlias }: { addLocalAlias: (alias: string) => Promise<void> }) {
-  const mx = useMatrixClient();
-  const userId = mx.getSafeUserId();
+  const ct = useClient();
+  const { userId } = ct.session;
   const server = getMxIdServer(userId);
   const alive = useAlive();
 
@@ -189,9 +188,7 @@ function LocalAddressInput({ addLocalAlias }: { addLocalAlias: (alias: string) =
       </Box>
       {addState.status === AsyncStatus.Error && (
         <Text style={{ color: color.Critical.Main }} size="T200">
-          {(addState.error as MatrixError).httpStatus === 409
-            ? 'Address is already in use!'
-            : (addState.error as MatrixError).message}
+          {addState.error instanceof Error ? addState.error.message : 'Unknown Error'}
         </Text>
       )}
     </Box>
@@ -207,11 +204,15 @@ function LocalAddressesList({
   removeLocalAlias: (alias: string) => Promise<void>;
   canEditCanonical?: boolean;
 }) {
-  const room = useRoom();
+  const roomId = useRoom();
   const alive = useAlive();
 
-  const [, publishedAliases] = usePublishedAliases(room);
-  const { publishAliases, unpublishAliases } = usePublishUnpublishAliases(room);
+  const [canonicalAlias, publishedAliases] = usePublishedAliases(roomId);
+  const { publishAliases, unpublishAliases } = usePublishUnpublishAliases(
+    roomId,
+    publishedAliases,
+    canonicalAlias
+  );
 
   const [selectedAliases, setSelectedAliases] = useState<string[]>([]);
   const selectHasPublished = selectedAliases.find((alias) => publishedAliases.includes(alias));
@@ -261,10 +262,10 @@ function LocalAddressesList({
     deleteState.status === AsyncStatus.Loading ||
     publishState.status === AsyncStatus.Loading ||
     unpublishState.status === AsyncStatus.Loading;
-  let error: MatrixError | undefined;
-  if (deleteState.status === AsyncStatus.Error) error = deleteState.error as MatrixError;
-  if (publishState.status === AsyncStatus.Error) error = publishState.error as MatrixError;
-  if (unpublishState.status === AsyncStatus.Error) error = unpublishState.error as MatrixError;
+  let error: unknown;
+  if (deleteState.status === AsyncStatus.Error) error = deleteState.error;
+  if (publishState.status === AsyncStatus.Error) error = publishState.error;
+  if (unpublishState.status === AsyncStatus.Error) error = unpublishState.error;
 
   return (
     <Box direction="Column" gap="300">
@@ -352,7 +353,7 @@ function LocalAddressesList({
       })}
       {error && (
         <Text size="T200" style={{ color: color.Critical.Main }}>
-          {error.message}
+          {error instanceof Error ? error.message : 'Unknown Error'}
         </Text>
       )}
     </Box>
@@ -360,17 +361,17 @@ function LocalAddressesList({
 }
 
 export function RoomLocalAddresses({ permissions }: { permissions: RoomPermissionsAPI }) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
 
   const canEditCanonical = permissions.stateEvent(
-    StateEvent.RoomCanonicalAlias,
-    mx.getSafeUserId()
+    StateEventType.RoomCanonicalAlias,
+    ct.session.userId
   );
 
   const [expand, setExpand] = useState(false);
 
-  const { localAliasesState, addLocalAlias, removeLocalAlias } = useLocalAliases(room.roomId);
+  const { localAliasesState, addLocalAlias, removeLocalAlias } = useLocalAliases(roomId);
 
   return (
     <SequenceCard
@@ -424,7 +425,9 @@ export function RoomLocalAddresses({ permissions }: { permissions: RoomPermissio
           {localAliasesState.status === AsyncStatus.Error && (
             <Box gap="100">
               <Text size="T200" style={{ color: color.Critical.Main }}>
-                {localAliasesState.error.message}
+                {localAliasesState.error instanceof Error
+                  ? localAliasesState.error.message
+                  : 'Unkonw Error'}
               </Text>
             </Box>
           )}
diff --git a/src/app/features/common-settings/general/RoomEncryption.tsx b/src/app/features/common-settings/general/RoomEncryption.tsx
index 15b1f156..5e1e8c44 100644
--- a/src/app/features/common-settings/general/RoomEncryption.tsx
+++ b/src/app/features/common-settings/general/RoomEncryption.tsx
@@ -16,18 +16,19 @@ import {
   Text,
 } from 'folds';
 import React, { useCallback, useState } from 'react';
-import { MatrixError } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { StateEvent } from '../../../../types/matrix/room';
+import { StateEventType } from '../../../../types/matrix/room';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useRoom } from '../../../hooks/useRoom';
-import { useStateEvent } from '../../../hooks/useStateEvent';
 import { stopPropagation } from '../../../utils/keyboard';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+import { useClient } from '../../../hooks/useClient';
+import { useObservableValue } from '../../../hooks/useObservableValue';
 
 const ROOM_ENC_ALGO = 'm.megolm.v1.aes-sha2';
 
@@ -35,21 +36,26 @@ type RoomEncryptionProps = {
   permissions: RoomPermissionsAPI;
 };
 export function RoomEncryption({ permissions }: RoomEncryptionProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
 
-  const canEnable = permissions.stateEvent(StateEvent.RoomEncryption, mx.getSafeUserId());
-  const content = useStateEvent(room, StateEvent.RoomEncryption)?.getContent<{
-    algorithm: string;
-  }>();
-  const enabled = content?.algorithm === ROOM_ENC_ALGO;
+  const canEnable = permissions.stateEvent(StateEventType.RoomEncryption, ct.session.userId);
+  const encryptedRooms = useObservableValue(ct.encryptedRooms);
+  const enabled = encryptedRooms.has(roomId);
 
   const [enableState, enable] = useAsyncCallback(
     useCallback(async () => {
-      await mx.sendStateEvent(room.roomId, StateEvent.RoomEncryption as any, {
-        algorithm: ROOM_ENC_ALGO,
-      });
-    }, [mx, room.roomId])
+      const resp = await ct.requestAuthJSON(
+        putStateEvent({
+          pathParams: { roomId, eventType: StateEventType.RoomEncryption, stateKey: '' },
+          body: {
+            algorithm: ROOM_ENC_ALGO,
+          },
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
+    }, [ct, roomId])
   );
 
   const enabling = enableState.status === AsyncStatus.Loading;
@@ -97,7 +103,7 @@ export function RoomEncryption({ permissions }: RoomEncryptionProps) {
       >
         {enableState.status === AsyncStatus.Error && (
           <Text style={{ color: color.Critical.Main }} size="T200">
-            {(enableState.error as MatrixError).message}
+            {enableState.error instanceof Error ? enableState.error.message : 'Unknown Error'}
           </Text>
         )}
         {prompt && (
diff --git a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
index 2e42785f..de13a902 100644
--- a/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
+++ b/src/app/features/common-settings/general/RoomHistoryVisibility.tsx
@@ -12,55 +12,46 @@ import {
   Spinner,
   Text,
 } from 'folds';
-import { HistoryVisibility, MatrixError } from 'matrix-js-sdk';
-import { RoomHistoryVisibilityEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
+import { HistoryVisibility } from 'neurone/lib/crypto/machine';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
-import { StateEvent } from '../../../../types/matrix/room';
+import { RoomHistoryVisibilityContent, StateEventType } from '../../../../types/matrix/room';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { useStateEvent } from '../../../hooks/useStateEvent';
 import { stopPropagation } from '../../../utils/keyboard';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+import { useClient } from '../../../hooks/useClient';
+import { useObservableValue } from '../../../hooks/useObservableValue';
 
-const useVisibilityStr = () =>
+const useVisibilityStr = (): Record<HistoryVisibility, string> =>
   useMemo(
     () => ({
-      [HistoryVisibility.Invited]: 'After Invite',
-      [HistoryVisibility.Joined]: 'After Join',
-      [HistoryVisibility.Shared]: 'All Messages',
-      [HistoryVisibility.WorldReadable]: 'All Messages (Guests)',
+      invited: 'After Invite',
+      joined: 'After Join',
+      shared: 'All Messages',
+      world_readable: 'All Messages (Guests)',
     }),
     []
   );
 
-const useVisibilityMenu = () =>
-  useMemo(
-    () => [
-      HistoryVisibility.Shared,
-      HistoryVisibility.Invited,
-      HistoryVisibility.Joined,
-      HistoryVisibility.WorldReadable,
-    ],
-    []
-  );
+const useVisibilityMenu = (): HistoryVisibility[] =>
+  useMemo(() => ['invited', 'joined', 'shared', 'world_readable'], []);
 
 type RoomHistoryVisibilityProps = {
   permissions: RoomPermissionsAPI;
 };
 export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
 
-  const canEdit = permissions.stateEvent(StateEvent.RoomHistoryVisibility, mx.getSafeUserId());
+  const canEdit = permissions.stateEvent(StateEventType.RoomHistoryVisibility, ct.session.userId);
+  const roomToHistoryVisibility = useObservableValue(ct.roomToHistoryVisibility);
 
-  const visibilityEvent = useStateEvent(room, StateEvent.RoomHistoryVisibility);
-  const historyVisibility: HistoryVisibility =
-    visibilityEvent?.getContent<RoomHistoryVisibilityEventContent>().history_visibility ??
-    HistoryVisibility.Shared;
+  const historyVisibility: HistoryVisibility = roomToHistoryVisibility.get(roomId) ?? 'shared';
   const visibilityMenu = useVisibilityMenu();
   const visibilityStr = useVisibilityStr();
 
@@ -73,12 +64,20 @@ export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProp
   const [submitState, submit] = useAsyncCallback(
     useCallback(
       async (visibility: HistoryVisibility) => {
-        const content: RoomHistoryVisibilityEventContent = {
+        const content: RoomHistoryVisibilityContent = {
           history_visibility: visibility,
         };
-        await mx.sendStateEvent(room.roomId, StateEvent.RoomHistoryVisibility as any, content);
+
+        const resp = await ct.requestAuthJSON(
+          putStateEvent({
+            pathParams: { roomId, eventType: StateEventType.RoomHistoryVisibility, stateKey: '' },
+            body: content,
+          })
+        );
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
       },
-      [mx, room.roomId]
+      [ct, roomId]
     )
   );
   const submitting = submitState.status === AsyncStatus.Loading;
@@ -156,7 +155,7 @@ export function RoomHistoryVisibility({ permissions }: RoomHistoryVisibilityProp
       >
         {submitState.status === AsyncStatus.Error && (
           <Text style={{ color: color.Critical.Main }} size="T200">
-            {(submitState.error as MatrixError).message}
+            {submitState.error instanceof Error ? submitState.error.message : 'Unknown Error'}
           </Text>
         )}
       </SettingTile>
diff --git a/src/app/features/common-settings/general/RoomJoinRules.tsx b/src/app/features/common-settings/general/RoomJoinRules.tsx
index 0d352167..c4520379 100644
--- a/src/app/features/common-settings/general/RoomJoinRules.tsx
+++ b/src/app/features/common-settings/general/RoomJoinRules.tsx
@@ -1,10 +1,9 @@
 import React, { useCallback, useMemo } from 'react';
 import { color, Text } from 'folds';
-import { JoinRule, MatrixError, RestrictedAllowType } from 'matrix-js-sdk';
-import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import { useAtomValue } from 'jotai';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import {
-  ExtendedJoinRules,
   JoinRulesSwitcher,
   useJoinRuleIcons,
   useRoomJoinRuleLabel,
@@ -12,13 +11,15 @@ import {
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
-import { StateEvent } from '../../../../types/matrix/room';
-import { useStateEvent } from '../../../hooks/useStateEvent';
+import {
+  JoinRule,
+  StateEventType,
+  AllowCondition,
+  JoinRulesContent,
+} from '../../../../types/matrix/room';
 import { useSpaceOptionally } from '../../../hooks/useSpace';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { getStateEvents } from '../../../utils/room';
 import {
   useRecursiveChildSpaceScopeFactory,
   useSpaceChildren,
@@ -31,89 +32,98 @@ import {
   restrictedSupported,
 } from '../../../utils/matrix';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
-
-type RestrictedRoomAllowContent = {
-  room_id: string;
-  type: RestrictedAllowType;
-};
+import { useClient } from '../../../hooks/useClient';
+import { useObservableValue } from '../../../hooks/useObservableValue';
+import { getRoomStateEventsQuery } from '../../../hooks/storage/useRoomStateEvent';
 
 type RoomJoinRulesProps = {
   permissions: RoomPermissionsAPI;
 };
 export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const allowKnockRestricted = knockRestrictedSupported(room.getVersion());
-  const allowRestricted = restrictedSupported(room.getVersion());
-  const allowKnock = knockSupported(room.getVersion());
+  const ct = useClient();
+  const roomId = useRoom();
+
+  const roomVersion = ct.roomToVersion.read.get(roomId) ?? '1';
+
+  const allowKnockRestricted = knockRestrictedSupported(roomVersion);
+  const allowRestricted = restrictedSupported(roomVersion);
+  const allowKnock = knockSupported(roomVersion);
 
   const roomIdToParents = useAtomValue(roomToParentsAtom);
-  const space = useSpaceOptionally();
-  const subspacesScope = useRecursiveChildSpaceScopeFactory(mx, roomIdToParents);
-  const subspaces = useSpaceChildren(allRoomsAtom, space?.roomId ?? '', subspacesScope);
+  const spaceId = useSpaceOptionally();
+  const subspacesScope = useRecursiveChildSpaceScopeFactory(ct, roomIdToParents);
+  const subspaces = useSpaceChildren(allRoomsAtom, spaceId ?? '', subspacesScope);
 
-  const canEdit = permissions.stateEvent(StateEvent.RoomHistoryVisibility, mx.getSafeUserId());
+  const canEdit = permissions.stateEvent(StateEventType.RoomHistoryVisibility, ct.session.userId);
 
-  const joinRuleEvent = useStateEvent(room, StateEvent.RoomJoinRules);
-  const content = joinRuleEvent?.getContent<RoomJoinRulesEventContent>();
-  const rule: JoinRule = content?.join_rule ?? JoinRule.Invite;
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
+  const rule: JoinRule = roomToJoinRule.get(roomId) ?? 'invite';
 
-  const joinRules: Array<ExtendedJoinRules> = useMemo(() => {
-    const r: ExtendedJoinRules[] = [JoinRule.Invite];
+  const joinRules: Array<JoinRule> = useMemo(() => {
+    const r: JoinRule[] = ['invite'];
     if (allowKnock) {
-      r.push(JoinRule.Knock);
+      r.push('knock');
     }
-    if (allowRestricted && space) {
-      r.push(JoinRule.Restricted);
+    if (allowRestricted && spaceId) {
+      r.push('restricted');
     }
-    if (allowKnockRestricted && space) {
+    if (allowKnockRestricted && spaceId) {
       r.push('knock_restricted');
     }
-    r.push(JoinRule.Public);
+    r.push('public');
 
     return r;
-  }, [allowKnockRestricted, allowRestricted, allowKnock, space]);
+  }, [allowKnockRestricted, allowRestricted, allowKnock, spaceId]);
 
-  const icons = useJoinRuleIcons(room.getType());
+  const icons = useJoinRuleIcons(ct.roomToType.read.get(roomId));
   const labels = useRoomJoinRuleLabel();
 
   const [submitState, submit] = useAsyncCallback(
     useCallback(
-      async (joinRule: ExtendedJoinRules) => {
-        const allow: RestrictedRoomAllowContent[] = [];
-        if (joinRule === JoinRule.Restricted || joinRule === 'knock_restricted') {
-          const roomParents = roomIdToParents.get(room.roomId);
+      async (joinRule: JoinRule) => {
+        const allow: AllowCondition[] = [];
+        if (joinRule === 'restricted' || joinRule === 'knock_restricted') {
+          const roomParents = roomIdToParents.get(roomId);
 
-          const parents = getStateEvents(room, StateEvent.SpaceParent)
-            .map((event) => event.getStateKey())
-            .filter((parentId) => typeof parentId === 'string')
+          const parentEvents = await ct.storage.joinRoomState.read.query(
+            getRoomStateEventsQuery(roomId, StateEventType.SpaceParent)
+          );
+          const parents = parentEvents
+            .map((event) => event.event.state_key)
             .filter((parentId) => roomParents?.has(parentId));
 
-          if (parents.length === 0 && space && roomParents) {
+          if (parents.length === 0 && spaceId && roomParents) {
             // if no m.space.parent found
             // find parent in current space
             const selectedParents = subspaces.filter((rId) => roomParents.has(rId));
-            if (roomParents.has(space.roomId)) {
-              selectedParents.push(space.roomId);
+            if (roomParents.has(spaceId)) {
+              selectedParents.push(spaceId);
             }
             selectedParents.forEach((pId) => parents.push(pId));
           }
           parents.forEach((parentRoomId) => {
             if (!parentRoomId) return;
             allow.push({
-              type: RestrictedAllowType.RoomMembership,
+              type: 'm.room_membership',
               room_id: parentRoomId,
             });
           });
         }
 
-        const c: RoomJoinRulesEventContent = {
-          join_rule: joinRule as JoinRule,
+        const c: JoinRulesContent = {
+          join_rule: joinRule,
         };
         if (allow.length > 0) c.allow = allow;
-        await mx.sendStateEvent(room.roomId, StateEvent.RoomJoinRules as any, c);
+        const resp = await ct.requestAuthJSON(
+          putStateEvent({
+            pathParams: { roomId, eventType: StateEventType.RoomJoinRules, stateKey: '' },
+            body: c,
+          })
+        );
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
       },
-      [mx, room, space, subspaces, roomIdToParents]
+      [ct, roomId, spaceId, subspaces, roomIdToParents]
     )
   );
 
@@ -127,9 +137,9 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
       gap="400"
     >
       <SettingTile
-        title={room.isSpaceRoom() ? 'Space Access' : 'Room Access'}
+        title={ct.spaceRooms.read.has(roomId) ? 'Space Access' : 'Room Access'}
         description={
-          room.isSpaceRoom()
+          ct.spaceRooms.read.has(roomId)
             ? 'Change how people can join the space.'
             : 'Change how people can join the room.'
         }
@@ -147,7 +157,7 @@ export function RoomJoinRules({ permissions }: RoomJoinRulesProps) {
       >
         {submitState.status === AsyncStatus.Error && (
           <Text style={{ color: color.Critical.Main }} size="T200">
-            {(submitState.error as MatrixError).message}
+            {submitState.error instanceof Error ? submitState.error.message : 'Unknown Error'}
           </Text>
         )}
       </SettingTile>
diff --git a/src/app/features/common-settings/general/RoomProfile.tsx b/src/app/features/common-settings/general/RoomProfile.tsx
index 0a67f9e0..2367ab0a 100644
--- a/src/app/features/common-settings/general/RoomProfile.tsx
+++ b/src/app/features/common-settings/general/RoomProfile.tsx
@@ -12,27 +12,18 @@ import {
   TextArea,
 } from 'folds';
 import React, { FormEventHandler, useCallback, useMemo, useState } from 'react';
-import { useAtomValue } from 'jotai';
 import Linkify from 'linkify-react';
 import classNames from 'classnames';
-import { JoinRule, MatrixError } from 'matrix-js-sdk';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { useRoom } from '../../../hooks/useRoom';
-import {
-  useRoomAvatar,
-  useRoomJoinRule,
-  useRoomName,
-  useRoomTopic,
-} from '../../../hooks/useRoomMeta';
-import { mDirectAtom } from '../../../state/mDirectList';
 import { BreakWord, LineClamp3 } from '../../../styles/Text.css';
 import { LINKIFY_OPTS } from '../../../plugins/react-custom-html-parser';
 import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';
-import { mxcUrlToHttp } from '../../../utils/matrix';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { StateEvent } from '../../../../types/matrix/room';
+import { JoinRule, StateEvent, StateEventType } from '../../../../types/matrix/room';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { useObjectURL } from '../../../hooks/useObjectURL';
 import { createUploadAtom, UploadSuccess } from '../../../state/upload';
@@ -40,6 +31,9 @@ import { useFilePicker } from '../../../hooks/useFilePicker';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+import { useClient } from '../../../hooks/useClient';
+import { useObservableValue } from '../../../hooks/useObservableValue';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
 
 type RoomProfileEditProps = {
   canEditAvatar: boolean;
@@ -48,6 +42,7 @@ type RoomProfileEditProps = {
   avatar?: string;
   name: string;
   topic: string;
+  joinRule?: JoinRule;
   onClose: () => void;
 };
 export function RoomProfileEdit({
@@ -57,17 +52,22 @@ export function RoomProfileEdit({
   avatar,
   name,
   topic,
+  joinRule,
   onClose,
 }: RoomProfileEditProps) {
-  const room = useRoom();
-  const mx = useMatrixClient();
-  const alive = useAlive();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const joinRule = useRoomJoinRule(room);
+  const roomId = useRoom();
+  const alive = useAlive();
+
   const [roomAvatar, setRoomAvatar] = useState(avatar);
 
   const avatarUrl = roomAvatar
-    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication) ?? undefined
+    ? mxcToHttp(ct.session.baseUrl, roomAvatar, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
   const [imageFile, setImageFile] = useState<File>();
@@ -93,18 +93,37 @@ export function RoomProfileEdit({
     useCallback(
       async (roomAvatarMxc?: string | null, roomName?: string, roomTopic?: string) => {
         if (roomAvatarMxc !== undefined) {
-          await mx.sendStateEvent(room.roomId, StateEvent.RoomAvatar as any, {
-            url: roomAvatarMxc,
-          });
+          const resp = await ct.requestAuthJSON(
+            putStateEvent({
+              pathParams: { roomId, eventType: StateEventType.RoomAvatar, stateKey: '' },
+              body: { url: roomAvatarMxc },
+            })
+          );
+          const [err] = await parseMatrixResp(resp);
+          if (err) throw new Error(err.data.error ?? err.data.errcode);
         }
         if (roomName !== undefined) {
-          await mx.sendStateEvent(room.roomId, StateEvent.RoomName as any, { name: roomName });
+          const resp = await ct.requestAuthJSON(
+            putStateEvent({
+              pathParams: { roomId, eventType: StateEventType.RoomName, stateKey: '' },
+              body: { name: roomName },
+            })
+          );
+          const [err] = await parseMatrixResp(resp);
+          if (err) throw new Error(err.data.error ?? err.data.errcode);
         }
         if (roomTopic !== undefined) {
-          await mx.sendStateEvent(room.roomId, StateEvent.RoomTopic as any, { topic: roomTopic });
+          const resp = await ct.requestAuthJSON(
+            putStateEvent({
+              pathParams: { roomId, eventType: StateEventType.RoomTopic, stateKey: '' },
+              body: { topic: roomTopic },
+            })
+          );
+          const [err] = await parseMatrixResp(resp);
+          if (err) throw new Error(err.data.error ?? err.data.errcode);
         }
       },
-      [mx, room.roomId]
+      [ct, roomId]
     )
   );
   const submitting = submitState.status === AsyncStatus.Loading;
@@ -194,14 +213,14 @@ export function RoomProfileEdit({
         <Box shrink="No">
           <Avatar size="500" radii="300">
             <RoomAvatar
-              roomId={room.roomId}
+              roomId={roomId}
               src={avatarUrl}
               alt={name}
               renderFallback={() => (
                 <RoomIcon
-                  roomType={room.getType()}
+                  roomType={ct.roomToType.read.get(roomId)}
                   size="400"
-                  joinRule={joinRule?.join_rule ?? JoinRule.Invite}
+                  joinRule={joinRule}
                   filled
                 />
               )}
@@ -231,7 +250,7 @@ export function RoomProfileEdit({
       </Box>
       {submitState.status === AsyncStatus.Error && (
         <Text size="T200" style={{ color: color.Critical.Main }}>
-          {(submitState.error as MatrixError).message}
+          {submitState.error instanceof Error ? submitState.error.message : 'Unknown Error'}
         </Text>
       )}
       <Box gap="300">
@@ -264,23 +283,32 @@ type RoomProfileProps = {
   permissions: RoomPermissionsAPI;
 };
 export function RoomProfile({ permissions }: RoomProfileProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const myUserId = ct.session.userId;
   const useAuthentication = useMediaAuthentication();
-  const room = useRoom();
-  const directs = useAtomValue(mDirectAtom);
+  const roomId = useRoom();
 
-  const avatar = useRoomAvatar(room, directs.has(room.roomId));
-  const name = useRoomName(room);
-  const topic = useRoomTopic(room);
-  const joinRule = useRoomJoinRule(room);
+  const roomToAvatar = useObservableValue(ct.roomToAvatar);
+  const roomToName = useObservableValue(ct.roomToName);
+  const roomToTopic = useObservableValue(ct.roomToTopic);
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
 
-  const canEditAvatar = permissions.stateEvent(StateEvent.RoomAvatar, mx.getSafeUserId());
-  const canEditName = permissions.stateEvent(StateEvent.RoomName, mx.getSafeUserId());
-  const canEditTopic = permissions.stateEvent(StateEvent.RoomTopic, mx.getSafeUserId());
+  const avatar = roomToAvatar.get(roomId);
+  const name = roomToName.get(roomId);
+  const topic = roomToTopic.get(roomId);
+  const joinRule = roomToJoinRule.get(roomId);
+
+  const canEditAvatar = permissions.stateEvent(StateEvent.RoomAvatar, myUserId);
+  const canEditName = permissions.stateEvent(StateEvent.RoomName, myUserId);
+  const canEditTopic = permissions.stateEvent(StateEvent.RoomTopic, myUserId);
   const canEdit = canEditAvatar || canEditName || canEditTopic;
 
   const avatarUrl = avatar
-    ? mxcUrlToHttp(mx, avatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? mxcToHttp(ct.session.baseUrl, avatar, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
   const [edit, setEdit] = useState(false);
@@ -304,6 +332,7 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
             avatar={avatar}
             name={name ?? ''}
             topic={topic ?? ''}
+            joinRule={joinRule}
             onClose={handleCloseEdit}
           />
         ) : (
@@ -337,14 +366,14 @@ export function RoomProfile({ permissions }: RoomProfileProps) {
             <Box shrink="No">
               <Avatar size="500" radii="300">
                 <RoomAvatar
-                  roomId={room.roomId}
+                  roomId={roomId}
                   src={avatarUrl}
                   alt={name}
                   renderFallback={() => (
                     <RoomIcon
-                      roomType={room.getType()}
+                      roomType={ct.roomToType.read.get(roomId)}
                       size="400"
-                      joinRule={joinRule?.join_rule ?? JoinRule.Invite}
+                      joinRule={joinRule}
                       filled
                     />
                   )}
diff --git a/src/app/features/common-settings/general/RoomPublish.tsx b/src/app/features/common-settings/general/RoomPublish.tsx
index ce014210..6be65d8b 100644
--- a/src/app/features/common-settings/general/RoomPublish.tsx
+++ b/src/app/features/common-settings/general/RoomPublish.tsx
@@ -1,42 +1,37 @@
 import React from 'react';
 import { Box, color, Spinner, Switch, Text } from 'folds';
-import { JoinRule, MatrixError } from 'matrix-js-sdk';
-import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useRoom } from '../../../hooks/useRoom';
 import { useRoomDirectoryVisibility } from '../../../hooks/useRoomDirectoryVisibility';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { StateEvent } from '../../../../types/matrix/room';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { useStateEvent } from '../../../hooks/useStateEvent';
-import { ExtendedJoinRules } from '../../../components/JoinRulesSwitcher';
+import { JoinRule, StateEventType } from '../../../../types/matrix/room';
 import { RoomPermissionsAPI } from '../../../hooks/useRoomPermissions';
+import { useClient } from '../../../hooks/useClient';
+import { useObservableValue } from '../../../hooks/useObservableValue';
 
 type RoomPublishProps = {
   permissions: RoomPermissionsAPI;
 };
 export function RoomPublish({ permissions }: RoomPublishProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
 
   const canEditCanonical = permissions.stateEvent(
-    StateEvent.RoomCanonicalAlias,
-    mx.getSafeUserId()
+    StateEventType.RoomCanonicalAlias,
+    ct.session.userId
   );
-  const joinRuleEvent = useStateEvent(room, StateEvent.RoomJoinRules);
-  const content = joinRuleEvent?.getContent<RoomJoinRulesEventContent>();
-  const rule: ExtendedJoinRules = (content?.join_rule as ExtendedJoinRules) ?? JoinRule.Invite;
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
+  const rule: JoinRule = roomToJoinRule.get(roomId) ?? 'invite';
 
-  const { visibilityState, setVisibility } = useRoomDirectoryVisibility(room.roomId);
+  const { visibilityState, setVisibility } = useRoomDirectoryVisibility(roomId);
 
   const [toggleState, toggleVisibility] = useAsyncCallback(setVisibility);
 
   const loading =
     visibilityState.status === AsyncStatus.Loading || toggleState.status === AsyncStatus.Loading;
-  const validRule =
-    rule === JoinRule.Public || rule === JoinRule.Knock || rule === 'knock_restricted';
+  const validRule = rule === 'public' || rule === 'knock' || rule === 'knock_restricted';
 
   return (
     <SequenceCard
@@ -48,7 +43,7 @@ export function RoomPublish({ permissions }: RoomPublishProps) {
       <SettingTile
         title="Publish to Directory"
         description={
-          room.isSpaceRoom()
+          ct.spaceRooms.read.has(roomId)
             ? 'List the space in the public directory to make it discoverable by others.'
             : 'List the room in the public directory to make it discoverable by others.'
         }
@@ -67,13 +62,15 @@ export function RoomPublish({ permissions }: RoomPublishProps) {
       >
         {visibilityState.status === AsyncStatus.Error && (
           <Text style={{ color: color.Critical.Main }} size="T200">
-            {(visibilityState.error as MatrixError).message}
+            {visibilityState.error instanceof Error
+              ? visibilityState.error.message
+              : 'Unknown Error'}
           </Text>
         )}
 
         {toggleState.status === AsyncStatus.Error && (
           <Text style={{ color: color.Critical.Main }} size="T200">
-            {(toggleState.error as MatrixError).message}
+            {toggleState.error instanceof Error ? toggleState.error.message : 'Unknown Error'}
           </Text>
         )}
       </SettingTile>
diff --git a/src/app/features/common-settings/general/RoomUpgrade.tsx b/src/app/features/common-settings/general/RoomUpgrade.tsx
index 45a480aa..58ce5107 100644
--- a/src/app/features/common-settings/general/RoomUpgrade.tsx
+++ b/src/app/features/common-settings/general/RoomUpgrade.tsx
@@ -16,16 +16,15 @@ import {
   Icons,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { MatrixError, Method } from 'matrix-js-sdk';
-import { RoomTombstoneEventContent } from 'matrix-js-sdk/lib/types';
+import { ObjectReader } from 'neurone/lib/utils';
+import { postUpgrade } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../../room-settings/styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useRoom } from '../../../hooks/useRoom';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { IRoomCreateContent, StateEvent } from '../../../../types/matrix/room';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { useStateEvent } from '../../../hooks/useStateEvent';
+import { StateEventType } from '../../../../types/matrix/room';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { useCapabilities } from '../../../hooks/useCapabilities';
 import { stopPropagation } from '../../../utils/keyboard';
@@ -39,12 +38,14 @@ import { useAlive } from '../../../hooks/useAlive';
 import { creatorsSupported } from '../../../utils/matrix';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { BreakWord } from '../../../styles/Text.css';
+import { useClient } from '../../../hooks/useClient';
 
+const EMPTY_CREATORS = new Set<string>();
 function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
   const alive = useAlive();
-  const creators = useRoomCreators(room);
+  const creators = useRoomCreators(roomId) ?? EMPTY_CREATORS;
 
   const capabilities = useCapabilities();
   const roomVersions = capabilities['m.room_versions'];
@@ -61,12 +62,20 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
   const [upgradeState, upgrade] = useAsyncCallback(
     useCallback(
       async (version: string, newAdditionalCreators?: string[]) => {
-        await mx.http.authedRequest(Method.Post, `/rooms/${room.roomId}/upgrade`, undefined, {
-          new_version: version,
-          additional_creators: newAdditionalCreators,
-        });
+        const resp = await ct.requestAuthJSON(
+          postUpgrade({
+            pathParams: { roomId },
+            body: {
+              new_version: version,
+              additional_creators: newAdditionalCreators,
+            },
+          })
+        );
+
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
       },
-      [mx, room]
+      [ct, roomId]
     )
   );
 
@@ -103,7 +112,9 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
               size="500"
             >
               <Box grow="Yes">
-                <Text size="H4">{room.isSpaceRoom() ? 'Space Upgrade' : 'Room Upgrade'}</Text>
+                <Text size="H4">
+                  {ct.spaceRooms.read.has(roomId) ? 'Space Upgrade' : 'Room Upgrade'}
+                </Text>
               </Box>
               <IconButton size="300" onClick={requestClose} radii="300">
                 <Icon src={Icons.Cross} />
@@ -139,7 +150,9 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
               </Box>
               {upgradeState.status === AsyncStatus.Error && (
                 <Text className={BreakWord} style={{ color: color.Critical.Main }} size="T200">
-                  {(upgradeState.error as MatrixError).message}
+                  {upgradeState.error instanceof Error
+                    ? upgradeState.error.message
+                    : 'Unknown Error'}
                 </Text>
               )}
               <Button
@@ -148,7 +161,9 @@ function RoomUpgradeDialog({ requestClose }: { requestClose: () => void }) {
                 disabled={upgrading}
                 before={upgrading && <Spinner size="200" variant="Secondary" fill="Solid" />}
               >
-                <Text size="B400">{room.isSpaceRoom() ? 'Upgrade Space' : 'Upgrade Room'}</Text>
+                <Text size="B400">
+                  {ct.spaceRooms.read.has(roomId) ? 'Upgrade Space' : 'Upgrade Room'}
+                </Text>
               </Button>
             </Box>
           </Dialog>
@@ -163,28 +178,30 @@ type RoomUpgradeProps = {
   requestClose: () => void;
 };
 export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
-  const createContent = useStateEvent(
-    room,
-    StateEvent.RoomCreate
-  )?.getContent<IRoomCreateContent>();
-  const roomVersion = createContent?.room_version ?? '1';
-  const predecessorRoomId = createContent?.predecessor?.room_id;
 
-  const tombstoneContent = useStateEvent(
-    room,
-    StateEvent.RoomTombstone
-  )?.getContent<RoomTombstoneEventContent>();
-  const replacementRoom = tombstoneContent?.replacement_room;
+  const createContent = ct.state.join.create.read.find((event) => event.roomId === roomId)?.event
+    .content;
+  const tombstoneContent = ct.state.join.tombstone.read.find((event) => event.roomId === roomId)
+    ?.event.content;
 
-  const canUpgrade = permissions.stateEvent(StateEvent.RoomTombstone, mx.getSafeUserId());
+  const roomVersion = ObjectReader.string(createContent, 'room_version') ?? '1';
+  const predecessorRoomId = ObjectReader.string(
+    ObjectReader.object(createContent, 'predecessor'),
+    'room_id'
+  );
+
+  const replacementRoom = ObjectReader.string(tombstoneContent, 'replacement_room');
+  const tombstoneBody = ObjectReader.string(tombstoneContent, 'body');
+
+  const canUpgrade = permissions.stateEvent(StateEventType.RoomTombstone, ct.session.userId);
 
   const handleOpenRoom = () => {
     if (replacementRoom) {
       requestClose();
-      if (room.isSpaceRoom()) {
+      if (ct.spaceRooms.read.has(roomId)) {
         navigateSpace(replacementRoom);
       } else {
         navigateRoom(replacementRoom);
@@ -195,10 +212,14 @@ export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
   const handleOpenOldRoom = () => {
     if (predecessorRoomId) {
       requestClose();
-      if (room.isSpaceRoom()) {
+      if (ct.spaceRooms.read.has(roomId)) {
         navigateSpace(predecessorRoomId);
       } else {
-        navigateRoom(predecessorRoomId, createContent.predecessor?.event_id);
+        const preEventId = ObjectReader.string(
+          ObjectReader.object(createContent, 'predecessor'),
+          'event_id'
+        );
+        navigateRoom(predecessorRoomId, preEventId);
       }
     }
   };
@@ -213,11 +234,11 @@ export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
       gap="400"
     >
       <SettingTile
-        title={room.isSpaceRoom() ? 'Upgrade Space' : 'Upgrade Room'}
+        title={ct.spaceRooms.read.has(roomId) ? 'Upgrade Space' : 'Upgrade Room'}
         description={
           replacementRoom
-            ? tombstoneContent.body ||
-              `This ${room.isSpaceRoom() ? 'space' : 'room'} has been replaced!`
+            ? tombstoneBody ||
+              `This ${ct.spaceRooms.read.has(roomId) ? 'space' : 'room'} has been replaced!`
             : `Current version: ${roomVersion}.`
         }
         after={
@@ -231,7 +252,7 @@ export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
                 radii="300"
                 onClick={handleOpenOldRoom}
               >
-                <Text size="B300">{room.isSpaceRoom() ? 'Old Space' : 'Old Room'}</Text>
+                <Text size="B300">{ct.spaceRooms.read.has(roomId) ? 'Old Space' : 'Old Room'}</Text>
               </Button>
             )}
             {replacementRoom ? (
@@ -242,7 +263,9 @@ export function RoomUpgrade({ permissions, requestClose }: RoomUpgradeProps) {
                 radii="300"
                 onClick={handleOpenRoom}
               >
-                <Text size="B300">{room.isSpaceRoom() ? 'Open New Space' : 'Open New Room'}</Text>
+                <Text size="B300">
+                  {ct.spaceRooms.read.has(roomId) ? 'Open New Space' : 'Open New Room'}
+                </Text>
               </Button>
             ) : (
               <Button
diff --git a/src/app/features/room-settings/RoomSettings.tsx b/src/app/features/room-settings/RoomSettings.tsx
index 8601c365..1850d5c8 100644
--- a/src/app/features/room-settings/RoomSettings.tsx
+++ b/src/app/features/room-settings/RoomSettings.tsx
@@ -1,14 +1,8 @@
 import React, { useMemo, useState } from 'react';
-import { useAtomValue } from 'jotai';
 import { Avatar, Box, config, Icon, IconButton, Icons, IconSrc, MenuItem, Text } from 'folds';
-import { JoinRule } from 'matrix-js-sdk';
 import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '../../components/page';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { useRoomAvatar, useRoomJoinRule, useRoomName } from '../../hooks/useRoomMeta';
-import { mDirectAtom } from '../../state/mDirectList';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { General } from './general';
 import { Members } from '../common-settings/members';
@@ -17,6 +11,22 @@ import { Permissions } from './permissions';
 import { RoomSettingsPage } from '../../state/roomSettings';
 import { useRoom } from '../../hooks/useRoom';
 import { DeveloperTools } from '../common-settings/developer-tools';
+import { useClient } from '../../hooks/useClient';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { useObservableValue } from '../../hooks/useObservableValue';
+import {
+  PowerLevelsContextProvider,
+  usePowerLevels,
+  usePowerLevelsState,
+} from '../../hooks/usePowerLevels';
+import {
+  PowerLevelTagsContextProvider,
+  usePowerLevelTags,
+  usePowerLevelTagsState,
+} from '../../hooks/usePowerLevelTags';
 
 type RoomSettingsMenuItem = {
   page: RoomSettingsPage;
@@ -61,17 +71,29 @@ type RoomSettingsProps = {
   requestClose: () => void;
 };
 export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
-  const room = useRoom();
-  const mx = useMatrixClient();
+  const roomId = useRoom();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const mDirects = useAtomValue(mDirectAtom);
 
-  const roomAvatar = useRoomAvatar(room, mDirects.has(room.roomId));
-  const roomName = useRoomName(room);
-  const joinRuleContent = useRoomJoinRule(room);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const roomAvatar = getRoomAvatar(roomId);
+  const roomName = getRoomName(roomId);
+
+  const stateObjResult = usePowerLevelsState(roomId);
+  const powerLevels = usePowerLevels(stateObjResult.value);
+  const powerLevelTagsResult = usePowerLevelTagsState(roomId);
+  const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsResult.value);
+
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
 
   const avatarUrl = roomAvatar
-    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? mxcToHttp(ct.session.baseUrl, roomAvatar, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
   const screenSize = useScreenSizeContext();
@@ -90,84 +112,91 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
   };
 
   return (
-    <PageRoot
-      nav={
-        screenSize === ScreenSize.Mobile && activePage !== undefined ? undefined : (
-          <PageNav size="300">
-            <PageNavHeader outlined={false}>
-              <Box grow="Yes" gap="200">
-                <Avatar size="200" radii="300">
-                  <RoomAvatar
-                    roomId={room.roomId}
-                    src={avatarUrl}
-                    alt={roomName}
-                    renderFallback={() => (
-                      <RoomIcon
-                        size="50"
-                        roomType={room.getType()}
-                        joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite}
-                        filled
+    <PowerLevelsContextProvider value={powerLevels}>
+      <PowerLevelTagsContextProvider value={powerLevelTags}>
+        <PageRoot
+          nav={
+            screenSize === ScreenSize.Mobile && activePage !== undefined ? undefined : (
+              <PageNav size="300">
+                <PageNavHeader outlined={false}>
+                  <Box grow="Yes" gap="200">
+                    <Avatar size="200" radii="300">
+                      <RoomAvatar
+                        roomId={roomId}
+                        src={avatarUrl}
+                        alt={roomName}
+                        renderFallback={() => (
+                          <RoomIcon
+                            size="50"
+                            roomType={ct.roomToType.read.get(roomId)}
+                            joinRule={roomToJoinRule.get(roomId)}
+                            filled
+                          />
+                        )}
                       />
+                    </Avatar>
+                    <Text size="H4" truncate>
+                      {roomName}
+                    </Text>
+                  </Box>
+                  <Box shrink="No">
+                    {screenSize === ScreenSize.Mobile && (
+                      <IconButton onClick={requestClose} variant="Background">
+                        <Icon src={Icons.Cross} />
+                      </IconButton>
                     )}
-                  />
-                </Avatar>
-                <Text size="H4" truncate>
-                  {roomName}
-                </Text>
-              </Box>
-              <Box shrink="No">
-                {screenSize === ScreenSize.Mobile && (
-                  <IconButton onClick={requestClose} variant="Background">
-                    <Icon src={Icons.Cross} />
-                  </IconButton>
-                )}
-              </Box>
-            </PageNavHeader>
-            <Box grow="Yes" direction="Column">
-              <PageNavContent>
-                <div style={{ flexGrow: 1 }}>
-                  {menuItems.map((item) => (
-                    <MenuItem
-                      key={item.name}
-                      variant="Background"
-                      radii="400"
-                      aria-pressed={activePage === item.page}
-                      before={<Icon src={item.icon} size="100" filled={activePage === item.page} />}
-                      onClick={() => setActivePage(item.page)}
-                    >
-                      <Text
-                        style={{
-                          fontWeight: activePage === item.page ? config.fontWeight.W600 : undefined,
-                        }}
-                        size="T300"
-                        truncate
-                      >
-                        {item.name}
-                      </Text>
-                    </MenuItem>
-                  ))}
-                </div>
-              </PageNavContent>
-            </Box>
-          </PageNav>
-        )
-      }
-    >
-      {activePage === RoomSettingsPage.GeneralPage && (
-        <General requestClose={handlePageRequestClose} />
-      )}
-      {activePage === RoomSettingsPage.MembersPage && (
-        <Members requestClose={handlePageRequestClose} />
-      )}
-      {activePage === RoomSettingsPage.PermissionsPage && (
-        <Permissions requestClose={handlePageRequestClose} />
-      )}
-      {activePage === RoomSettingsPage.EmojisStickersPage && (
-        <EmojisStickers requestClose={handlePageRequestClose} />
-      )}
-      {activePage === RoomSettingsPage.DeveloperToolsPage && (
-        <DeveloperTools requestClose={handlePageRequestClose} />
-      )}
-    </PageRoot>
+                  </Box>
+                </PageNavHeader>
+                <Box grow="Yes" direction="Column">
+                  <PageNavContent>
+                    <div style={{ flexGrow: 1 }}>
+                      {menuItems.map((item) => (
+                        <MenuItem
+                          key={item.name}
+                          variant="Background"
+                          radii="400"
+                          aria-pressed={activePage === item.page}
+                          before={
+                            <Icon src={item.icon} size="100" filled={activePage === item.page} />
+                          }
+                          onClick={() => setActivePage(item.page)}
+                        >
+                          <Text
+                            style={{
+                              fontWeight:
+                                activePage === item.page ? config.fontWeight.W600 : undefined,
+                            }}
+                            size="T300"
+                            truncate
+                          >
+                            {item.name}
+                          </Text>
+                        </MenuItem>
+                      ))}
+                    </div>
+                  </PageNavContent>
+                </Box>
+              </PageNav>
+            )
+          }
+        >
+          {activePage === RoomSettingsPage.GeneralPage && (
+            <General requestClose={handlePageRequestClose} />
+          )}
+          {activePage === RoomSettingsPage.MembersPage && (
+            <Members requestClose={handlePageRequestClose} />
+          )}
+          {activePage === RoomSettingsPage.PermissionsPage && (
+            <Permissions requestClose={handlePageRequestClose} />
+          )}
+          {activePage === RoomSettingsPage.EmojisStickersPage && (
+            <EmojisStickers requestClose={handlePageRequestClose} />
+          )}
+          {activePage === RoomSettingsPage.DeveloperToolsPage && (
+            <DeveloperTools requestClose={handlePageRequestClose} />
+          )}
+        </PageRoot>
+      </PowerLevelTagsContextProvider>
+    </PowerLevelsContextProvider>
   );
 }
diff --git a/src/app/features/room-settings/RoomSettingsRenderer.tsx b/src/app/features/room-settings/RoomSettingsRenderer.tsx
index bc967775..65f06165 100644
--- a/src/app/features/room-settings/RoomSettingsRenderer.tsx
+++ b/src/app/features/room-settings/RoomSettingsRenderer.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import { RoomSettings } from './RoomSettings';
 import { Modal500 } from '../../components/Modal500';
 import { useCloseRoomSettings, useRoomSettingsState } from '../../state/hooks/roomSettings';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
 import { RoomSettingsState } from '../../state/roomSettings';
 import { RoomProvider } from '../../hooks/useRoom';
 import { SpaceProvider } from '../../hooks/useSpace';
+import { useClient } from '../../hooks/useClient';
+import { useObservableValue } from '../../hooks/useObservableValue';
 
 type RenderSettingsProps = {
   state: RoomSettingsState;
@@ -13,17 +14,15 @@ type RenderSettingsProps = {
 function RenderSettings({ state }: RenderSettingsProps) {
   const { roomId, spaceId, page } = state;
   const closeSettings = useCloseRoomSettings();
-  const allJoinedRooms = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allJoinedRooms);
-  const room = getRoom(roomId);
-  const space = spaceId ? getRoom(spaceId) : undefined;
+  const ct = useClient();
+  const rooms = useObservableValue(ct.rooms.join);
 
-  if (!room) return null;
+  if (!rooms.includes(roomId)) return null;
 
   return (
     <Modal500 requestClose={closeSettings}>
-      <SpaceProvider value={space ?? null}>
-        <RoomProvider value={room}>
+      <SpaceProvider value={spaceId ?? null}>
+        <RoomProvider value={roomId}>
           <RoomSettings initialPage={page} requestClose={closeSettings} />
         </RoomProvider>
       </SpaceProvider>
diff --git a/src/app/features/room-settings/general/General.tsx b/src/app/features/room-settings/general/General.tsx
index 15157304..0dc17845 100644
--- a/src/app/features/room-settings/general/General.tsx
+++ b/src/app/features/room-settings/general/General.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { useRoom } from '../../../hooks/useRoom';
 import {
   RoomProfile,
@@ -21,8 +21,8 @@ type GeneralProps = {
 };
 export function General({ requestClose }: GeneralProps) {
   const room = useRoom();
-  const powerLevels = usePowerLevels(room);
   const creators = useRoomCreators(room);
+  const powerLevels = usePowerLevelsContext();
   const permissions = useRoomPermissions(creators, powerLevels);
 
   return (
diff --git a/src/app/hooks/storage/useRoomStateEvent.ts b/src/app/hooks/storage/useRoomStateEvent.ts
index 6c26559f..376f6d95 100644
--- a/src/app/hooks/storage/useRoomStateEvent.ts
+++ b/src/app/hooks/storage/useRoomStateEvent.ts
@@ -23,19 +23,19 @@ export const useRoomStateEvent = (
   return stateEventResult;
 };
 
+export const getRoomStateEventsQuery = (roomId: string, eventType: string) =>
+  new QueryRange(
+    getJoinRoomStateId(roomId, eventType, ''),
+    getJoinRoomStateId(roomId, eventType, MAX_UNICODE)
+  );
+
 export const useRoomStateEvents = (
   roomId: string,
   eventType: string
 ): PendingObservableResult<JoinRoomStateObject[]> => {
   const ct = useClient();
   const stateEventPromise = useMemo(
-    () =>
-      ct.storage.joinRoomState.observableRead.query(
-        new QueryRange(
-          getJoinRoomStateId(roomId, eventType, ''),
-          getJoinRoomStateId(roomId, eventType, MAX_UNICODE)
-        )
-      ),
+    () => ct.storage.joinRoomState.observableRead.query(getRoomStateEventsQuery(roomId, eventType)),
     [ct, roomId, eventType]
   );
 
diff --git a/src/app/hooks/useRoomAliases.ts b/src/app/hooks/useRoomAliases.ts
index 005ff0b6..115cd132 100644
--- a/src/app/hooks/useRoomAliases.ts
+++ b/src/app/hooks/useRoomAliases.ts
@@ -1,83 +1,75 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { MatrixError, Room } from 'matrix-js-sdk';
-import { RoomCanonicalAliasEventContent } from 'matrix-js-sdk/lib/types';
+import { ObjectReader } from 'neurone/lib/utils';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { getAliases, putStateEvent, GetAliasesOK } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { deleteRoom, putRoom } from 'neurone/lib/api/matrix/client/v3/directory';
 import { AsyncState, useAsyncCallback } from './useAsyncCallback';
-import { useMatrixClient } from './useMatrixClient';
 import { useAlive } from './useAlive';
-import { useStateEvent } from './useStateEvent';
-import { StateEvent } from '../../types/matrix/room';
-import { getStateEvent } from '../utils/room';
+import { useClient } from './useClient';
+import { useObservableValue } from './useObservableValue';
+import { RoomCanonicalAliasContent, StateEventType } from '../../types/matrix/room';
 
-export const usePublishedAliases = (room: Room): [string | undefined, string[]] => {
-  const aliasContent = useStateEvent(
-    room,
-    StateEvent.RoomCanonicalAlias
-  )?.getContent<RoomCanonicalAliasEventContent>();
+export const usePublishedAliases = (roomId: string): [string | undefined, string[]] => {
+  const ct = useClient();
+  const canonicalAliasEvents = useObservableValue(ct.state.join.canonicalAlias);
+  const content = canonicalAliasEvents.find((state) => state.roomId === roomId)?.event.content;
 
-  const canonicalAlias = aliasContent?.alias;
+  const alias = ObjectReader.string(content, 'alias');
+  const altAliases = ObjectReader.array(content, 'alt_aliases')?.filter(
+    (a): a is string => typeof a === 'string'
+  );
 
   const publishedAliases = useMemo(() => {
     const aliases: string[] = [];
-    if (typeof aliasContent?.alias === 'string') {
-      aliases.push(aliasContent.alias);
-    }
-    aliasContent?.alt_aliases?.forEach((alias) => {
-      if (typeof alias === 'string') {
-        aliases.push(alias);
-      }
-    });
+    if (alias) aliases.push(alias);
+    if (altAliases) aliases.push(...altAliases);
     return aliases;
-  }, [aliasContent]);
+  }, [alias, altAliases]);
 
-  return [canonicalAlias, publishedAliases];
+  return [alias, publishedAliases];
 };
 
-export const useSetMainAlias = (room: Room): ((alias: string | undefined) => Promise<void>) => {
-  const mx = useMatrixClient();
+export const useSetMainAlias = (
+  roomId: string,
+  publishedAliases: string[]
+): ((alias: string | undefined) => Promise<void>) => {
+  const ct = useClient();
+
   const mainAlias = useCallback(
     async (alias: string | undefined) => {
-      const content = getStateEvent(
-        room,
-        StateEvent.RoomCanonicalAlias
-      )?.getContent<RoomCanonicalAliasEventContent>();
-
-      const altAliases: string[] = [];
-      if (content?.alias && content.alias !== alias) {
-        altAliases.push(content.alias);
-      }
-      content?.alt_aliases?.forEach((a) => {
-        if (a !== alias) {
-          altAliases.push(a);
-        }
-      });
-
-      const newContent: RoomCanonicalAliasEventContent = {
+      const content: RoomCanonicalAliasContent = {
         alias,
-        alt_aliases: altAliases,
+        alt_aliases: publishedAliases.filter((a) => a !== alias),
       };
 
-      await mx.sendStateEvent(room.roomId, StateEvent.RoomCanonicalAlias as any, newContent);
+      const resp = await ct.requestAuthJSON(
+        putStateEvent({
+          pathParams: { roomId, eventType: StateEventType.RoomCanonicalAlias, stateKey: '' },
+          body: content,
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     },
-    [mx, room]
+    [ct, roomId, publishedAliases]
   );
 
   return mainAlias;
 };
 
 export const usePublishUnpublishAliases = (
-  room: Room
+  roomId: string,
+  publishedAliases: string[],
+  canonicalAlias?: string
 ): {
   publishAliases: (aliases: string[]) => Promise<void>;
   unpublishAliases: (aliases: string[]) => Promise<void>;
 } => {
-  const mx = useMatrixClient();
+  const ct = useClient();
+
   const publishAliases = useCallback(
     async (aliases: string[]) => {
-      const content = getStateEvent(
-        room,
-        StateEvent.RoomCanonicalAlias
-      )?.getContent<RoomCanonicalAliasEventContent>();
-      const altAliases = content?.alt_aliases ?? [];
+      const altAliases = publishedAliases.filter((a) => a !== canonicalAlias);
 
       aliases.forEach((alias) => {
         if (!altAliases.includes(alias)) {
@@ -85,38 +77,42 @@ export const usePublishUnpublishAliases = (
         }
       });
 
-      const newContent: RoomCanonicalAliasEventContent = {
-        alias: content?.alias,
+      const content: RoomCanonicalAliasContent = {
+        alias: canonicalAlias,
         alt_aliases: altAliases,
       };
 
-      await mx.sendStateEvent(room.roomId, StateEvent.RoomCanonicalAlias as any, newContent);
+      const resp = await ct.requestAuthJSON(
+        putStateEvent({
+          pathParams: { roomId, eventType: StateEventType.RoomCanonicalAlias, stateKey: '' },
+          body: content,
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     },
-    [mx, room]
+    [ct, roomId, publishedAliases, canonicalAlias]
   );
 
   const unpublishAliases = useCallback(
     async (aliases: string[]) => {
-      const content = getStateEvent(
-        room,
-        StateEvent.RoomCanonicalAlias
-      )?.getContent<RoomCanonicalAliasEventContent>();
-      const altAliases: string[] = [];
+      const altAliases: string[] = publishedAliases.filter((alias) => !aliases.includes(alias));
 
-      content?.alt_aliases?.forEach((alias) => {
-        if (!aliases.includes(alias)) {
-          altAliases.push(alias);
-        }
-      });
-
-      const newContent: RoomCanonicalAliasEventContent = {
-        alias: content?.alias,
+      const content: RoomCanonicalAliasContent = {
+        alias: canonicalAlias,
         alt_aliases: altAliases,
       };
 
-      await mx.sendStateEvent(room.roomId, StateEvent.RoomCanonicalAlias as any, newContent);
+      const resp = await ct.requestAuthJSON(
+        putStateEvent({
+          pathParams: { roomId, eventType: StateEventType.RoomCanonicalAlias, stateKey: '' },
+          body: content,
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     },
-    [mx, room]
+    [ct, roomId, publishedAliases, canonicalAlias]
   );
 
   return {
@@ -128,18 +124,20 @@ export const usePublishUnpublishAliases = (
 export const useLocalAliases = (
   roomId: string
 ): {
-  localAliasesState: AsyncState<string[], MatrixError>;
+  localAliasesState: AsyncState<string[], unknown>;
   addLocalAlias: (alias: string) => Promise<void>;
   removeLocalAlias: (alias: string) => Promise<void>;
 } => {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const alive = useAlive();
 
-  const [aliasesState, loadAliases] = useAsyncCallback<string[], MatrixError, []>(
+  const [aliasesState, loadAliases] = useAsyncCallback<string[], unknown, []>(
     useCallback(async () => {
-      const content = await mx.getLocalAliases(roomId);
-      return content.aliases;
-    }, [mx, roomId])
+      const resp = await ct.requestAuthJSON(getAliases({ pathParams: { roomId } }));
+      const [err, result] = await parseMatrixResp<GetAliasesOK>(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
+      return result.aliases;
+    }, [ct, roomId])
   );
 
   useEffect(() => {
@@ -148,18 +146,36 @@ export const useLocalAliases = (
 
   const addLocalAlias = useCallback(
     async (alias: string) => {
-      await mx.createAlias(alias, roomId);
+      const resp = await ct.requestAuthJSON(
+        putRoom({
+          pathParams: { roomAlias: alias },
+          body: { room_id: roomId },
+        })
+      );
+
+      const [err] = await parseMatrixResp(resp);
+      if (err) {
+        if (err.status === 409) {
+          throw new Error('Address is already in use!');
+        }
+        throw new Error(err.data.error ?? err.data.errcode);
+      }
+
       if (alive()) await loadAliases();
     },
-    [mx, roomId, loadAliases, alive]
+    [ct, roomId, loadAliases, alive]
   );
 
   const removeLocalAlias = useCallback(
     async (alias: string) => {
-      await mx.deleteAlias(alias);
+      const resp = await ct.requestAuthJSON(deleteRoom({ pathParams: { roomAlias: alias } }));
+
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
+
       if (alive()) await loadAliases();
     },
-    [mx, loadAliases, alive]
+    [ct, loadAliases, alive]
   );
 
   return {
diff --git a/src/app/hooks/useRoomDirectoryVisibility.ts b/src/app/hooks/useRoomDirectoryVisibility.ts
index 6a606013..40d09c32 100644
--- a/src/app/hooks/useRoomDirectoryVisibility.ts
+++ b/src/app/hooks/useRoomDirectoryVisibility.ts
@@ -1,16 +1,23 @@
+import {
+  getListRoom,
+  GetListRoomOK,
+  putListRoom,
+} from 'neurone/lib/api/matrix/client/v3/directory';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { useCallback, useEffect } from 'react';
-import { Visibility } from 'matrix-js-sdk';
 import { useAsyncCallback } from './useAsyncCallback';
-import { useMatrixClient } from './useMatrixClient';
+import { useClient } from './useClient';
 
 export const useRoomDirectoryVisibility = (roomId: string) => {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
   const [visibilityState, loadVisibility] = useAsyncCallback(
     useCallback(async () => {
-      const v = await mx.getRoomDirectoryVisibility(roomId);
-      return v.visibility === Visibility.Public;
-    }, [mx, roomId])
+      const resp = await ct.requestAuthJSON(getListRoom({ pathParams: { roomId } }));
+      const [err, result] = await parseMatrixResp<GetListRoomOK>(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
+      return result?.visibility === 'public';
+    }, [ct, roomId])
   );
 
   useEffect(() => {
@@ -18,14 +25,18 @@ export const useRoomDirectoryVisibility = (roomId: string) => {
   }, [loadVisibility]);
 
   const setVisibility = useCallback(
-    async (visibility: boolean) => {
-      await mx.setRoomDirectoryVisibility(
-        roomId,
-        visibility ? Visibility.Public : Visibility.Private
+    async (visible: boolean) => {
+      const resp = await ct.requestAuthJSON(
+        putListRoom({
+          pathParams: { roomId },
+          body: { visibility: visible ? 'public' : 'private' },
+        })
       );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
       await loadVisibility();
     },
-    [mx, roomId, loadVisibility]
+    [ct, roomId, loadVisibility]
   );
 
   return {
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index afe3c4ae..3e909c89 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -139,8 +139,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                   <UserRoomProfileRenderer />
                   <CreateRoomModalRenderer />
                   <CreateSpaceModalRenderer />
-                  {/*<RoomSettingsRenderer />
-                  <SpaceSettingsRenderer />
+                  <RoomSettingsRenderer />
+                  {/*<SpaceSettingsRenderer />
                   <ReceiveSelfDeviceVerification />
                   <AutoRestoreBackupOnVerification /> */}
                 </ClientRoomsNotificationPreferences>
diff --git a/src/app/state/upload.ts b/src/app/state/upload.ts
index 35d599a7..21954c33 100644
--- a/src/app/state/upload.ts
+++ b/src/app/state/upload.ts
@@ -60,7 +60,7 @@ export const createUploadAtom = (file: UploadContent) => {
     file,
     status: UploadStatus.Idle,
   });
-  return atom<Upload, [UploadAtomAction], undefined>(
+  return atom<Upload, [UploadAtomAction], void>(
     (get) => get(baseUploadAtom),
     (get, set, update) => {
       const uploadState = get(baseUploadAtom);
diff --git a/src/app/styles/Text.css.ts b/src/app/styles/Text.css.ts
index 0b2a6d8d..8e910fe4 100644
--- a/src/app/styles/Text.css.ts
+++ b/src/app/styles/Text.css.ts
@@ -5,6 +5,10 @@ export const BreakWord = style({
   wordBreak: 'break-word',
 });
 
+export const PreWrap = style({
+  whiteSpace: 'pre-wrap',
+});
+
 export const LineClamp2 = style({
   display: '-webkit-box',
   WebkitLineClamp: 2,
diff --git a/src/types/matrix/room.ts b/src/types/matrix/room.ts
index 8b1bde82..8ffafd49 100644
--- a/src/types/matrix/room.ts
+++ b/src/types/matrix/room.ts
@@ -1,4 +1,5 @@
 import { RoomMembership } from 'neurone/lib/api/types';
+import { HistoryVisibility } from 'neurone/lib/crypto/machine';
 import { IImageInfo } from './common';
 
 export enum Membership {
@@ -180,3 +181,11 @@ export type RoomServerAclContent = {
   allow_ip_literals?: boolean;
   deny?: string[];
 };
+
+export type RoomHistoryVisibilityContent = {
+  history_visibility: HistoryVisibility;
+};
+export type RoomCanonicalAliasContent = {
+  alias?: string;
+  alt_aliases?: string[];
+};

From d2545654473fb0bea08beca40fe9c6b42ec9dbcd Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 24 Jul 2026 09:48:54 +0530
Subject: [PATCH 029/158] move room members to new sdk

---
 src/app/components/member-tile/MemberTile.tsx |  69 ++++---
 .../common-settings/members/Members.tsx       |  95 +++++-----
 .../features/room-settings/RoomSettings.tsx   | 178 +++++++++---------
 src/app/features/room/MembersDrawer.tsx       |  12 +-
 src/app/hooks/useRoomMembers.ts               |   3 -
 5 files changed, 196 insertions(+), 161 deletions(-)

diff --git a/src/app/components/member-tile/MemberTile.tsx b/src/app/components/member-tile/MemberTile.tsx
index d36d46c2..cced34b0 100644
--- a/src/app/components/member-tile/MemberTile.tsx
+++ b/src/app/components/member-tile/MemberTile.tsx
@@ -1,48 +1,73 @@
 import React, { ReactNode } from 'react';
 import { as, Avatar, Box, Icon, Icons, Text } from 'folds';
-import { MatrixClient, Room, RoomMember } from 'matrix-js-sdk';
-import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
 import { UserAvatar } from '../user-avatar';
 import * as css from './style.css';
-
-const getName = (room: Room, member: RoomMember) =>
-  getMemberDisplayName(room, member.userId) ?? getMxIdLocalPart(member.userId) ?? member.userId;
+import { ClientContext } from '../../../client/context';
+import { JoinRoomMemberObject } from '../../../client/storage/collections';
+import { GetRoomMemberNameCallback, GetRoomMemberAvatarCallback } from '../../hooks/useRoomMembers';
+import { useUserPresence } from '../../hooks/useUserPresence';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import { PresenceBadge, AvatarPresence } from '../presence';
 
 type MemberTileProps = {
-  mx: MatrixClient;
-  room: Room;
-  member: RoomMember;
+  ct: ClientContext;
+  member: JoinRoomMemberObject;
+  getName: GetRoomMemberNameCallback;
+  getAvatar: GetRoomMemberAvatarCallback;
   useAuthentication: boolean;
   after?: ReactNode;
 };
 export const MemberTile = as<'button', MemberTileProps>(
-  ({ as: AsMemberTile = 'button', mx, room, member, useAuthentication, after, ...props }, ref) => {
-    const name = getName(room, member);
+  (
+    {
+      as: AsMemberTile = 'button',
+      ct,
+      member,
+      getName,
+      getAvatar,
+      useAuthentication,
+      after,
+      ...props
+    },
+    ref
+  ) => {
+    const presence = useUserPresence(member.userId);
     const username = getMxIdLocalPart(member.userId);
 
-    const avatarMxcUrl = member.getMxcAvatarUrl();
+    const name = getName(member.userId);
+    const avatarMxcUrl = getAvatar(member.userId);
     const avatarUrl = avatarMxcUrl
-      ? mx.mxcUrlToHttp(avatarMxcUrl, 100, 100, 'crop', undefined, false, useAuthentication)
+      ? mxcToHttp(ct.session.baseUrl, avatarMxcUrl, useAuthentication).thumbnail({
+          width: 96,
+          height: 96,
+          method: 'crop',
+        })
       : undefined;
 
     return (
       <AsMemberTile className={css.MemberTile} {...props} ref={ref}>
-        <Avatar size="300" radii="400">
-          <UserAvatar
-            userId={member.userId}
-            src={avatarUrl ?? undefined}
-            alt={name}
-            renderFallback={() => <Icon size="300" src={Icons.User} filled />}
-          />
-        </Avatar>
+        <AvatarPresence
+          variant="Surface"
+          badge={presence && <PresenceBadge size="300" presence={presence.presence} />}
+        >
+          <Avatar size="300" radii="400">
+            <UserAvatar
+              userId={member.userId}
+              src={avatarUrl ?? undefined}
+              alt={name}
+              renderFallback={() => <Icon size="300" src={Icons.User} filled />}
+            />
+          </Avatar>
+        </AvatarPresence>
+
         <Box grow="Yes" as="span" direction="Column">
           <Text as="span" size="T300" truncate>
             <b>{name}</b>
           </Text>
           <Box alignItems="Center" justifyContent="SpaceBetween" gap="100">
             <Text as="span" size="T200" priority="300" truncate>
-              {username}
+              @{username}
             </Text>
           </Box>
         </Box>
diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx
index 15cd1d08..1e185fcf 100644
--- a/src/app/features/common-settings/members/Members.tsx
+++ b/src/app/features/common-settings/members/Members.tsx
@@ -22,24 +22,16 @@ import {
   toRem,
 } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { RoomMember } from 'matrix-js-sdk';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
-import { useRoomMembers } from '../../../hooks/useRoomMembers';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { useGetMemberPowerLevel, usePowerLevels } from '../../../hooks/usePowerLevels';
+import { useGetMemberPowerLevel, usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { VirtualTile } from '../../../components/virtualizer';
 import { MemberTile } from '../../../components/member-tile';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
+import { getMxIdServer } from '../../../utils/matrix';
 import { ServerBadge } from '../../../components/server-badge';
 import { useDebounce } from '../../../hooks/useDebounce';
-import {
-  SearchItemStrGetter,
-  useAsyncSearch,
-  UseAsyncSearchOptions,
-} from '../../../hooks/useAsyncSearch';
-import { getMemberSearchStr } from '../../../utils/room';
+import { useAsyncSearch, UseAsyncSearchOptions } from '../../../hooks/useAsyncSearch';
 import { useMembershipFilter, useMembershipFilterMenu } from '../../../hooks/useMemberFilter';
 import { useMemberPowerSort, useMemberSort, useMemberSortMenu } from '../../../hooks/useMemberSort';
 import { settingsAtom } from '../../../state/settings';
@@ -56,6 +48,11 @@ import { useSpaceOptionally } from '../../../hooks/useSpace';
 import { useFlattenPowerTagMembers, useGetMemberPowerTag } from '../../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { getMouseEventCords } from '../../../utils/dom';
+import { useClient } from '../../../hooks/useClient';
+import { usePendingMembers } from '../../../hooks/usePendingMembers';
+import { JoinRoomMemberObject } from '../../../../client/storage/collections';
+import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
+import { getMemberSearchStr } from '../../../utils/room';
 
 const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   limit: 1000,
@@ -67,58 +64,65 @@ const SEARCH_OPTIONS: UseAsyncSearchOptions = {
   },
 };
 
-const mxIdToName = (mxId: string) => getMxIdLocalPart(mxId) ?? mxId;
-const getRoomMemberStr: SearchItemStrGetter<RoomMember> = (m, query) =>
-  getMemberSearchStr(m, query, mxIdToName);
-
 type MembersProps = {
   requestClose: () => void;
 };
+const EMPTY_MEMBER_LIST: JoinRoomMemberObject[] = [];
 export function Members({ requestClose }: MembersProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const roomId = useRoom();
   const useAuthentication = useMediaAuthentication();
-  const room = useRoom();
-  const members = useRoomMembers(mx, room.roomId);
-  const fetchingMembers = members.length < room.getJoinedMemberCount();
-  const openProfile = useOpenUserRoomProfile();
-  const profileUser = useUserRoomProfileState();
-  const space = useSpaceOptionally();
 
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
-  const getPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(roomId);
+  const getPowerTag = useGetMemberPowerTag(creators, powerLevels);
   const getPowerLevel = useGetMemberPowerLevel(powerLevels);
 
-  const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
+  const membersAPI = useRoomMembersAPI();
+  const members = membersAPI.memberEventsResult.value ?? EMPTY_MEMBER_LIST;
+  const loadingFromMemory = membersAPI.memberEventsResult.pending;
+
+  const fetchingMembers = usePendingMembers(roomId);
+
+  const openProfile = useOpenUserRoomProfile();
+  const spaceId = useSpaceOptionally();
+  const profileUser = useUserRoomProfileState();
+
+  const membershipFilterMenu = useMembershipFilterMenu(membersAPI.getMembership);
+  const sortFilterMenu = useMemberSortMenu(membersAPI.getName);
   const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
-  const membershipFilter = useMembershipFilter(membershipFilterIndex, useMembershipFilterMenu());
-  const memberSort = useMemberSort(sortFilterIndex, useMemberSortMenu());
+  const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
+
+  const membershipFilter = useMembershipFilter(membershipFilterIndex, membershipFilterMenu);
+  const memberSort = useMemberSort(sortFilterIndex, sortFilterMenu);
   const memberPowerSort = useMemberPowerSort(creators, getPowerLevel);
 
   const scrollRef = useRef<HTMLDivElement>(null);
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
 
-  const sortedMembers = useMemo(
-    () =>
-      Array.from(members)
-        .filter(membershipFilter.filterFn)
-        .sort(memberSort.sortFn)
-        .sort(memberPowerSort),
+  const filteredMembers = useMemo(
+    () => members.filter(membershipFilter.filterFn).sort(memberSort.sortFn).sort(memberPowerSort),
     [members, membershipFilter, memberSort, memberPowerSort]
   );
+  const memberCount = filteredMembers.length ?? 0;
 
   const [result, search, resetSearch] = useAsyncSearch(
-    sortedMembers,
-    getRoomMemberStr,
+    filteredMembers,
+    useCallback(
+      (m, query) => getMemberSearchStr(m, query, membersAPI.getName),
+      [membersAPI.getName]
+    ),
     SEARCH_OPTIONS
   );
   if (!result && searchInputRef.current?.value) search(searchInputRef.current.value);
 
-  const flattenTagMembers = useFlattenPowerTagMembers(result?.items ?? sortedMembers, getPowerTag);
+  const processMembers = result ? result.items : filteredMembers;
+
+  const PLTagOrRoomMember = useFlattenPowerTagMembers(processMembers, getPowerTag);
 
   const virtualizer = useVirtualizer({
-    count: flattenTagMembers.length,
+    count: PLTagOrRoomMember.length,
     getScrollElement: () => scrollRef.current,
     estimateSize: () => 40,
     overscan: 10,
@@ -147,7 +151,7 @@ export function Members({ requestClose }: MembersProps) {
     const btn = evt.currentTarget as HTMLButtonElement;
     const userId = btn.getAttribute('data-user-id');
     if (userId) {
-      openProfile(room.roomId, space?.roomId, userId, getMouseEventCords(evt.nativeEvent));
+      openProfile(roomId, spaceId, userId, getMouseEventCords(evt.nativeEvent));
     }
   };
 
@@ -157,7 +161,7 @@ export function Members({ requestClose }: MembersProps) {
         <Box grow="Yes" gap="200">
           <Box grow="Yes" alignItems="Center" gap="200">
             <Text size="H3" truncate>
-              {room.getJoinedMemberCount()} Members
+              {memberCount} Members
             </Text>
           </Box>
           <Box shrink="No">
@@ -287,13 +291,13 @@ export function Members({ requestClose }: MembersProps) {
                   <Icon src={Icons.ChevronTop} size="300" />
                 </IconButton>
               </ScrollTopContainer>
-              {fetchingMembers && (
+              {(fetchingMembers || loadingFromMemory) && (
                 <Box justifyContent="Center">
                   <Spinner />
                 </Box>
               )}
 
-              {!fetchingMembers && !result && flattenTagMembers.length === 0 && (
+              {!loadingFromMemory && !fetchingMembers && !result && processMembers.length === 0 && (
                 <Text style={{ padding: config.space.S300 }} align="Center">
                   {`No "${membershipFilter.name}" Members`}
                 </Text>
@@ -308,7 +312,7 @@ export function Members({ requestClose }: MembersProps) {
                 gap="100"
               >
                 {virtualizer.getVirtualItems().map((vItem) => {
-                  const tagOrMember = flattenTagMembers[vItem.index];
+                  const tagOrMember = PLTagOrRoomMember[vItem.index];
 
                   if ('userId' in tagOrMember) {
                     const server = getMxIdServer(tagOrMember.userId);
@@ -323,9 +327,10 @@ export function Members({ requestClose }: MembersProps) {
                             data-user-id={tagOrMember.userId}
                             onClick={handleMemberClick}
                             aria-pressed={profileUser?.userId === tagOrMember.userId}
-                            mx={mx}
-                            room={room}
+                            ct={ct}
                             member={tagOrMember}
+                            getName={membersAPI.getName}
+                            getAvatar={membersAPI.getAvatar}
                             useAuthentication={useAuthentication}
                             after={
                               server && (
diff --git a/src/app/features/room-settings/RoomSettings.tsx b/src/app/features/room-settings/RoomSettings.tsx
index 1850d5c8..baa194a9 100644
--- a/src/app/features/room-settings/RoomSettings.tsx
+++ b/src/app/features/room-settings/RoomSettings.tsx
@@ -27,6 +27,8 @@ import {
   usePowerLevelTags,
   usePowerLevelTagsState,
 } from '../../hooks/usePowerLevelTags';
+import { RoomMembersAPIProvider, useCreateRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { usePendingMemberLoader, usePendingMembers } from '../../hooks/usePendingMembers';
 
 type RoomSettingsMenuItem = {
   page: RoomSettingsPage;
@@ -86,6 +88,10 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
   const powerLevelTagsResult = usePowerLevelTagsState(roomId);
   const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsResult.value);
 
+  const membersAPI = useCreateRoomMembersAPI(roomId);
+  const membersPending = usePendingMembers(roomId);
+  usePendingMemberLoader(roomId, membersPending);
+
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
 
   const avatarUrl = roomAvatar
@@ -112,91 +118,93 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
   };
 
   return (
-    <PowerLevelsContextProvider value={powerLevels}>
-      <PowerLevelTagsContextProvider value={powerLevelTags}>
-        <PageRoot
-          nav={
-            screenSize === ScreenSize.Mobile && activePage !== undefined ? undefined : (
-              <PageNav size="300">
-                <PageNavHeader outlined={false}>
-                  <Box grow="Yes" gap="200">
-                    <Avatar size="200" radii="300">
-                      <RoomAvatar
-                        roomId={roomId}
-                        src={avatarUrl}
-                        alt={roomName}
-                        renderFallback={() => (
-                          <RoomIcon
-                            size="50"
-                            roomType={ct.roomToType.read.get(roomId)}
-                            joinRule={roomToJoinRule.get(roomId)}
-                            filled
-                          />
-                        )}
-                      />
-                    </Avatar>
-                    <Text size="H4" truncate>
-                      {roomName}
-                    </Text>
-                  </Box>
-                  <Box shrink="No">
-                    {screenSize === ScreenSize.Mobile && (
-                      <IconButton onClick={requestClose} variant="Background">
-                        <Icon src={Icons.Cross} />
-                      </IconButton>
-                    )}
-                  </Box>
-                </PageNavHeader>
-                <Box grow="Yes" direction="Column">
-                  <PageNavContent>
-                    <div style={{ flexGrow: 1 }}>
-                      {menuItems.map((item) => (
-                        <MenuItem
-                          key={item.name}
-                          variant="Background"
-                          radii="400"
-                          aria-pressed={activePage === item.page}
-                          before={
-                            <Icon src={item.icon} size="100" filled={activePage === item.page} />
-                          }
-                          onClick={() => setActivePage(item.page)}
-                        >
-                          <Text
-                            style={{
-                              fontWeight:
-                                activePage === item.page ? config.fontWeight.W600 : undefined,
-                            }}
-                            size="T300"
-                            truncate
+    <RoomMembersAPIProvider value={membersAPI}>
+      <PowerLevelsContextProvider value={powerLevels}>
+        <PowerLevelTagsContextProvider value={powerLevelTags}>
+          <PageRoot
+            nav={
+              screenSize === ScreenSize.Mobile && activePage !== undefined ? undefined : (
+                <PageNav size="300">
+                  <PageNavHeader outlined={false}>
+                    <Box grow="Yes" gap="200">
+                      <Avatar size="200" radii="300">
+                        <RoomAvatar
+                          roomId={roomId}
+                          src={avatarUrl}
+                          alt={roomName}
+                          renderFallback={() => (
+                            <RoomIcon
+                              size="50"
+                              roomType={ct.roomToType.read.get(roomId)}
+                              joinRule={roomToJoinRule.get(roomId)}
+                              filled
+                            />
+                          )}
+                        />
+                      </Avatar>
+                      <Text size="H4" truncate>
+                        {roomName}
+                      </Text>
+                    </Box>
+                    <Box shrink="No">
+                      {screenSize === ScreenSize.Mobile && (
+                        <IconButton onClick={requestClose} variant="Background">
+                          <Icon src={Icons.Cross} />
+                        </IconButton>
+                      )}
+                    </Box>
+                  </PageNavHeader>
+                  <Box grow="Yes" direction="Column">
+                    <PageNavContent>
+                      <div style={{ flexGrow: 1 }}>
+                        {menuItems.map((item) => (
+                          <MenuItem
+                            key={item.name}
+                            variant="Background"
+                            radii="400"
+                            aria-pressed={activePage === item.page}
+                            before={
+                              <Icon src={item.icon} size="100" filled={activePage === item.page} />
+                            }
+                            onClick={() => setActivePage(item.page)}
                           >
-                            {item.name}
-                          </Text>
-                        </MenuItem>
-                      ))}
-                    </div>
-                  </PageNavContent>
-                </Box>
-              </PageNav>
-            )
-          }
-        >
-          {activePage === RoomSettingsPage.GeneralPage && (
-            <General requestClose={handlePageRequestClose} />
-          )}
-          {activePage === RoomSettingsPage.MembersPage && (
-            <Members requestClose={handlePageRequestClose} />
-          )}
-          {activePage === RoomSettingsPage.PermissionsPage && (
-            <Permissions requestClose={handlePageRequestClose} />
-          )}
-          {activePage === RoomSettingsPage.EmojisStickersPage && (
-            <EmojisStickers requestClose={handlePageRequestClose} />
-          )}
-          {activePage === RoomSettingsPage.DeveloperToolsPage && (
-            <DeveloperTools requestClose={handlePageRequestClose} />
-          )}
-        </PageRoot>
-      </PowerLevelTagsContextProvider>
-    </PowerLevelsContextProvider>
+                            <Text
+                              style={{
+                                fontWeight:
+                                  activePage === item.page ? config.fontWeight.W600 : undefined,
+                              }}
+                              size="T300"
+                              truncate
+                            >
+                              {item.name}
+                            </Text>
+                          </MenuItem>
+                        ))}
+                      </div>
+                    </PageNavContent>
+                  </Box>
+                </PageNav>
+              )
+            }
+          >
+            {activePage === RoomSettingsPage.GeneralPage && (
+              <General requestClose={handlePageRequestClose} />
+            )}
+            {activePage === RoomSettingsPage.MembersPage && (
+              <Members requestClose={handlePageRequestClose} />
+            )}
+            {activePage === RoomSettingsPage.PermissionsPage && (
+              <Permissions requestClose={handlePageRequestClose} />
+            )}
+            {activePage === RoomSettingsPage.EmojisStickersPage && (
+              <EmojisStickers requestClose={handlePageRequestClose} />
+            )}
+            {activePage === RoomSettingsPage.DeveloperToolsPage && (
+              <DeveloperTools requestClose={handlePageRequestClose} />
+            )}
+          </PageRoot>
+        </PowerLevelTagsContextProvider>
+      </PowerLevelsContextProvider>
+    </RoomMembersAPIProvider>
   );
 }
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index d2be4e53..968c4e0e 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -66,17 +66,17 @@ import { useUserPresence } from '../../hooks/useUserPresence';
 import { AvatarPresence, PresenceBadge } from '../../components/presence';
 
 type MemberDrawerHeaderProps = {
-  joinedMemberCount: number;
+  memberCount: number;
 };
-function MemberDrawerHeader({ joinedMemberCount }: MemberDrawerHeaderProps) {
+function MemberDrawerHeader({ memberCount }: MemberDrawerHeaderProps) {
   const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
 
   return (
     <Header className={css.MembersDrawerHeader} variant="Background" size="600">
       <Box grow="Yes" alignItems="Center" gap="200">
         <Box grow="Yes" alignItems="Center" gap="200">
-          <Text title={`${joinedMemberCount} Members`} size="H5" truncate>
-            {joinedMemberCount > 0 ? `${millify(joinedMemberCount)} Members` : 'Members'}
+          <Text title={`${memberCount} Members`} size="H5" truncate>
+            {memberCount > 0 ? `${millify(memberCount)} Members` : 'Members'}
           </Text>
         </Box>
         <Box shrink="No" alignItems="Center">
@@ -229,7 +229,7 @@ export function MembersDrawer() {
     () => members.filter(membershipFilter.filterFn).sort(memberSort.sortFn).sort(memberPowerSort),
     [members, membershipFilter, memberSort, memberPowerSort]
   );
-  const joinedMemberCount = filteredMembers.length ?? 0;
+  const memberCount = filteredMembers.length ?? 0;
 
   const [result, search, resetSearch] = useAsyncSearch(
     filteredMembers,
@@ -276,7 +276,7 @@ export function MembersDrawer() {
       shrink="No"
       direction="Column"
     >
-      <MemberDrawerHeader joinedMemberCount={joinedMemberCount} />
+      <MemberDrawerHeader memberCount={memberCount} />
       <Box className={css.MemberDrawerContentBase} grow="Yes">
         <Scroll ref={scrollRef} variant="Background" size="300" visibility="Hover" hideTrack>
           <Box className={css.MemberDrawerContent} direction="Column" gap="200">
diff --git a/src/app/hooks/useRoomMembers.ts b/src/app/hooks/useRoomMembers.ts
index e30d83e5..e7532dd5 100644
--- a/src/app/hooks/useRoomMembers.ts
+++ b/src/app/hooks/useRoomMembers.ts
@@ -23,9 +23,6 @@ export type RoomMembersAPI = {
   memberEventsResult: PendingObservableResult<JoinRoomMemberObject[]>;
 };
 
-// FIXME: remove after usage over
-export const useRoomMembers = () => undefined;
-
 export const useCreateRoomMembersAPI = (roomId: string): RoomMembersAPI => {
   const ct = useClient();
   const memberEventsPromise = useMemo(

From f54880395b8176d5df493dbb79cfbbc0de576bc6 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 24 Jul 2026 10:02:57 +0530
Subject: [PATCH 030/158] move room permission to new sdk

---
 .../permissions/PermissionGroups.tsx          | 36 ++++++++-------
 .../common-settings/permissions/Powers.tsx    | 25 ++++++-----
 .../permissions/PowersEditor.tsx              | 45 ++++++++++---------
 .../room-settings/permissions/Permissions.tsx | 26 +++++------
 4 files changed, 73 insertions(+), 59 deletions(-)

diff --git a/src/app/features/common-settings/permissions/PermissionGroups.tsx b/src/app/features/common-settings/permissions/PermissionGroups.tsx
index 12150773..945395db 100644
--- a/src/app/features/common-settings/permissions/PermissionGroups.tsx
+++ b/src/app/features/common-settings/permissions/PermissionGroups.tsx
@@ -2,23 +2,28 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Badge, Box, Button, Chip, config, Icon, Icons, Menu, Spinner, Text } from 'folds';
 import produce from 'immer';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import {
   applyPermissionPower,
   getPermissionPower,
-  IPowerLevels,
   PermissionLocation,
+  usePowerLevelsContext,
 } from '../../../hooks/usePowerLevels';
 import { PermissionGroup } from './types';
-import { getPowerLevelTag, getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import {
+  usePowerLevelTagsContext,
+  getPowers,
+  getPowerLevelTag,
+} from '../../../hooks/usePowerLevelTags';
 import { useRoom } from '../../../hooks/useRoom';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { StateEvent } from '../../../../types/matrix/room';
+import { StateEventType } from '../../../../types/matrix/room';
 import { PowerSwitcher } from '../../../components/power';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
+import { useClient } from '../../../hooks/useClient';
 
 const USER_DEFAULT_LOCATION: PermissionLocation = {
   user: true,
@@ -26,19 +31,15 @@ const USER_DEFAULT_LOCATION: PermissionLocation = {
 
 type PermissionGroupsProps = {
   canEdit: boolean;
-  powerLevels: IPowerLevels;
   permissionGroups: PermissionGroup[];
 };
-export function PermissionGroups({
-  powerLevels,
-  permissionGroups,
-  canEdit,
-}: PermissionGroupsProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+export function PermissionGroups({ permissionGroups, canEdit }: PermissionGroupsProps) {
+  const ct = useClient();
+  const roomId = useRoom();
   const alive = useAlive();
 
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const powerLevels = usePowerLevelsContext();
+  const powerLevelTags = usePowerLevelTagsContext();
   const maxPower = useMemo(() => Math.max(...getPowers(powerLevelTags)), [powerLevelTags]);
 
   const [permissionUpdate, setPermissionUpdate] = useState<Map<PermissionLocation, number>>(
@@ -85,8 +86,13 @@ export function PermissionGroups({
 
         return draftPowerLevels;
       });
-      await mx.sendStateEvent(room.roomId, StateEvent.RoomPowerLevels as any, editedPowerLevels);
-    }, [mx, room, powerLevels, permissionUpdate, permissionGroups])
+      await ct.requestAuthJSON(
+        putStateEvent({
+          pathParams: { roomId, eventType: StateEventType.RoomPowerLevels, stateKey: '' },
+          body: editedPowerLevels,
+        })
+      );
+    }, [ct, roomId, powerLevels, permissionUpdate, permissionGroups])
   );
 
   const resetChanges = useCallback(() => {
diff --git a/src/app/features/common-settings/permissions/Powers.tsx b/src/app/features/common-settings/permissions/Powers.tsx
index fe4f5689..fed04c94 100644
--- a/src/app/features/common-settings/permissions/Powers.tsx
+++ b/src/app/features/common-settings/permissions/Powers.tsx
@@ -16,18 +16,22 @@ import {
 } from 'folds';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
-import { getPowers, usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import { getPowers, usePowerLevelTagsContext } from '../../../hooks/usePowerLevelTags';
 import { SettingTile } from '../../../components/setting-tile';
-import { getPermissionPower, IPowerLevels } from '../../../hooks/usePowerLevels';
+import {
+  getPermissionPower,
+  IPowerLevels,
+  usePowerLevelsContext,
+} from '../../../hooks/usePowerLevels';
 import { useRoom } from '../../../hooks/useRoom';
 import { PowerColorBadge, PowerIcon } from '../../../components/power';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { stopPropagation } from '../../../utils/keyboard';
 import { PermissionGroup } from './types';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
 import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useClient } from '../../../hooks/useClient';
 
 type PeekPermissionsProps = {
   powerLevels: IPowerLevels;
@@ -103,23 +107,24 @@ function PeekPermissions({ powerLevels, power, permissionGroups, children }: Pee
 }
 
 type PowersProps = {
-  powerLevels: IPowerLevels;
   permissionGroups: PermissionGroup[];
   onEdit?: () => void;
 };
-export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
-  const mx = useMatrixClient();
+export function Powers({ permissionGroups, onEdit }: PowersProps) {
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const room = useRoom();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+
+  const powerLevels = usePowerLevelsContext();
+  const powerLevelTags = usePowerLevelTagsContext();
   const creators = useRoomCreators(room);
   const creatorsTag = useRoomCreatorsTag();
   const creatorTagIconSrc =
-    creatorsTag.icon && getPowerTagIconSrc(mx, useAuthentication, creatorsTag.icon);
+    creatorsTag.icon && getPowerTagIconSrc(ct, useAuthentication, creatorsTag.icon);
 
   return (
     <Box direction="Column" gap="100">
-      {creators.size > 0 && (
+      {creators && creators.size > 0 && (
         <SequenceCard
           variant="SurfaceVariant"
           className={SequenceCardStyle}
@@ -178,7 +183,7 @@ export function Powers({ powerLevels, permissionGroups, onEdit }: PowersProps) {
           <Box gap="200" wrap="Wrap">
             {getPowers(powerLevelTags).map((power) => {
               const tag = powerLevelTags[power];
-              const tagIconSrc = tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
+              const tagIconSrc = tag.icon && getPowerTagIconSrc(ct, useAuthentication, tag.icon);
 
               return (
                 <PeekPermissions
diff --git a/src/app/features/common-settings/permissions/PowersEditor.tsx b/src/app/features/common-settings/permissions/PowersEditor.tsx
index 97305946..19a1ff75 100644
--- a/src/app/features/common-settings/permissions/PowersEditor.tsx
+++ b/src/app/features/common-settings/permissions/PowersEditor.tsx
@@ -19,9 +19,9 @@ import {
   Tooltip,
 } from 'folds';
 import { HexColorPicker } from 'react-colorful';
-import { useAtomValue } from 'jotai';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { Page, PageContent, PageHeader } from '../../../components/page';
-import { IPowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
@@ -29,7 +29,7 @@ import {
   getPowers,
   getUsedPowers,
   PowerLevelTags,
-  usePowerLevelTags,
+  usePowerLevelTagsContext,
 } from '../../../hooks/usePowerLevelTags';
 import { useRoom } from '../../../hooks/useRoom';
 import { HexColorPickerPopOut } from '../../../components/HexColorPickerPopOut';
@@ -37,18 +37,17 @@ import { PowerColorBadge, PowerIcon } from '../../../components/power';
 import { UseStateProvider } from '../../../components/UseStateProvider';
 import { EmojiBoard } from '../../../components/emoji-board';
 import { useImagePackRooms } from '../../../hooks/useImagePackRooms';
-import { roomToParentsAtom } from '../../../state/room/roomToParents';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useFilePicker } from '../../../hooks/useFilePicker';
 import { CompactUploadCardRenderer } from '../../../components/upload-card';
 import { createUploadAtom, UploadSuccess } from '../../../state/upload';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { MemberPowerTag, MemberPowerTagIcon, StateEvent } from '../../../../types/matrix/room';
+import { MemberPowerTag, MemberPowerTagIcon, StateEventType } from '../../../../types/matrix/room';
 import { useAlive } from '../../../hooks/useAlive';
 import { BetaNoticeBadge } from '../../../components/BetaNoticeBadge';
 import { getPowerTagIconSrc } from '../../../hooks/useMemberPowerTag';
 import { creatorsSupported } from '../../../utils/matrix';
+import { useClient } from '../../../hooks/useClient';
 
 type EditPowerProps = {
   maxPower: number;
@@ -58,13 +57,12 @@ type EditPowerProps = {
   onClose: () => void;
 };
 function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const roomToParents = useAtomValue(roomToParentsAtom);
+  const ct = useClient();
+  const roomId = useRoom();
   const useAuthentication = useMediaAuthentication();
-  const supportCreators = creatorsSupported(room.getVersion());
+  const supportCreators = creatorsSupported(ct.roomToVersion.read.get(roomId) ?? '1');
 
-  const imagePackRooms = useImagePackRooms(room.roomId, roomToParents);
+  const imagePackRooms = useImagePackRooms(roomId);
 
   const [iconFile, setIconFile] = useState<File>();
   const pickFile = useFilePicker(setIconFile, false);
@@ -72,7 +70,7 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
   const [tagColor, setTagColor] = useState<string | undefined>(tag?.color);
   const [tagIcon, setTagIcon] = useState<MemberPowerTagIcon | undefined>(tag?.icon);
   const uploadingIcon = iconFile && !tagIcon;
-  const tagIconSrc = tagIcon && getPowerTagIconSrc(mx, useAuthentication, tagIcon);
+  const tagIconSrc = tagIcon && getPowerTagIconSrc(ct, useAuthentication, tagIcon);
 
   const iconUploadAtom = useMemo(() => {
     if (iconFile) return createUploadAtom(iconFile);
@@ -285,20 +283,22 @@ function EditPower({ maxPower, power, tag, onSave, onClose }: EditPowerProps) {
 }
 
 type PowersEditorProps = {
-  powerLevels: IPowerLevels;
   requestClose: () => void;
 };
-export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
-  const mx = useMatrixClient();
+export function PowersEditor({ requestClose }: PowersEditorProps) {
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const room = useRoom();
+  const roomId = useRoom();
   const alive = useAlive();
+
+  const powerLevels = usePowerLevelsContext();
+
   const [usedPowers, maxPower] = useMemo(() => {
     const up = getUsedPowers(powerLevels);
     return [up, Math.max(...Array.from(up))];
   }, [powerLevels]);
 
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
+  const powerLevelTags = usePowerLevelTagsContext();
   const [editedPowerTags, setEditedPowerTags] = useState<PowerLevelTags>();
   const [deleted, setDeleted] = useState<Set<number>>(new Set());
 
@@ -333,8 +333,13 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
       deleted.forEach((power) => {
         delete content[power];
       });
-      await mx.sendStateEvent(room.roomId, StateEvent.PowerLevelTags as any, content);
-    }, [mx, room, powerLevelTags, editedPowerTags, deleted])
+      await ct.requestAuthJSON(
+        putStateEvent({
+          pathParams: { roomId, eventType: StateEventType.PowerLevelTags, stateKey: '' },
+          body: content,
+        })
+      );
+    }, [ct, roomId, powerLevelTags, editedPowerTags, deleted])
   );
 
   const resetChanges = useCallback(() => {
@@ -420,7 +425,7 @@ export function PowersEditor({ powerLevels, requestClose }: PowersEditorProps) {
                 {getPowers(powerTags).map((power) => {
                   const tag = powerTags[power];
                   const tagIconSrc =
-                    tag.icon && getPowerTagIconSrc(mx, useAuthentication, tag.icon);
+                    tag.icon && getPowerTagIconSrc(ct, useAuthentication, tag.icon);
 
                   return (
                     <SequenceCard
diff --git a/src/app/features/room-settings/permissions/Permissions.tsx b/src/app/features/room-settings/permissions/Permissions.tsx
index 7572a71b..39d888c3 100644
--- a/src/app/features/room-settings/permissions/Permissions.tsx
+++ b/src/app/features/room-settings/permissions/Permissions.tsx
@@ -2,27 +2,30 @@ import React, { useState } from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { StateEvent } from '../../../../types/matrix/room';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
+import { StateEventType } from '../../../../types/matrix/room';
 import { usePermissionGroups } from './usePermissionItems';
 import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import { useClient } from '../../../hooks/useClient';
 
 type PermissionsProps = {
   requestClose: () => void;
 };
 export function Permissions({ requestClose }: PermissionsProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const room = useRoom();
-  const powerLevels = usePowerLevels(room);
+  const powerLevels = usePowerLevelsContext();
   const creators = useRoomCreators(room);
 
   const permissions = useRoomPermissions(creators, powerLevels);
 
-  const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, mx.getSafeUserId());
-  const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
+  const canEditPowers = permissions.stateEvent(StateEventType.PowerLevelTags, ct.session.userId);
+  const canEditPermissions = permissions.stateEvent(
+    StateEventType.RoomPowerLevels,
+    ct.session.userId
+  );
   const permissionGroups = usePermissionGroups();
 
   const [powerEditor, setPowerEditor] = useState(false);
@@ -32,7 +35,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
   };
 
   if (canEditPowers && powerEditor) {
-    return <PowersEditor powerLevels={powerLevels} requestClose={() => setPowerEditor(false)} />;
+    return <PowersEditor requestClose={() => setPowerEditor(false)} />;
   }
 
   return (
@@ -56,15 +59,10 @@ export function Permissions({ requestClose }: PermissionsProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <Powers
-                powerLevels={powerLevels}
                 onEdit={canEditPowers ? handleEditPowers : undefined}
                 permissionGroups={permissionGroups}
               />
-              <PermissionGroups
-                canEdit={canEditPermissions}
-                powerLevels={powerLevels}
-                permissionGroups={permissionGroups}
-              />
+              <PermissionGroups canEdit={canEditPermissions} permissionGroups={permissionGroups} />
             </Box>
           </PageContent>
         </Scroll>

From 3a94fe7bf46be4af1aabefc9ab5035c041daa901 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 24 Jul 2026 14:00:03 +0530
Subject: [PATCH 031/158] move room emoji and stickers to new sdk

---
 .../image-pack-view/ImagePackView.tsx         |  9 ++-
 .../components/image-pack-view/ImageTile.tsx  | 12 ++--
 .../components/image-pack-view/PackMeta.tsx   | 14 ++--
 .../image-pack-view/RoomImagePack.tsx         | 45 +++++++------
 .../image-pack-view/UserImagePack.tsx         | 23 ++++---
 .../emojis-stickers/RoomPacks.tsx             | 65 +++++++++++++------
 src/app/hooks/useImagePacks.ts                |  4 +-
 7 files changed, 105 insertions(+), 67 deletions(-)

diff --git a/src/app/components/image-pack-view/ImagePackView.tsx b/src/app/components/image-pack-view/ImagePackView.tsx
index ab81d503..92bb5758 100644
--- a/src/app/components/image-pack-view/ImagePackView.tsx
+++ b/src/app/components/image-pack-view/ImagePackView.tsx
@@ -2,17 +2,16 @@ import React from 'react';
 import { Box, IconButton, Text, Icon, Icons, Scroll, Chip } from 'folds';
 import { PackAddress } from '../../plugins/custom-emoji';
 import { Page, PageHeader, PageContent } from '../page';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { RoomImagePack } from './RoomImagePack';
 import { UserImagePack } from './UserImagePack';
+import { useClient } from '../../hooks/useClient';
 
 type ImagePackViewProps = {
   address: PackAddress | undefined;
   requestClose: () => void;
 };
 export function ImagePackView({ address, requestClose }: ImagePackViewProps) {
-  const mx = useMatrixClient();
-  const room = address && mx.getRoom(address.roomId);
+  const ct = useClient();
 
   return (
     <Page>
@@ -38,8 +37,8 @@ export function ImagePackView({ address, requestClose }: ImagePackViewProps) {
       <Box grow="Yes">
         <Scroll hideTrack visibility="Hover">
           <PageContent>
-            {room && address ? (
-              <RoomImagePack room={room} stateKey={address.stateKey} />
+            {address && ct.rooms.join.read.includes(address.roomId) ? (
+              <RoomImagePack roomId={address.roomId} stateKey={address.stateKey} />
             ) : (
               <UserImagePack />
             )}
diff --git a/src/app/components/image-pack-view/ImageTile.tsx b/src/app/components/image-pack-view/ImageTile.tsx
index 959426f4..bdf74046 100644
--- a/src/app/components/image-pack-view/ImageTile.tsx
+++ b/src/app/components/image-pack-view/ImageTile.tsx
@@ -1,14 +1,14 @@
 import React, { FormEventHandler, ReactNode, useMemo, useState } from 'react';
 import { Badge, Box, Button, Chip, Icon, Icons, Input, Text } from 'folds';
 import { UsageSwitcher, useUsageStr } from './UsageSwitcher';
-import { mxcUrlToHttp } from '../../utils/matrix';
 import * as css from './style.css';
 import { ImageUsage, imageUsageEqual, PackImageReader } from '../../plugins/custom-emoji';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { SettingTile } from '../setting-tile';
 import { useObjectURL } from '../../hooks/useObjectURL';
 import { createUploadAtom, UploadAtom } from '../../state/upload';
 import { replaceSpaceWithDash } from '../../utils/common';
+import { useClient } from '../../hooks/useClient';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 type ImageTileProps = {
   defaultShortcode: string;
@@ -30,7 +30,7 @@ export function ImageTile({
   onDeleteToggle,
   deleted,
 }: ImageTileProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const getUsageStr = useUsageStr();
 
   return (
@@ -38,7 +38,7 @@ export function ImageTile({
       before={
         <img
           className={css.ImagePackImage}
-          src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
+          src={mxcToHttp(ct.session.baseUrl, image.url, useAuthentication).url() ?? ''}
           alt={image.shortcode}
           loading="lazy"
         />
@@ -120,7 +120,7 @@ export function ImageTileEdit({
   onCancel,
   onSave,
 }: ImageTileEditProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const defaultUsage = image.usage ?? packUsage;
 
   const [unsavedUsage, setUnsavedUsages] = useState(defaultUsage);
@@ -162,7 +162,7 @@ export function ImageTileEdit({
       before={
         <img
           className={css.ImagePackImage}
-          src={mxcUrlToHttp(mx, image.url, useAuthentication) ?? ''}
+          src={mxcToHttp(ct.session.baseUrl, image.url, useAuthentication).url() ?? ''}
           alt={image.shortcode}
           loading="lazy"
         />
diff --git a/src/app/components/image-pack-view/PackMeta.tsx b/src/app/components/image-pack-view/PackMeta.tsx
index f091f30b..fc18a68b 100644
--- a/src/app/components/image-pack-view/PackMeta.tsx
+++ b/src/app/components/image-pack-view/PackMeta.tsx
@@ -13,8 +13,6 @@ import {
   Chip,
 } from 'folds';
 import Linkify from 'linkify-react';
-import { mxcUrlToHttp } from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { nameInitials } from '../../utils/common';
 import { BreakWord } from '../../styles/Text.css';
 import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
@@ -25,6 +23,8 @@ import { createUploadAtom, UploadSuccess } from '../../state/upload';
 import { CompactUploadCardRenderer } from '../upload-card';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { PackMetaReader } from '../../plugins/custom-emoji';
+import { useClient } from '../../hooks/useClient';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 type ImagePackAvatarProps = {
   url?: string;
@@ -50,10 +50,10 @@ type ImagePackProfileProps = {
   onEdit?: () => void;
 };
 export function ImagePackProfile({ meta, canEdit, onEdit }: ImagePackProfileProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const avatarUrl = meta.avatar
-    ? mxcUrlToHttp(mx, meta.avatar, useAuthentication) ?? undefined
+    ? mxcToHttp(ct.session.baseUrl, meta.avatar, useAuthentication).url()
     : undefined;
 
   return (
@@ -97,11 +97,13 @@ type ImagePackProfileEditProps = {
   onSave: (meta: PackMetaReader) => void;
 };
 export function ImagePackProfileEdit({ meta, onCancel, onSave }: ImagePackProfileEditProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const [avatar, setAvatar] = useState(meta.avatar);
 
-  const avatarUrl = avatar ? mxcUrlToHttp(mx, avatar, useAuthentication) ?? undefined : undefined;
+  const avatarUrl = avatar
+    ? mxcToHttp(ct.session.baseUrl, avatar, useAuthentication).url()
+    : undefined;
 
   const [imageFile, setImageFile] = useState<File>();
   const avatarFileUrl = useObjectURL(imageFile);
diff --git a/src/app/components/image-pack-view/RoomImagePack.tsx b/src/app/components/image-pack-view/RoomImagePack.tsx
index 92b4ff21..6b10781c 100644
--- a/src/app/components/image-pack-view/RoomImagePack.tsx
+++ b/src/app/components/image-pack-view/RoomImagePack.tsx
@@ -1,28 +1,28 @@
 import React, { useCallback, useMemo } from 'react';
-import { Room } from 'matrix-js-sdk';
-import { usePowerLevels } from '../../hooks/usePowerLevels';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { ImagePackContent } from './ImagePackContent';
 import { ImagePack, PackContent } from '../../plugins/custom-emoji';
-import { StateEvent } from '../../../types/matrix/room';
+import { StateEventType } from '../../../types/matrix/room';
 import { useRoomImagePack } from '../../hooks/useImagePacks';
 import { randomStr } from '../../utils/common';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
+import { useClient } from '../../hooks/useClient';
 
 type RoomImagePackProps = {
-  room: Room;
+  roomId: string;
   stateKey: string;
 };
 
-export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
-  const mx = useMatrixClient();
-  const userId = mx.getUserId()!;
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
+export function RoomImagePack({ roomId, stateKey }: RoomImagePackProps) {
+  const ct = useClient();
+  const { userId } = ct.session;
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(roomId);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const canEditImagePack = permissions.stateEvent(StateEvent.PoniesRoomEmotes, userId);
+  const canEditImagePack = permissions.stateEvent(StateEventType.PoniesRoomEmotes, userId);
 
   const fallbackPack = useMemo(() => {
     const fakePackId = randomStr(4);
@@ -30,26 +30,31 @@ export function RoomImagePack({ room, stateKey }: RoomImagePackProps) {
       fakePackId,
       {},
       {
-        roomId: room.roomId,
+        roomId,
         stateKey,
       }
     );
-  }, [room.roomId, stateKey]);
-  const imagePack = useRoomImagePack(room, stateKey) ?? fallbackPack;
+  }, [roomId, stateKey]);
+  const imagePackResult = useRoomImagePack(roomId, stateKey);
+  const imagePack = imagePackResult.value ?? fallbackPack;
 
   const handleUpdate = useCallback(
     async (packContent: PackContent) => {
       const { address } = imagePack;
       if (!address) return;
 
-      await mx.sendStateEvent(
-        address.roomId,
-        StateEvent.PoniesRoomEmotes,
-        packContent,
-        address.stateKey
+      await ct.requestAuthJSON(
+        putStateEvent({
+          pathParams: {
+            roomId: address.roomId,
+            eventType: StateEventType.PoniesRoomEmotes,
+            stateKey: address.stateKey,
+          },
+          body: packContent,
+        })
       );
     },
-    [mx, imagePack]
+    [ct, imagePack]
   );
 
   return (
diff --git a/src/app/components/image-pack-view/UserImagePack.tsx b/src/app/components/image-pack-view/UserImagePack.tsx
index 4987793d..fcd93b8d 100644
--- a/src/app/components/image-pack-view/UserImagePack.tsx
+++ b/src/app/components/image-pack-view/UserImagePack.tsx
@@ -1,22 +1,29 @@
 import React, { useCallback, useMemo } from 'react';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
 import { ImagePackContent } from './ImagePackContent';
 import { ImagePack, PackContent } from '../../plugins/custom-emoji';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { AccountDataEvent } from '../../../types/matrix/accountData';
+import { AccountDataType } from '../../../types/matrix/accountData';
 import { useUserImagePack } from '../../hooks/useImagePacks';
+import { useClient } from '../../hooks/useClient';
 
 export function UserImagePack() {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
-  const defaultPack = useMemo(() => new ImagePack(mx.getUserId() ?? '', {}, undefined), [mx]);
-  const imagePack = useUserImagePack();
+  const defaultPack = useMemo(() => new ImagePack(ct.session.userId ?? '', {}, undefined), [ct]);
+  const imagePackResult = useUserImagePack();
+  const imagePack = imagePackResult.value ?? defaultPack;
 
   const handleUpdate = useCallback(
     async (packContent: PackContent) => {
-      await mx.setAccountData(AccountDataEvent.PoniesUserEmotes, packContent);
+      await ct.requestAuthJSON(
+        putAccountData({
+          pathParams: { type: AccountDataType.PoniesUserEmotes, userId: ct.session.userId },
+          body: packContent,
+        })
+      );
     },
-    [mx]
+    [ct]
   );
 
-  return <ImagePackContent imagePack={imagePack ?? defaultPack} canEdit onUpdate={handleUpdate} />;
+  return <ImagePackContent imagePack={imagePack} canEdit onUpdate={handleUpdate} />;
 }
diff --git a/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx b/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx
index fdbe546e..8ae2d177 100644
--- a/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx
+++ b/src/app/features/common-settings/emojis-stickers/RoomPacks.tsx
@@ -16,7 +16,8 @@ import {
   IconButton,
   Menu,
 } from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { SequenceCard } from '../../../components/sequence-card';
 import {
   ImagePack,
@@ -30,26 +31,26 @@ import { useRoomImagePacks } from '../../../hooks/useImagePacks';
 import { LineClamp2 } from '../../../styles/Text.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCardStyle } from '../styles.css';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { mxcUrlToHttp } from '../../../utils/matrix';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
-import { StateEvent } from '../../../../types/matrix/room';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
+import { StateEventType } from '../../../../types/matrix/room';
 import { suffixRename } from '../../../utils/common';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useAlive } from '../../../hooks/useAlive';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import { useClient } from '../../../hooks/useClient';
 
 type CreatePackTileProps = {
   packs: ImagePack[];
   roomId: string;
 };
 function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const alive = useAlive();
 
-  const [addState, addPack] = useAsyncCallback<void, MatrixError, [string, string]>(
+  const [addState, addPack] = useAsyncCallback<void, unknown, [string, string]>(
     useCallback(
       async (stateKey, name) => {
         const content: PackContent = {
@@ -57,9 +58,17 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
             display_name: name,
           },
         };
-        await mx.sendStateEvent(roomId, StateEvent.PoniesRoomEmotes as any, content, stateKey);
+
+        const resp = await ct.requestAuthJSON(
+          putStateEvent({
+            pathParams: { roomId, eventType: StateEventType.PoniesRoomEmotes, stateKey },
+            body: content,
+          })
+        );
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
       },
-      [mx, roomId]
+      [ct, roomId]
     )
   );
 
@@ -119,7 +128,7 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
             />
             {addState.status === AsyncStatus.Error && (
               <Text style={{ color: color.Critical.Main }} size="T300">
-                {addState.error.message}
+                {addState.error instanceof Error ? addState.error.message : 'Unknown Error'}
               </Text>
             )}
           </Box>
@@ -141,19 +150,21 @@ function CreatePackTile({ packs, roomId }: CreatePackTileProps) {
 type RoomPacksProps = {
   onViewPack: (imagePack: ImagePack) => void;
 };
+const EMPTY_PACKS: ImagePack[] = [];
 export function RoomPacks({ onViewPack }: RoomPacksProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const room = useRoom();
+  const roomId = useRoom();
   const alive = useAlive();
 
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(roomId);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const canEdit = permissions.stateEvent(StateEvent.PoniesRoomEmotes, mx.getSafeUserId());
+  const canEdit = permissions.stateEvent(StateEventType.PoniesRoomEmotes, ct.session.userId);
 
-  const unfilteredPacks = useRoomImagePacks(room);
+  const unfilteredPacksResult = useRoomImagePacks(roomId);
+  const unfilteredPacks = unfilteredPacksResult.value ?? EMPTY_PACKS;
   const packs = useMemo(() => unfilteredPacks.filter((pack) => !pack.deleted), [unfilteredPacks]);
 
   const [removedPacks, setRemovedPacks] = useState<PackAddress[]>([]);
@@ -164,9 +175,21 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
       for (let i = 0; i < removedPacks.length; i += 1) {
         const addr = removedPacks[i];
         // eslint-disable-next-line no-await-in-loop
-        await mx.sendStateEvent(room.roomId, StateEvent.PoniesRoomEmotes as any, {}, addr.stateKey);
+        const resp = await ct.requestAuthJSON(
+          putStateEvent({
+            pathParams: {
+              roomId,
+              eventType: StateEventType.PoniesRoomEmotes,
+              stateKey: addr.stateKey,
+            },
+            body: {},
+          })
+        );
+        // eslint-disable-next-line no-await-in-loop
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
       }
-    }, [mx, room, removedPacks])
+    }, [ct, roomId, removedPacks])
   );
   const applyingChanges = applyState.status === AsyncStatus.Loading;
 
@@ -190,7 +213,9 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
 
   const renderPack = (pack: ImagePack) => {
     const avatarMxc = pack.getAvatarUrl(ImageUsage.Emoticon);
-    const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
+    const avatarUrl = avatarMxc
+      ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).url()
+      : undefined;
     const { address } = pack;
     if (!address) return null;
     const removed = !!removedPacks.find((addr) => packAddressEqual(addr, address));
@@ -268,7 +293,7 @@ export function RoomPacks({ onViewPack }: RoomPacksProps) {
     <>
       <Box direction="Column" gap="100">
         <Text size="L400">Packs</Text>
-        {canEdit && <CreatePackTile roomId={room.roomId} packs={packs} />}
+        {canEdit && <CreatePackTile roomId={roomId} packs={packs} />}
         {packs.map(renderPack)}
         {packs.length === 0 && (
           <SequenceCard
diff --git a/src/app/hooks/useImagePacks.ts b/src/app/hooks/useImagePacks.ts
index 6f3d52fc..91a701f2 100644
--- a/src/app/hooks/useImagePacks.ts
+++ b/src/app/hooks/useImagePacks.ts
@@ -65,7 +65,7 @@ export const useGlobalImagePacks = (): PendingObservableResult<ImagePack[]> => {
     useCallback(
       (roomPackEvents) =>
         roomPackEvents
-          .filter((p) => !!p)
+          .filter((p): p is JoinRoomStateObject => !!p)
           .map((packEvent) => ImagePack.fromStateEvent(packEvent.roomId, packEvent.event)),
       []
     )
@@ -150,7 +150,7 @@ export const useRoomsImagePacks = (rooms: string[]): PendingObservableResult<Ima
     useCallback(
       (roomPackEvents) =>
         roomPackEvents
-          .filter((p) => !!p)
+          .filter((p): p is JoinRoomStateObject => !!p)
           .map((roomPackEvent) =>
             ImagePack.fromStateEvent(roomPackEvent.roomId, roomPackEvent.event)
           ),

From 7787055df13d749582c74a0eb153f18d7c19fbd3 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 24 Jul 2026 15:09:35 +0530
Subject: [PATCH 032/158] update room devtool to new sdk

---
 src/app/components/AccountDataEditor.tsx      |   7 +-
 .../developer-tools/DevelopTools.tsx          | 387 ++++++++++--------
 .../developer-tools/SendRoomEvent.tsx         |  44 +-
 .../developer-tools/StateEventEditor.tsx      |  69 ++--
 src/app/hooks/storage/useRoomStateEvent.ts    |  12 +
 5 files changed, 300 insertions(+), 219 deletions(-)

diff --git a/src/app/components/AccountDataEditor.tsx b/src/app/components/AccountDataEditor.tsx
index 2dbaf1f1..07334543 100644
--- a/src/app/components/AccountDataEditor.tsx
+++ b/src/app/components/AccountDataEditor.tsx
@@ -14,7 +14,6 @@ import {
   Scroll,
   config,
 } from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
 import { Cursor } from '../plugins/text-area';
 import { syntaxErrorPosition } from '../utils/dom';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
@@ -57,7 +56,7 @@ function AccountDataEdit({
     EDITOR_INTENT_SPACE_COUNT
   );
 
-  const [submitState, submit] = useAsyncCallback<void, MatrixError, [string, object]>(submitChange);
+  const [submitState, submit] = useAsyncCallback<void, unknown, [string, object]>(submitChange);
   const submitting = submitState.status === AsyncStatus.Loading;
 
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
@@ -159,7 +158,9 @@ function AccountDataEdit({
 
         {submitState.status === AsyncStatus.Error && (
           <Text size="T200" style={{ color: color.Critical.Main }}>
-            <b>{submitState.error.message}</b>
+            <b>
+              {submitState.error instanceof Error ? submitState.error.message : 'Unknown Error'}
+            </b>
           </Text>
         )}
       </Box>
diff --git a/src/app/features/common-settings/developer-tools/DevelopTools.tsx b/src/app/features/common-settings/developer-tools/DevelopTools.tsx
index 29b6aa51..7d12a7c9 100644
--- a/src/app/features/common-settings/developer-tools/DevelopTools.tsx
+++ b/src/app/features/common-settings/developer-tools/DevelopTools.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useState } from 'react';
+import React, { useCallback, useMemo, useState } from 'react';
 import {
   Box,
   Text,
@@ -12,6 +12,9 @@ import {
   config,
   color,
 } from 'folds';
+import { putRoomAccountData } from 'neurone/lib/api/matrix/client/v3/user';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { AccountDataEvent, StateEventWithoutRoomId } from 'neurone/lib/api/types';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
@@ -20,54 +23,240 @@ import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
 import { copyToClipboard } from '../../../utils/dom';
 import { useRoom } from '../../../hooks/useRoom';
-import { useRoomState } from '../../../hooks/useRoomState';
-import { StateEventEditor, StateEventInfo } from './StateEventEditor';
-import { SendRoomEvent } from './SendRoomEvent';
-import { useRoomAccountData } from '../../../hooks/useRoomAccountData';
+import { StateEventEditor } from './StateEventEditor';
+import { EventLocation, SendRoomEvent } from './SendRoomEvent';
 import { CutoutCard } from '../../../components/cutout-card';
 import {
   AccountDataEditor,
   AccountDataSubmitCallback,
 } from '../../../components/AccountDataEditor';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { useClient } from '../../../hooks/useClient';
+import { useRoomState } from '../../../hooks/storage/useRoomStateEvent';
+import { JoinRoomStateObject } from '../../../../client/storage/collections';
+import { useRoomAccountData } from '../../../hooks/storage/useRoomAccountData';
+
+export function RoomStateList({
+  onCompose,
+  onView,
+}: {
+  onCompose: (location: EventLocation) => void;
+  onView: (event: StateEventWithoutRoomId) => void;
+}) {
+  const roomId = useRoom();
+  const roomStateResult = useRoomState(roomId);
+  const [expandStateType, setExpandStateType] = useState<string>();
+
+  const typeToEvents = useMemo(() => {
+    const events = roomStateResult.value ?? [];
+
+    const tToE = new Map<string, JoinRoomStateObject[]>();
+
+    events.forEach((event) => {
+      const list = tToE.get(event.type) ?? [];
+      list.push(event);
+      tToE.set(event.type, list);
+    });
+
+    return tToE;
+  }, [roomStateResult]);
+
+  return (
+    <Box direction="Column" gap="100">
+      <Box justifyContent="SpaceBetween">
+        <Text size="L400">Events</Text>
+        {roomStateResult.value && <Text size="L400">Total: {roomStateResult.value.length}</Text>}
+      </Box>
+      <CutoutCard>
+        <MenuItem
+          onClick={() => onCompose({ stateKey: '' })}
+          variant="Surface"
+          fill="None"
+          size="300"
+          radii="0"
+          before={<Icon size="50" src={Icons.Plus} />}
+        >
+          <Box grow="Yes">
+            <Text size="T200" truncate>
+              Add New
+            </Text>
+          </Box>
+        </MenuItem>
+        {Array.from(typeToEvents.keys())
+          .sort()
+          .map((eventType) => {
+            const expanded = eventType === expandStateType;
+
+            const events = typeToEvents.get(eventType);
+            if (!events) return null;
+
+            return (
+              <Box id={eventType} key={eventType} direction="Column" gap="100">
+                <MenuItem
+                  onClick={() => setExpandStateType(expanded ? undefined : eventType)}
+                  variant="Surface"
+                  fill="None"
+                  size="300"
+                  radii="0"
+                  before={
+                    <Icon size="50" src={expanded ? Icons.ChevronBottom : Icons.ChevronRight} />
+                  }
+                  after={<Text size="L400">{events.length}</Text>}
+                >
+                  <Box grow="Yes">
+                    <Text size="T200" truncate>
+                      {eventType}
+                    </Text>
+                  </Box>
+                </MenuItem>
+                {expanded && (
+                  <div
+                    style={{
+                      marginLeft: config.space.S400,
+                      borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+                    }}
+                  >
+                    <MenuItem
+                      onClick={() => onCompose({ type: eventType, stateKey: '' })}
+                      variant="Surface"
+                      fill="None"
+                      size="300"
+                      radii="0"
+                      before={<Icon size="50" src={Icons.Plus} />}
+                    >
+                      <Box grow="Yes">
+                        <Text size="T200" truncate>
+                          Add New
+                        </Text>
+                      </Box>
+                    </MenuItem>
+                    {Array.from(events)
+                      .sort()
+                      .map((eventObj) => (
+                        <MenuItem
+                          onClick={() => {
+                            onView(eventObj.event);
+                          }}
+                          key={eventObj.event.state_key}
+                          variant="Surface"
+                          fill="None"
+                          size="300"
+                          radii="0"
+                          after={<Icon size="50" src={Icons.ChevronRight} />}
+                        >
+                          <Box grow="Yes">
+                            <Text size="T200" truncate>
+                              {eventObj.event.state_key
+                                ? `"${eventObj.event.state_key}"`
+                                : 'Default'}
+                            </Text>
+                          </Box>
+                        </MenuItem>
+                      ))}
+                  </div>
+                )}
+              </Box>
+            );
+          })}
+      </CutoutCard>
+    </Box>
+  );
+}
+
+export function AccountDataList({
+  onCompose,
+}: {
+  onCompose: (event: AccountDataEvent | null) => void;
+}) {
+  const roomId = useRoom();
+  const accountDataResult = useRoomAccountData(roomId);
+
+  return (
+    <Box direction="Column" gap="100">
+      <Box justifyContent="SpaceBetween">
+        <Text size="L400">Events</Text>
+        {accountDataResult.value && (
+          <Text size="L400">Total: {accountDataResult.value.length}</Text>
+        )}
+      </Box>
+      <CutoutCard>
+        <MenuItem
+          variant="Surface"
+          fill="None"
+          size="300"
+          radii="0"
+          before={<Icon size="50" src={Icons.Plus} />}
+          onClick={() => onCompose(null)}
+        >
+          <Box grow="Yes">
+            <Text size="T200" truncate>
+              Add New
+            </Text>
+          </Box>
+        </MenuItem>
+        {Array.from(accountDataResult.value ?? [])
+          .sort((e1, e2) => (e1.type < e2.type ? -1 : 1))
+          .map((event) => (
+            <MenuItem
+              key={event.type}
+              variant="Surface"
+              fill="None"
+              size="300"
+              radii="0"
+              after={<Icon size="50" src={Icons.ChevronRight} />}
+              onClick={() => onCompose(event.event)}
+            >
+              <Box grow="Yes">
+                <Text size="T200" truncate>
+                  {event.type}
+                </Text>
+              </Box>
+            </MenuItem>
+          ))}
+      </CutoutCard>
+    </Box>
+  );
+}
 
 type DeveloperToolsProps = {
   requestClose: () => void;
 };
 export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
   const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
-  const mx = useMatrixClient();
-  const room = useRoom();
-
-  const roomState = useRoomState(room);
-  const accountData = useRoomAccountData(room);
+  const ct = useClient();
+  const roomId = useRoom();
 
   const [expandState, setExpandState] = useState(false);
-  const [expandStateType, setExpandStateType] = useState<string>();
-  const [openStateEvent, setOpenStateEvent] = useState<StateEventInfo>();
-  const [composeEvent, setComposeEvent] = useState<{ type?: string; stateKey?: string }>();
+  const [openStateEvent, setOpenStateEvent] = useState<StateEventWithoutRoomId>();
+  const [composeEvent, setComposeEvent] = useState<EventLocation>();
 
   const [expandAccountData, setExpandAccountData] = useState(false);
-  const [accountDataType, setAccountDataType] = useState<string | null>();
+  const [openAccountData, setOpenAccountData] = useState<AccountDataEvent | null | undefined>();
 
   const handleClose = useCallback(() => {
     setOpenStateEvent(undefined);
     setComposeEvent(undefined);
-    setAccountDataType(undefined);
+    setOpenAccountData(undefined);
   }, []);
 
   const submitAccountData: AccountDataSubmitCallback = useCallback(
     async (type, content) => {
-      await mx.setRoomAccountData(room.roomId, type, content);
+      const resp = await ct.requestAuthJSON(
+        putRoomAccountData({
+          pathParams: { roomId, type, userId: ct.session.userId },
+          body: content,
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     },
-    [mx, room.roomId]
+    [ct, roomId]
   );
 
-  if (accountDataType !== undefined) {
+  if (openAccountData !== undefined) {
     return (
       <AccountDataEditor
-        type={accountDataType ?? undefined}
-        content={accountDataType ? accountData.get(accountDataType) : undefined}
+        type={openAccountData?.type}
+        content={openAccountData?.content}
         submitChange={submitAccountData}
         requestClose={handleClose}
       />
@@ -79,7 +268,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
   }
 
   if (openStateEvent) {
-    return <StateEventEditor {...openStateEvent} requestClose={handleClose} />;
+    return <StateEventEditor event={openStateEvent} requestClose={handleClose} />;
   }
 
   return (
@@ -130,10 +319,10 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
                   >
                     <SettingTile
                       title="Room ID"
-                      description={`Copy room ID to clipboard. ("${room.roomId}")`}
+                      description={`Copy room ID to clipboard. ("${roomId}")`}
                       after={
                         <Button
-                          onClick={() => copyToClipboard(room.roomId ?? '<NO_ROOM_ID_FOUND>')}
+                          onClick={() => copyToClipboard(roomId)}
                           variant="Secondary"
                           fill="Soft"
                           size="300"
@@ -205,111 +394,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
                       }
                     />
                     {expandState && (
-                      <Box direction="Column" gap="100">
-                        <Box justifyContent="SpaceBetween">
-                          <Text size="L400">Events</Text>
-                          <Text size="L400">Total: {roomState.size}</Text>
-                        </Box>
-                        <CutoutCard>
-                          <MenuItem
-                            onClick={() => setComposeEvent({ stateKey: '' })}
-                            variant="Surface"
-                            fill="None"
-                            size="300"
-                            radii="0"
-                            before={<Icon size="50" src={Icons.Plus} />}
-                          >
-                            <Box grow="Yes">
-                              <Text size="T200" truncate>
-                                Add New
-                              </Text>
-                            </Box>
-                          </MenuItem>
-                          {Array.from(roomState.keys())
-                            .sort()
-                            .map((eventType) => {
-                              const expanded = eventType === expandStateType;
-                              const stateKeyToEvents = roomState.get(eventType);
-                              if (!stateKeyToEvents) return null;
-
-                              return (
-                                <Box id={eventType} key={eventType} direction="Column" gap="100">
-                                  <MenuItem
-                                    onClick={() =>
-                                      setExpandStateType(expanded ? undefined : eventType)
-                                    }
-                                    variant="Surface"
-                                    fill="None"
-                                    size="300"
-                                    radii="0"
-                                    before={
-                                      <Icon
-                                        size="50"
-                                        src={expanded ? Icons.ChevronBottom : Icons.ChevronRight}
-                                      />
-                                    }
-                                    after={<Text size="L400">{stateKeyToEvents.size}</Text>}
-                                  >
-                                    <Box grow="Yes">
-                                      <Text size="T200" truncate>
-                                        {eventType}
-                                      </Text>
-                                    </Box>
-                                  </MenuItem>
-                                  {expanded && (
-                                    <div
-                                      style={{
-                                        marginLeft: config.space.S400,
-                                        borderLeft: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
-                                      }}
-                                    >
-                                      <MenuItem
-                                        onClick={() =>
-                                          setComposeEvent({ type: eventType, stateKey: '' })
-                                        }
-                                        variant="Surface"
-                                        fill="None"
-                                        size="300"
-                                        radii="0"
-                                        before={<Icon size="50" src={Icons.Plus} />}
-                                      >
-                                        <Box grow="Yes">
-                                          <Text size="T200" truncate>
-                                            Add New
-                                          </Text>
-                                        </Box>
-                                      </MenuItem>
-                                      {Array.from(stateKeyToEvents.keys())
-                                        .sort()
-                                        .map((stateKey) => (
-                                          <MenuItem
-                                            onClick={() => {
-                                              setOpenStateEvent({
-                                                type: eventType,
-                                                stateKey,
-                                              });
-                                            }}
-                                            key={stateKey}
-                                            variant="Surface"
-                                            fill="None"
-                                            size="300"
-                                            radii="0"
-                                            after={<Icon size="50" src={Icons.ChevronRight} />}
-                                          >
-                                            <Box grow="Yes">
-                                              <Text size="T200" truncate>
-                                                {stateKey ? `"${stateKey}"` : 'Default'}
-                                              </Text>
-                                            </Box>
-                                          </MenuItem>
-                                        ))}
-                                    </div>
-                                  )}
-                                </Box>
-                              );
-                            })}
-                        </CutoutCard>
-                      </Box>
+                      <RoomStateList onCompose={setComposeEvent} onView={setOpenStateEvent} />
                     )}
                   </SequenceCard>
                   <SequenceCard
@@ -341,49 +426,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
                         </Button>
                       }
                     />
-                    {expandAccountData && (
-                      <Box direction="Column" gap="100">
-                        <Box justifyContent="SpaceBetween">
-                          <Text size="L400">Events</Text>
-                          <Text size="L400">Total: {accountData.size}</Text>
-                        </Box>
-                        <CutoutCard>
-                          <MenuItem
-                            variant="Surface"
-                            fill="None"
-                            size="300"
-                            radii="0"
-                            before={<Icon size="50" src={Icons.Plus} />}
-                            onClick={() => setAccountDataType(null)}
-                          >
-                            <Box grow="Yes">
-                              <Text size="T200" truncate>
-                                Add New
-                              </Text>
-                            </Box>
-                          </MenuItem>
-                          {Array.from(accountData.keys())
-                            .sort()
-                            .map((type) => (
-                              <MenuItem
-                                key={type}
-                                variant="Surface"
-                                fill="None"
-                                size="300"
-                                radii="0"
-                                after={<Icon size="50" src={Icons.ChevronRight} />}
-                                onClick={() => setAccountDataType(type)}
-                              >
-                                <Box grow="Yes">
-                                  <Text size="T200" truncate>
-                                    {type}
-                                  </Text>
-                                </Box>
-                              </MenuItem>
-                            ))}
-                        </CutoutCard>
-                      </Box>
-                    )}
+                    {expandAccountData && <AccountDataList onCompose={setOpenAccountData} />}
                   </SequenceCard>
                 </Box>
               )}
diff --git a/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx b/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx
index f25ba7c3..8a2dc59d 100644
--- a/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx
+++ b/src/app/features/common-settings/developer-tools/SendRoomEvent.tsx
@@ -1,5 +1,4 @@
 import React, { useCallback, useRef, useState, FormEventHandler, useEffect } from 'react';
-import { MatrixError } from 'matrix-js-sdk';
 import {
   Box,
   Chip,
@@ -14,25 +13,30 @@ import {
   TextArea as TextAreaComponent,
   Input,
 } from 'folds';
+import { putSend, putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { Page, PageHeader } from '../../../components/page';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useRoom } from '../../../hooks/useRoom';
 import { useAlive } from '../../../hooks/useAlive';
 import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { syntaxErrorPosition } from '../../../utils/dom';
 import { Cursor } from '../../../plugins/text-area';
+import { useClient } from '../../../hooks/useClient';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
-export type SendRoomEventProps = {
+export type EventLocation = {
   type?: string;
   stateKey?: string;
+};
+
+export type SendRoomEventProps = EventLocation & {
   requestClose: () => void;
 };
 export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
   const alive = useAlive();
   const composeStateEvent = typeof stateKey === 'string';
 
@@ -44,18 +48,28 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
   );
 
   const [submitState, submit] = useAsyncCallback<
-    object,
-    MatrixError,
+    void,
+    unknown,
     [string, string | undefined, object]
   >(
     useCallback(
-      (evtType, evtStateKey, evtContent) => {
-        if (typeof evtStateKey === 'string') {
-          return mx.sendStateEvent(room.roomId, evtType as any, evtContent, evtStateKey);
-        }
-        return mx.sendEvent(room.roomId, evtType as any, evtContent);
+      async (evtType, evtStateKey, evtContent) => {
+        const resp = await ct.requestAuthJSON(
+          typeof evtStateKey === 'string'
+            ? putStateEvent({
+                pathParams: { roomId, eventType: evtType, stateKey: evtStateKey },
+                body: evtContent,
+              })
+            : putSend({
+                pathParams: { roomId, eventType: evtType, txnId: ct.getTxnId() },
+                body: evtContent,
+              })
+        );
+
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
       },
-      [mx, room]
+      [ct, roomId]
     )
   );
   const submitting = submitState.status === AsyncStatus.Loading;
@@ -162,7 +176,9 @@ export function SendRoomEvent({ type, stateKey, requestClose }: SendRoomEventPro
 
             {submitState.status === AsyncStatus.Error && (
               <Text size="T200" style={{ color: color.Critical.Main }}>
-                <b>{submitState.error.message}</b>
+                <b>
+                  {submitState.error instanceof Error ? submitState.error.message : 'Unknown Error'}
+                </b>
               </Text>
             )}
           </Box>
diff --git a/src/app/features/common-settings/developer-tools/StateEventEditor.tsx b/src/app/features/common-settings/developer-tools/StateEventEditor.tsx
index 0ea96901..cfb54a20 100644
--- a/src/app/features/common-settings/developer-tools/StateEventEditor.tsx
+++ b/src/app/features/common-settings/developer-tools/StateEventEditor.tsx
@@ -13,24 +13,24 @@ import {
   Spinner,
   Button,
 } from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
+import { StateEventWithoutRoomId } from 'neurone/lib/api/types';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { Page, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { TextViewerContent } from '../../../components/text-viewer';
-import { useStateEvent } from '../../../hooks/useStateEvent';
 import { useRoom } from '../../../hooks/useRoom';
-import { StateEvent } from '../../../../types/matrix/room';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useAlive } from '../../../hooks/useAlive';
 import { Cursor } from '../../../plugins/text-area';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { syntaxErrorPosition } from '../../../utils/dom';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCardStyle } from '../styles.css';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { useTextAreaCodeEditor } from '../../../hooks/useTextAreaCodeEditor';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import { useClient } from '../../../hooks/useClient';
 
 const EDITOR_INTENT_SPACE_COUNT = 2;
 
@@ -41,8 +41,8 @@ type StateEventEditProps = {
   requestClose: () => void;
 };
 function StateEventEdit({ type, stateKey, content, requestClose }: StateEventEditProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
   const alive = useAlive();
 
   const defaultContentStr = useMemo(
@@ -57,10 +57,20 @@ function StateEventEdit({ type, stateKey, content, requestClose }: StateEventEdi
     EDITOR_INTENT_SPACE_COUNT
   );
 
-  const [submitState, submit] = useAsyncCallback<object, MatrixError, [object]>(
+  const [submitState, submit] = useAsyncCallback<void, unknown, [object]>(
     useCallback(
-      (c) => mx.sendStateEvent(room.roomId, type as any, c, stateKey),
-      [mx, room, type, stateKey]
+      async (c) => {
+        const resp = await ct.requestAuthJSON(
+          putStateEvent({
+            pathParams: { roomId, eventType: type, stateKey },
+            body: c,
+          })
+        );
+
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
+      },
+      [ct, roomId, type, stateKey]
     )
   );
   const submitting = submitState.status === AsyncStatus.Loading;
@@ -157,7 +167,9 @@ function StateEventEdit({ type, stateKey, content, requestClose }: StateEventEdi
 
         {submitState.status === AsyncStatus.Error && (
           <Text size="T200" style={{ color: color.Critical.Main }}>
-            <b>{submitState.error.message}</b>
+            <b>
+              {submitState.error instanceof Error ? submitState.error.message : 'Unknown Error'}
+            </b>
           </Text>
         )}
       </Box>
@@ -232,29 +244,26 @@ function StateEventView({ content, eventJSONStr, onEditContent }: StateEventView
   );
 }
 
-export type StateEventInfo = {
-  type: string;
-  stateKey: string;
-};
-export type StateEventEditorProps = StateEventInfo & {
+export type StateEventEditorProps = {
+  event: StateEventWithoutRoomId;
   requestClose: () => void;
 };
 
-export function StateEventEditor({ type, stateKey, requestClose }: StateEventEditorProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const stateEvent = useStateEvent(room, type as unknown as StateEvent, stateKey);
+export function StateEventEditor({ event, requestClose }: StateEventEditorProps) {
+  const ct = useClient();
+  const roomId = useRoom();
+
   const [editContent, setEditContent] = useState<object>();
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(roomId);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const canEdit = permissions.stateEvent(type, mx.getSafeUserId());
+  const canEdit = permissions.stateEvent(event.type, ct.session.userId);
 
-  const eventJSONStr = useMemo(() => {
-    if (!stateEvent) return '';
-    return JSON.stringify(stateEvent.event, null, EDITOR_INTENT_SPACE_COUNT);
-  }, [stateEvent]);
+  const eventJSONStr = useMemo(
+    () => JSON.stringify(event, null, EDITOR_INTENT_SPACE_COUNT),
+    [event]
+  );
 
   const handleCloseEdit = useCallback(() => {
     setEditContent(undefined);
@@ -284,14 +293,14 @@ export function StateEventEditor({ type, stateKey, requestClose }: StateEventEdi
       <Box grow="Yes" direction="Column">
         {editContent ? (
           <StateEventEdit
-            type={type}
-            stateKey={stateKey}
+            type={event.type}
+            stateKey={event.state_key}
             content={editContent}
             requestClose={handleCloseEdit}
           />
         ) : (
           <StateEventView
-            content={stateEvent?.getContent() ?? {}}
+            content={event.content}
             onEditContent={canEdit ? setEditContent : undefined}
             eventJSONStr={eventJSONStr}
           />
diff --git a/src/app/hooks/storage/useRoomStateEvent.ts b/src/app/hooks/storage/useRoomStateEvent.ts
index 376f6d95..157f1a2f 100644
--- a/src/app/hooks/storage/useRoomStateEvent.ts
+++ b/src/app/hooks/storage/useRoomStateEvent.ts
@@ -43,3 +43,15 @@ export const useRoomStateEvents = (
 
   return stateEventResult;
 };
+
+export const useRoomState = (roomId: string): PendingObservableResult<JoinRoomStateObject[]> => {
+  const ct = useClient();
+  const eventsPromise = useMemo(
+    () => ct.storage.joinRoomState.observableRead.queryIndex('roomId', roomId),
+    [ct, roomId]
+  );
+
+  const eventsResult = useObservableValuePromise(eventsPromise);
+
+  return eventsResult;
+};

From bdb9abb2e2d8cbb7a63ad28a26c7a788e08d28d8 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 24 Jul 2026 15:10:04 +0530
Subject: [PATCH 033/158] add room account data hook

---
 src/app/hooks/storage/useRoomAccountData.ts | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)
 create mode 100644 src/app/hooks/storage/useRoomAccountData.ts

diff --git a/src/app/hooks/storage/useRoomAccountData.ts b/src/app/hooks/storage/useRoomAccountData.ts
new file mode 100644
index 00000000..d7344144
--- /dev/null
+++ b/src/app/hooks/storage/useRoomAccountData.ts
@@ -0,0 +1,20 @@
+import { PendingObservableResult } from 'neurone/lib/utils/observable';
+import { useMemo } from 'react';
+import { JoinAccountDataObject } from '../../../client/storage/collections';
+import { useClient } from '../useClient';
+import { useObservableValuePromise } from '../useObservableValue';
+
+export const useRoomAccountData = (
+  roomId: string
+): PendingObservableResult<JoinAccountDataObject[]> => {
+  const ct = useClient();
+
+  const eventsPromise = useMemo(
+    () => ct.storage.joinAccountData.observableRead.queryIndex('roomId', roomId),
+    [ct, roomId]
+  );
+
+  const eventsResult = useObservableValuePromise(eventsPromise);
+
+  return eventsResult;
+};

From 4da96b68f1ae1f8919b872d7fedb612eedb05203 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 24 Jul 2026 20:58:25 +0530
Subject: [PATCH 034/158] move space settings to new sdk

---
 src/app/components/user-profile/UserHero.tsx  |   2 +-
 src/app/components/user-profile/styles.css.ts |   1 +
 .../features/space-settings/SpaceSettings.tsx | 219 ++++++++++--------
 .../space-settings/SpaceSettingsRenderer.tsx  |  16 +-
 .../space-settings/general/General.tsx        |   4 +-
 .../permissions/Permissions.tsx               |  25 +-
 src/app/pages/Router.tsx                      |   4 +-
 7 files changed, 152 insertions(+), 119 deletions(-)

diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 762d3527..2273aaab 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -66,7 +66,7 @@ export function UserHeroCover({
             avatarUrl === bannerUrl && css.UserHeroCoverBlurred
           )}
           src={bannerUrl}
-          alt="{userId}"
+          alt={userId}
           draggable="false"
           onError={() => setError(true)}
         />
diff --git a/src/app/components/user-profile/styles.css.ts b/src/app/components/user-profile/styles.css.ts
index c254ba42..b8dc6567 100644
--- a/src/app/components/user-profile/styles.css.ts
+++ b/src/app/components/user-profile/styles.css.ts
@@ -22,6 +22,7 @@ export const UserHeroCover = style({
   height: '100%',
   width: '100%',
   objectFit: 'cover',
+  fontSize: 1,
 });
 export const UserHeroCoverBlurred = style({
   filter: 'blur(16px)',
diff --git a/src/app/features/space-settings/SpaceSettings.tsx b/src/app/features/space-settings/SpaceSettings.tsx
index b5fefc93..fb3dab07 100644
--- a/src/app/features/space-settings/SpaceSettings.tsx
+++ b/src/app/features/space-settings/SpaceSettings.tsx
@@ -1,14 +1,8 @@
 import React, { useMemo, useState } from 'react';
-import { useAtomValue } from 'jotai';
 import { Avatar, Box, config, Icon, IconButton, Icons, IconSrc, MenuItem, Text } from 'folds';
-import { JoinRule } from 'matrix-js-sdk';
 import { PageNav, PageNavContent, PageNavHeader, PageRoot } from '../../components/page';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { mxcUrlToHttp } from '../../utils/matrix';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { useRoomAvatar, useRoomJoinRule, useRoomName } from '../../hooks/useRoomMeta';
-import { mDirectAtom } from '../../state/mDirectList';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { SpaceSettingsPage } from '../../state/spaceSettings';
 import { useRoom } from '../../hooks/useRoom';
@@ -17,6 +11,24 @@ import { Members } from '../common-settings/members';
 import { DeveloperTools } from '../common-settings/developer-tools';
 import { General } from './general';
 import { Permissions } from './permissions';
+import { useClient } from '../../hooks/useClient';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
+import {
+  PowerLevelsContextProvider,
+  usePowerLevels,
+  usePowerLevelsState,
+} from '../../hooks/usePowerLevels';
+import {
+  PowerLevelTagsContextProvider,
+  usePowerLevelTags,
+  usePowerLevelTagsState,
+} from '../../hooks/usePowerLevelTags';
+import { RoomMembersAPIProvider, useCreateRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { usePendingMemberLoader, usePendingMembers } from '../../hooks/usePendingMembers';
+import { useObservableValue } from '../../hooks/useObservableValue';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 type SpaceSettingsMenuItem = {
   page: SpaceSettingsPage;
@@ -61,17 +73,33 @@ type SpaceSettingsProps = {
   requestClose: () => void;
 };
 export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps) {
-  const room = useRoom();
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const roomId = useRoom();
   const useAuthentication = useMediaAuthentication();
-  const mDirects = useAtomValue(mDirectAtom);
 
-  const roomAvatar = useRoomAvatar(room, mDirects.has(room.roomId));
-  const roomName = useRoomName(room);
-  const joinRuleContent = useRoomJoinRule(room);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const roomAvatar = getRoomAvatar(roomId);
+  const roomName = getRoomName(roomId);
+
+  const stateObjResult = usePowerLevelsState(roomId);
+  const powerLevels = usePowerLevels(stateObjResult.value);
+  const powerLevelTagsResult = usePowerLevelTagsState(roomId);
+  const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsResult.value);
+
+  const membersAPI = useCreateRoomMembersAPI(roomId);
+  const membersPending = usePendingMembers(roomId);
+  usePendingMemberLoader(roomId, membersPending);
+
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
 
   const avatarUrl = roomAvatar
-    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? mxcToHttp(ct.session.baseUrl, roomAvatar, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
   const screenSize = useScreenSizeContext();
@@ -90,84 +118,93 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
   };
 
   return (
-    <PageRoot
-      nav={
-        screenSize === ScreenSize.Mobile && activePage !== undefined ? undefined : (
-          <PageNav size="300">
-            <PageNavHeader outlined={false}>
-              <Box grow="Yes" gap="200">
-                <Avatar size="200" radii="300">
-                  <RoomAvatar
-                    roomId={room.roomId}
-                    src={avatarUrl}
-                    alt={roomName}
-                    renderFallback={() => (
-                      <RoomIcon
-                        roomType={room.getType()}
-                        size="50"
-                        joinRule={joinRuleContent?.join_rule ?? JoinRule.Invite}
-                        filled
-                      />
-                    )}
-                  />
-                </Avatar>
-                <Text size="H4" truncate>
-                  {roomName}
-                </Text>
-              </Box>
-              <Box shrink="No">
-                {screenSize === ScreenSize.Mobile && (
-                  <IconButton onClick={requestClose} variant="Background">
-                    <Icon src={Icons.Cross} />
-                  </IconButton>
-                )}
-              </Box>
-            </PageNavHeader>
-            <Box grow="Yes" direction="Column">
-              <PageNavContent>
-                <div style={{ flexGrow: 1 }}>
-                  {menuItems.map((item) => (
-                    <MenuItem
-                      key={item.name}
-                      variant="Background"
-                      radii="400"
-                      aria-pressed={activePage === item.page}
-                      before={<Icon src={item.icon} size="100" filled={activePage === item.page} />}
-                      onClick={() => setActivePage(item.page)}
-                    >
-                      <Text
-                        style={{
-                          fontWeight: activePage === item.page ? config.fontWeight.W600 : undefined,
-                        }}
-                        size="T300"
-                        truncate
-                      >
-                        {item.name}
+    <RoomMembersAPIProvider value={membersAPI}>
+      <PowerLevelsContextProvider value={powerLevels}>
+        <PowerLevelTagsContextProvider value={powerLevelTags}>
+          <PageRoot
+            nav={
+              screenSize === ScreenSize.Mobile && activePage !== undefined ? undefined : (
+                <PageNav size="300">
+                  <PageNavHeader outlined={false}>
+                    <Box grow="Yes" gap="200">
+                      <Avatar size="200" radii="300">
+                        <RoomAvatar
+                          roomId={roomId}
+                          src={avatarUrl}
+                          alt={roomName}
+                          renderFallback={() => (
+                            <RoomIcon
+                              roomType={ct.roomToType.read.get(roomId)}
+                              size="50"
+                              joinRule={roomToJoinRule.get(roomId)}
+                              filled
+                            />
+                          )}
+                        />
+                      </Avatar>
+                      <Text size="H4" truncate>
+                        {roomName}
                       </Text>
-                    </MenuItem>
-                  ))}
-                </div>
-              </PageNavContent>
-            </Box>
-          </PageNav>
-        )
-      }
-    >
-      {activePage === SpaceSettingsPage.GeneralPage && (
-        <General requestClose={handlePageRequestClose} />
-      )}
-      {activePage === SpaceSettingsPage.MembersPage && (
-        <Members requestClose={handlePageRequestClose} />
-      )}
-      {activePage === SpaceSettingsPage.PermissionsPage && (
-        <Permissions requestClose={handlePageRequestClose} />
-      )}
-      {activePage === SpaceSettingsPage.EmojisStickersPage && (
-        <EmojisStickers requestClose={handlePageRequestClose} />
-      )}
-      {activePage === SpaceSettingsPage.DeveloperToolsPage && (
-        <DeveloperTools requestClose={handlePageRequestClose} />
-      )}
-    </PageRoot>
+                    </Box>
+                    <Box shrink="No">
+                      {screenSize === ScreenSize.Mobile && (
+                        <IconButton onClick={requestClose} variant="Background">
+                          <Icon src={Icons.Cross} />
+                        </IconButton>
+                      )}
+                    </Box>
+                  </PageNavHeader>
+                  <Box grow="Yes" direction="Column">
+                    <PageNavContent>
+                      <div style={{ flexGrow: 1 }}>
+                        {menuItems.map((item) => (
+                          <MenuItem
+                            key={item.name}
+                            variant="Background"
+                            radii="400"
+                            aria-pressed={activePage === item.page}
+                            before={
+                              <Icon src={item.icon} size="100" filled={activePage === item.page} />
+                            }
+                            onClick={() => setActivePage(item.page)}
+                          >
+                            <Text
+                              style={{
+                                fontWeight:
+                                  activePage === item.page ? config.fontWeight.W600 : undefined,
+                              }}
+                              size="T300"
+                              truncate
+                            >
+                              {item.name}
+                            </Text>
+                          </MenuItem>
+                        ))}
+                      </div>
+                    </PageNavContent>
+                  </Box>
+                </PageNav>
+              )
+            }
+          >
+            {activePage === SpaceSettingsPage.GeneralPage && (
+              <General requestClose={handlePageRequestClose} />
+            )}
+            {activePage === SpaceSettingsPage.MembersPage && (
+              <Members requestClose={handlePageRequestClose} />
+            )}
+            {activePage === SpaceSettingsPage.PermissionsPage && (
+              <Permissions requestClose={handlePageRequestClose} />
+            )}
+            {activePage === SpaceSettingsPage.EmojisStickersPage && (
+              <EmojisStickers requestClose={handlePageRequestClose} />
+            )}
+            {activePage === SpaceSettingsPage.DeveloperToolsPage && (
+              <DeveloperTools requestClose={handlePageRequestClose} />
+            )}
+          </PageRoot>
+        </PowerLevelTagsContextProvider>
+      </PowerLevelsContextProvider>
+    </RoomMembersAPIProvider>
   );
 }
diff --git a/src/app/features/space-settings/SpaceSettingsRenderer.tsx b/src/app/features/space-settings/SpaceSettingsRenderer.tsx
index 79947e0c..4a2e35be 100644
--- a/src/app/features/space-settings/SpaceSettingsRenderer.tsx
+++ b/src/app/features/space-settings/SpaceSettingsRenderer.tsx
@@ -2,10 +2,11 @@ import React from 'react';
 import { SpaceSettings } from './SpaceSettings';
 import { Modal500 } from '../../components/Modal500';
 import { useCloseSpaceSettings, useSpaceSettingsState } from '../../state/hooks/spaceSettings';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
 import { SpaceSettingsState } from '../../state/spaceSettings';
 import { RoomProvider } from '../../hooks/useRoom';
 import { SpaceProvider } from '../../hooks/useSpace';
+import { useClient } from '../../hooks/useClient';
+import { useObservableValue } from '../../hooks/useObservableValue';
 
 type RenderSettingsProps = {
   state: SpaceSettingsState;
@@ -13,17 +14,16 @@ type RenderSettingsProps = {
 function RenderSettings({ state }: RenderSettingsProps) {
   const { roomId, spaceId, page } = state;
   const closeSettings = useCloseSpaceSettings();
-  const allJoinedRooms = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allJoinedRooms);
-  const room = getRoom(roomId);
-  const space = spaceId && spaceId !== roomId ? getRoom(spaceId) : undefined;
 
-  if (!room) return null;
+  const ct = useClient();
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+
+  if (!spaceRooms.has(roomId)) return null;
 
   return (
     <Modal500 requestClose={closeSettings}>
-      <SpaceProvider value={space ?? null}>
-        <RoomProvider value={room}>
+      <SpaceProvider value={spaceId ?? null}>
+        <RoomProvider value={roomId}>
           <SpaceSettings initialPage={page} requestClose={closeSettings} />
         </RoomProvider>
       </SpaceProvider>
diff --git a/src/app/features/space-settings/general/General.tsx b/src/app/features/space-settings/general/General.tsx
index 72040632..96309393 100644
--- a/src/app/features/space-settings/general/General.tsx
+++ b/src/app/features/space-settings/general/General.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { useRoom } from '../../../hooks/useRoom';
 import {
   RoomProfile,
@@ -19,7 +19,7 @@ type GeneralProps = {
 };
 export function General({ requestClose }: GeneralProps) {
   const room = useRoom();
-  const powerLevels = usePowerLevels(room);
+  const powerLevels = usePowerLevelsContext();
   const creators = useRoomCreators(room);
   const permissions = useRoomPermissions(creators, powerLevels);
 
diff --git a/src/app/features/space-settings/permissions/Permissions.tsx b/src/app/features/space-settings/permissions/Permissions.tsx
index 7572a71b..7c297488 100644
--- a/src/app/features/space-settings/permissions/Permissions.tsx
+++ b/src/app/features/space-settings/permissions/Permissions.tsx
@@ -2,27 +2,27 @@ import React, { useState } from 'react';
 import { Box, Icon, IconButton, Icons, Scroll, Text } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { useRoom } from '../../../hooks/useRoom';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { StateEvent } from '../../../../types/matrix/room';
 import { usePermissionGroups } from './usePermissionItems';
 import { PermissionGroups, Powers, PowersEditor } from '../../common-settings/permissions';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import { useClient } from '../../../hooks/useClient';
 
 type PermissionsProps = {
   requestClose: () => void;
 };
 export function Permissions({ requestClose }: PermissionsProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
+  const ct = useClient();
+  const roomId = useRoom();
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(roomId);
 
   const permissions = useRoomPermissions(creators, powerLevels);
 
-  const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, mx.getSafeUserId());
-  const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, mx.getSafeUserId());
+  const canEditPowers = permissions.stateEvent(StateEvent.PowerLevelTags, ct.session.userId);
+  const canEditPermissions = permissions.stateEvent(StateEvent.RoomPowerLevels, ct.session.userId);
   const permissionGroups = usePermissionGroups();
 
   const [powerEditor, setPowerEditor] = useState(false);
@@ -32,7 +32,7 @@ export function Permissions({ requestClose }: PermissionsProps) {
   };
 
   if (canEditPowers && powerEditor) {
-    return <PowersEditor powerLevels={powerLevels} requestClose={() => setPowerEditor(false)} />;
+    return <PowersEditor requestClose={() => setPowerEditor(false)} />;
   }
 
   return (
@@ -56,15 +56,10 @@ export function Permissions({ requestClose }: PermissionsProps) {
           <PageContent>
             <Box direction="Column" gap="700">
               <Powers
-                powerLevels={powerLevels}
                 onEdit={canEditPowers ? handleEditPowers : undefined}
                 permissionGroups={permissionGroups}
               />
-              <PermissionGroups
-                canEdit={canEditPermissions}
-                powerLevels={powerLevels}
-                permissionGroups={permissionGroups}
-              />
+              <PermissionGroups canEdit={canEditPermissions} permissionGroups={permissionGroups} />
             </Box>
           </PageContent>
         </Scroll>
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 3e909c89..4fe83a33 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -140,8 +140,8 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                   <CreateRoomModalRenderer />
                   <CreateSpaceModalRenderer />
                   <RoomSettingsRenderer />
-                  {/*<SpaceSettingsRenderer />
-                  <ReceiveSelfDeviceVerification />
+                  <SpaceSettingsRenderer />
+                  {/*<ReceiveSelfDeviceVerification />
                   <AutoRestoreBackupOnVerification /> */}
                 </ClientRoomsNotificationPreferences>
               </ClientInitStorageAtom>

From 88bb27c0d128d9357afc51b6b58a15661b48a025 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 24 Jul 2026 21:04:29 +0530
Subject: [PATCH 035/158] throw error properly when changing various settings

---
 src/app/components/image-pack-view/RoomImagePack.tsx  |  5 ++++-
 src/app/components/image-pack-view/UserImagePack.tsx  |  5 ++++-
 .../invite-user-prompt/InviteUserPrompt.tsx           |  5 ++++-
 .../common-settings/permissions/PermissionGroups.tsx  |  5 ++++-
 .../common-settings/permissions/PowersEditor.tsx      |  5 ++++-
 .../features/settings/notifications/AllMessages.tsx   |  5 ++++-
 .../settings/notifications/KeywordMessages.tsx        | 11 +++++++++--
 .../settings/notifications/SpecialMessages.tsx        |  6 +++++-
 8 files changed, 38 insertions(+), 9 deletions(-)

diff --git a/src/app/components/image-pack-view/RoomImagePack.tsx b/src/app/components/image-pack-view/RoomImagePack.tsx
index 6b10781c..b52bb103 100644
--- a/src/app/components/image-pack-view/RoomImagePack.tsx
+++ b/src/app/components/image-pack-view/RoomImagePack.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { ImagePackContent } from './ImagePackContent';
 import { ImagePack, PackContent } from '../../plugins/custom-emoji';
@@ -43,7 +44,7 @@ export function RoomImagePack({ roomId, stateKey }: RoomImagePackProps) {
       const { address } = imagePack;
       if (!address) return;
 
-      await ct.requestAuthJSON(
+      const resp = await ct.requestAuthJSON(
         putStateEvent({
           pathParams: {
             roomId: address.roomId,
@@ -53,6 +54,8 @@ export function RoomImagePack({ roomId, stateKey }: RoomImagePackProps) {
           body: packContent,
         })
       );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     },
     [ct, imagePack]
   );
diff --git a/src/app/components/image-pack-view/UserImagePack.tsx b/src/app/components/image-pack-view/UserImagePack.tsx
index fcd93b8d..d7c7db22 100644
--- a/src/app/components/image-pack-view/UserImagePack.tsx
+++ b/src/app/components/image-pack-view/UserImagePack.tsx
@@ -1,5 +1,6 @@
 import React, { useCallback, useMemo } from 'react';
 import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { ImagePackContent } from './ImagePackContent';
 import { ImagePack, PackContent } from '../../plugins/custom-emoji';
 import { AccountDataType } from '../../../types/matrix/accountData';
@@ -15,12 +16,14 @@ export function UserImagePack() {
 
   const handleUpdate = useCallback(
     async (packContent: PackContent) => {
-      await ct.requestAuthJSON(
+      const resp = await ct.requestAuthJSON(
         putAccountData({
           pathParams: { type: AccountDataType.PoniesUserEmotes, userId: ct.session.userId },
           body: packContent,
         })
       );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     },
     [ct]
   );
diff --git a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
index 57f54c0d..b1d38a73 100644
--- a/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
+++ b/src/app/components/invite-user-prompt/InviteUserPrompt.tsx
@@ -31,6 +31,7 @@ import {
 import { isKeyHotkey } from 'is-hotkey';
 import FocusTrap from 'focus-trap-react';
 import { postInvite } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { stopPropagation } from '../../utils/keyboard';
 import { useDirectUsers } from '../../hooks/useDirectUsers';
 import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../utils/matrix';
@@ -73,7 +74,7 @@ export function InviteUserPrompt({ roomId, requestClose }: InviteUserProps) {
   const [inviteState, invite] = useAsyncCallback<void, Error, [string, string | undefined]>(
     useCallback(
       async (userId, reason) => {
-        await ct.requestAuthJSON(
+        const resp = await ct.requestAuthJSON(
           postInvite({
             pathParams: { roomId },
             body: {
@@ -82,6 +83,8 @@ export function InviteUserPrompt({ roomId, requestClose }: InviteUserProps) {
             },
           })
         );
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
       },
       [ct, roomId]
     )
diff --git a/src/app/features/common-settings/permissions/PermissionGroups.tsx b/src/app/features/common-settings/permissions/PermissionGroups.tsx
index 945395db..50f51619 100644
--- a/src/app/features/common-settings/permissions/PermissionGroups.tsx
+++ b/src/app/features/common-settings/permissions/PermissionGroups.tsx
@@ -3,6 +3,7 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { Badge, Box, Button, Chip, config, Icon, Icons, Menu, Spinner, Text } from 'folds';
 import produce from 'immer';
 import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
@@ -86,12 +87,14 @@ export function PermissionGroups({ permissionGroups, canEdit }: PermissionGroups
 
         return draftPowerLevels;
       });
-      await ct.requestAuthJSON(
+      const resp = await ct.requestAuthJSON(
         putStateEvent({
           pathParams: { roomId, eventType: StateEventType.RoomPowerLevels, stateKey: '' },
           body: editedPowerLevels,
         })
       );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     }, [ct, roomId, powerLevels, permissionUpdate, permissionGroups])
   );
 
diff --git a/src/app/features/common-settings/permissions/PowersEditor.tsx b/src/app/features/common-settings/permissions/PowersEditor.tsx
index 19a1ff75..73097d89 100644
--- a/src/app/features/common-settings/permissions/PowersEditor.tsx
+++ b/src/app/features/common-settings/permissions/PowersEditor.tsx
@@ -20,6 +20,7 @@ import {
 } from 'folds';
 import { HexColorPicker } from 'react-colorful';
 import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -333,12 +334,14 @@ export function PowersEditor({ requestClose }: PowersEditorProps) {
       deleted.forEach((power) => {
         delete content[power];
       });
-      await ct.requestAuthJSON(
+      const resp = await ct.requestAuthJSON(
         putStateEvent({
           pathParams: { roomId, eventType: StateEventType.PowerLevelTags, stateKey: '' },
           body: content,
         })
       );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     }, [ct, roomId, powerLevelTags, editedPowerTags, deleted])
   );
 
diff --git a/src/app/features/settings/notifications/AllMessages.tsx b/src/app/features/settings/notifications/AllMessages.tsx
index bcf3589e..99739e68 100644
--- a/src/app/features/settings/notifications/AllMessages.tsx
+++ b/src/app/features/settings/notifications/AllMessages.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { Badge, Box, Text } from 'folds';
 import { PushRuleCondition, PushRules } from 'neurone/lib/api/types';
 import { putPushRuleActions } from 'neurone/lib/api/matrix/client/v3/pushrules';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { AccountDataType, ConditionKind, PushRuleId } from '../../../../types/matrix/accountData';
 import { NotificationModeSwitcher } from './NotificationModeSwitcher';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -65,12 +66,14 @@ function AllMessagesModeSwitcher({
   const handleChange = useCallback(
     async (mode: NotificationMode) => {
       const actions = getModeActions(mode);
-      await ct.requestAuthJSON(
+      const resp = await ct.requestAuthJSON(
         putPushRuleActions({
           pathParams: { scope: 'global', kind, ruleId },
           body: { actions },
         })
       );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     },
     [ct, getModeActions, kind, ruleId]
   );
diff --git a/src/app/features/settings/notifications/KeywordMessages.tsx b/src/app/features/settings/notifications/KeywordMessages.tsx
index 259736c8..ad15dfc1 100644
--- a/src/app/features/settings/notifications/KeywordMessages.tsx
+++ b/src/app/features/settings/notifications/KeywordMessages.tsx
@@ -5,6 +5,7 @@ import {
   putPushRule,
   putPushRuleActions,
 } from 'neurone/lib/api/matrix/client/v3/pushrules';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { PushRule, PushRules } from 'neurone/lib/api/types';
 import { useAccountData } from '../../../hooks/storage/useAccountData';
 import { AccountDataType } from '../../../../types/matrix/accountData';
@@ -32,7 +33,7 @@ function KeywordInput() {
   const [keywordState, addKeyword] = useAsyncCallback(
     useCallback(
       async (k: string) => {
-        await ct.requestAuthJSON(
+        const resp = await ct.requestAuthJSON(
           putPushRule({
             pathParams: { scope: 'global', kind: 'content', ruleId: k },
             body: {
@@ -41,6 +42,9 @@ function KeywordInput() {
             },
           })
         );
+
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
         setKeyword('');
       },
       [ct]
@@ -147,7 +151,7 @@ function KeywordModeSwitcher({ pushRule }: PushRulesProps) {
   const handleChange = useCallback(
     async (mode: NotificationMode) => {
       const actions = getModeActions(mode);
-      await ct.requestAuthJSON(
+      const resp = await ct.requestAuthJSON(
         putPushRuleActions({
           pathParams: { scope: 'global', kind: 'content', ruleId: pushRule.rule_id },
           body: {
@@ -155,6 +159,9 @@ function KeywordModeSwitcher({ pushRule }: PushRulesProps) {
           },
         })
       );
+
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     },
     [ct, getModeActions, pushRule]
   );
diff --git a/src/app/features/settings/notifications/SpecialMessages.tsx b/src/app/features/settings/notifications/SpecialMessages.tsx
index edea496b..52387909 100644
--- a/src/app/features/settings/notifications/SpecialMessages.tsx
+++ b/src/app/features/settings/notifications/SpecialMessages.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useMemo } from 'react';
 import { Box, Text, Badge } from 'folds';
 import { PushRules } from 'neurone/lib/api/types';
 import { putPushRuleActions } from 'neurone/lib/api/matrix/client/v3/pushrules';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { useAccountData } from '../../../hooks/storage/useAccountData';
 import { AccountDataType, ConditionKind, PushRuleId } from '../../../../types/matrix/accountData';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -104,12 +105,15 @@ function MentionModeSwitcher({ ruleId, pushRules, defaultPushRuleData }: PushRul
   const handleChange = useCallback(
     async (mode: NotificationMode) => {
       const actions = getModeActions(mode);
-      await ct.requestAuthJSON(
+      const resp = await ct.requestAuthJSON(
         putPushRuleActions({
           pathParams: { scope: 'global', kind, ruleId },
           body: { actions },
         })
       );
+
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     },
     [ct, getModeActions, kind, ruleId]
   );

From bd5d4f8958d9f0f2c003bcf0641268b96f9d7789 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 24 Jul 2026 21:28:54 +0530
Subject: [PATCH 036/158] move global emoji and stickers settings to new sdk

---
 .../image-pack-view/RoomImagePack.tsx         |  5 +-
 .../settings/emojis-stickers/GlobalPacks.tsx  | 85 ++++++++++++-------
 .../settings/emojis-stickers/UserPack.tsx     | 15 ++--
 3 files changed, 64 insertions(+), 41 deletions(-)

diff --git a/src/app/components/image-pack-view/RoomImagePack.tsx b/src/app/components/image-pack-view/RoomImagePack.tsx
index b52bb103..b8425f40 100644
--- a/src/app/components/image-pack-view/RoomImagePack.tsx
+++ b/src/app/components/image-pack-view/RoomImagePack.tsx
@@ -1,7 +1,7 @@
 import React, { useCallback, useMemo } from 'react';
 import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { parseMatrixResp } from 'neurone/lib/matrix-request';
-import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
+import { usePowerLevels, usePowerLevelsState } from '../../hooks/usePowerLevels';
 import { ImagePackContent } from './ImagePackContent';
 import { ImagePack, PackContent } from '../../plugins/custom-emoji';
 import { StateEventType } from '../../../types/matrix/room';
@@ -19,7 +19,8 @@ type RoomImagePackProps = {
 export function RoomImagePack({ roomId, stateKey }: RoomImagePackProps) {
   const ct = useClient();
   const { userId } = ct.session;
-  const powerLevels = usePowerLevelsContext();
+  const powerLevelsStateResult = usePowerLevelsState(roomId);
+  const powerLevels = usePowerLevels(powerLevelsStateResult.value);
   const creators = useRoomCreators(roomId);
 
   const permissions = useRoomPermissions(creators, powerLevels);
diff --git a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
index a9288728..8d84c89f 100644
--- a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
+++ b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
@@ -23,14 +23,13 @@ import {
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import { useAtomValue } from 'jotai';
-import { Room } from 'matrix-js-sdk';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { useGlobalImagePacks, useRoomsImagePacks } from '../../../hooks/useImagePacks';
 import { SequenceCardStyle } from '../styles.css';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SettingTile } from '../../../components/setting-tile';
-import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import {
   EmoteRoomsContent,
   ImagePack,
@@ -40,9 +39,13 @@ import {
 } from '../../../plugins/custom-emoji';
 import { LineClamp2 } from '../../../styles/Text.css';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
-import { AccountDataEvent } from '../../../../types/matrix/accountData';
+import { AccountDataType } from '../../../../types/matrix/accountData';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../../utils/keyboard';
+import { useClient } from '../../../hooks/useClient';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
+import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
 
 function GlobalPackSelector({
   packs,
@@ -53,7 +56,18 @@ function GlobalPackSelector({
   useAuthentication: boolean;
   onSelect: (addresses: PackAddress[]) => void;
 }) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+
+  const imagePackRooms = useMemo(
+    () =>
+      packs
+        .map((pack) => pack.address?.roomId)
+        .filter((rId): rId is string => typeof rId === 'string'),
+    [packs]
+  );
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(imagePackRooms);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+
   const roomToPacks = useMemo(() => {
     const rToP = new Map<string, ImagePack[]>();
     packs
@@ -135,11 +149,12 @@ function GlobalPackSelector({
             }}
           >
             {Array.from(roomToPacks.entries()).map(([roomId, roomPacks]) => {
-              const room = mx.getRoom(roomId);
-              if (!room) return null;
+              if (!ct.rooms.join.read.includes(roomId)) return null;
+
               const roomPackAddresses = roomPacks
                 .map((pack) => pack.address)
-                .filter((addr) => addr !== undefined);
+                .filter((addr): addr is PackAddress => addr !== undefined);
+
               const allSelected = roomPackAddresses.every((addr) =>
                 selected.find((address) => packAddressEqual(addr, address))
               );
@@ -148,7 +163,7 @@ function GlobalPackSelector({
                 <Box key={roomId} direction="Column" gap="100">
                   <Box alignItems="Center">
                     <Box grow="Yes">
-                      <Text size="L400">{room.name}</Text>
+                      <Text size="L400">{getRoomName(roomId) ?? 'Unknown'}</Text>
                     </Box>
                     <Box shrink="No">
                       <Chip
@@ -169,7 +184,7 @@ function GlobalPackSelector({
                   {roomPacks.map((pack) => {
                     const avatarMxc = pack.getAvatarUrl(ImageUsage.Emoticon);
                     const avatarUrl = avatarMxc
-                      ? mxcUrlToHttp(mx, avatarMxc, useAuthentication)
+                      ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).url()
                       : undefined;
                     const { address } = pack;
                     if (!address) return null;
@@ -251,26 +266,21 @@ type GlobalPacksProps = {
   onViewPack: (imagePack: ImagePack) => void;
 };
 export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const globalPacks = useGlobalImagePacks();
+  const globalPacksResult = useGlobalImagePacks();
+  const globalPacks = globalPacksResult.value;
   const [menuCords, setMenuCords] = useState<RectCords>();
 
-  const roomIds = useAtomValue(allRoomsAtom);
-  const rooms = useMemo(() => {
-    const rs: Room[] = [];
-    roomIds.forEach((rId) => {
-      const r = mx.getRoom(rId);
-      if (r) rs.push(r);
-    });
-    return rs;
-  }, [mx, roomIds]);
-  const roomsImagePack = useRoomsImagePacks(rooms);
+  const allRooms = useAtomValue(allRoomsAtom);
+  const roomsImagePackResult = useRoomsImagePacks(allRooms);
+  const roomsImagePack = roomsImagePackResult.value;
+
   const nonGlobalPacks = useMemo(
     () =>
-      roomsImagePack.filter(
-        (pack) => !globalPacks.find((p) => packAddressEqual(pack.address, p.address))
-      ),
+      roomsImagePack?.filter(
+        (pack) => !globalPacks?.find((p) => packAddressEqual(pack.address, p.address))
+      ) ?? [],
     [roomsImagePack, globalPacks]
   );
 
@@ -281,7 +291,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
     () =>
       nonGlobalPacks.filter(
         (pack) => !selectedPacks.find((addr) => packAddressEqual(pack.address, addr))
-      ),
+      ) ?? [],
     [selectedPacks, nonGlobalPacks]
   );
 
@@ -302,9 +312,8 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
 
   const [applyState, applyChanges] = useAsyncCallback(
     useCallback(async () => {
-      const content =
-        mx.getAccountData(AccountDataEvent.PoniesEmoteRooms)?.getContent<EmoteRoomsContent>() ?? {};
-      const updatedContent: EmoteRoomsContent = JSON.parse(JSON.stringify(content));
+      const emoteRoomsObj = await ct.storage.accountData.read.get(AccountDataType.PoniesEmoteRooms);
+      const updatedContent: EmoteRoomsContent = emoteRoomsObj?.event.content ?? {};
 
       selectedPacks.forEach((addr) => {
         const roomsToState = updatedContent.rooms ?? {};
@@ -320,8 +329,16 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
         }
       });
 
-      await mx.setAccountData(AccountDataEvent.PoniesEmoteRooms, updatedContent);
-    }, [mx, selectedPacks, removedPacks])
+      const resp = await ct.requestAuthJSON(
+        putAccountData({
+          pathParams: { type: AccountDataType.PoniesEmoteRooms, userId: ct.session.userId },
+          body: updatedContent,
+        })
+      );
+
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
+    }, [ct, selectedPacks, removedPacks])
   );
 
   const resetChanges = useCallback(() => {
@@ -344,7 +361,9 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
 
   const renderPack = (pack: ImagePack) => {
     const avatarMxc = pack.getAvatarUrl(ImageUsage.Emoticon);
-    const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
+    const avatarUrl = avatarMxc
+      ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).url()
+      : undefined;
     const { address } = pack;
     if (!address) return null;
     const removed = !!removedPacks.find((addr) => packAddressEqual(addr, address));
@@ -480,7 +499,7 @@ export function GlobalPacks({ onViewPack }: GlobalPacksProps) {
             }
           />
         </SequenceCard>
-        {globalPacks.map(renderPack)}
+        {globalPacks?.map(renderPack)}
         {nonGlobalPacks
           .filter((pack) => !!selectedPacks.find((addr) => packAddressEqual(pack.address, addr)))
           .map(renderPack)}
diff --git a/src/app/features/settings/emojis-stickers/UserPack.tsx b/src/app/features/settings/emojis-stickers/UserPack.tsx
index c41c8e18..e9c6e5a8 100644
--- a/src/app/features/settings/emojis-stickers/UserPack.tsx
+++ b/src/app/features/settings/emojis-stickers/UserPack.tsx
@@ -5,26 +5,29 @@ import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { ImagePack, ImageUsage } from '../../../plugins/custom-emoji';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { mxcUrlToHttp } from '../../../utils/matrix';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useClient } from '../../../hooks/useClient';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
 
 type UserPackProps = {
   onViewPack: (imagePack: ImagePack) => void;
 };
 export function UserPack({ onViewPack }: UserPackProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
-  const userPack = useUserImagePack();
+  const userPackResult = useUserImagePack();
+  const userPack = userPackResult.value;
   const avatarMxc = userPack?.getAvatarUrl(ImageUsage.Emoticon);
-  const avatarUrl = avatarMxc ? mxcUrlToHttp(mx, avatarMxc, useAuthentication) : undefined;
+  const avatarUrl = avatarMxc
+    ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).url()
+    : undefined;
 
   const handleView = () => {
     if (userPack) {
       onViewPack(userPack);
     } else {
-      const defaultPack = new ImagePack(mx.getUserId() ?? '', {}, undefined);
+      const defaultPack = new ImagePack(ct.session.userId, {}, undefined);
       onViewPack(defaultPack);
     }
   };

From c4f58415db2bda790ad898fe28bb29913aaf3785 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 24 Jul 2026 21:48:35 +0530
Subject: [PATCH 037/158] move settings developer tool to new sdk

---
 src/app/components/AccountDataEditor.tsx      | 36 +++++------
 .../settings/developer-tools/AccountData.tsx  | 59 ++++++++-----------
 .../settings/developer-tools/DevelopTools.tsx | 34 +++++++----
 src/app/hooks/storage/useAccountData.ts       | 12 ++++
 4 files changed, 73 insertions(+), 68 deletions(-)

diff --git a/src/app/components/AccountDataEditor.tsx b/src/app/components/AccountDataEditor.tsx
index 07334543..d328a849 100644
--- a/src/app/components/AccountDataEditor.tsx
+++ b/src/app/components/AccountDataEditor.tsx
@@ -14,6 +14,7 @@ import {
   Scroll,
   config,
 } from 'folds';
+import { AccountDataEvent } from 'neurone/lib/api/types';
 import { Cursor } from '../plugins/text-area';
 import { syntaxErrorPosition } from '../utils/dom';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
@@ -27,17 +28,12 @@ const EDITOR_INTENT_SPACE_COUNT = 2;
 
 export type AccountDataSubmitCallback = (type: string, content: object) => Promise<void>;
 
-type AccountDataInfo = {
-  type: string;
-  content: object;
-};
-
 type AccountDataEditProps = {
   type: string;
   defaultContent: string;
   submitChange: AccountDataSubmitCallback;
   onCancel: () => void;
-  onSave: (info: AccountDataInfo) => void;
+  onSave: (info: AccountDataEvent) => void;
 };
 function AccountDataEdit({
   type,
@@ -243,34 +239,30 @@ function AccountDataView({ type, defaultContent, onEdit }: AccountDataViewProps)
 }
 
 export type AccountDataEditorProps = {
-  type?: string;
-  content?: object;
+  event?: AccountDataEvent;
   submitChange: AccountDataSubmitCallback;
   requestClose: () => void;
 };
 
-export function AccountDataEditor({
-  type,
-  content,
-  submitChange,
-  requestClose,
-}: AccountDataEditorProps) {
-  const [data, setData] = useState<AccountDataInfo>({
-    type: type ?? '',
-    content: content ?? {},
-  });
+export function AccountDataEditor({ event, submitChange, requestClose }: AccountDataEditorProps) {
+  const [data, setData] = useState<AccountDataEvent>(
+    event ?? {
+      type: '',
+      content: {},
+    }
+  );
 
-  const [edit, setEdit] = useState(!type);
+  const [edit, setEdit] = useState(!data.type);
 
   const closeEdit = useCallback(() => {
-    if (!type) {
+    if (!event) {
       requestClose();
       return;
     }
     setEdit(false);
-  }, [type, requestClose]);
+  }, [event, requestClose]);
 
-  const handleSave = useCallback((info: AccountDataInfo) => {
+  const handleSave = useCallback((info: AccountDataEvent) => {
     setData(info);
     setEdit(false);
   }, []);
diff --git a/src/app/features/settings/developer-tools/AccountData.tsx b/src/app/features/settings/developer-tools/AccountData.tsx
index 8bccb62e..5b5a736f 100644
--- a/src/app/features/settings/developer-tools/AccountData.tsx
+++ b/src/app/features/settings/developer-tools/AccountData.tsx
@@ -1,29 +1,20 @@
-import React, { useCallback, useState } from 'react';
+import React from 'react';
 import { Box, Text, Icon, Icons, Button, MenuItem } from 'folds';
+import { AccountDataEvent } from 'neurone/lib/api/types';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { useAccountDataCallback } from '../../../hooks/useAccountDataCallback';
 import { CutoutCard } from '../../../components/cutout-card';
+import { useAccountDataEvents } from '../../../hooks/storage/useAccountData';
 
 type AccountDataProps = {
   expand: boolean;
   onExpandToggle: (expand: boolean) => void;
-  onSelect: (type: string | null) => void;
+  onSelect: (type: AccountDataEvent | null) => void;
 };
 export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataProps) {
-  const mx = useMatrixClient();
-  const [accountDataTypes, setAccountDataKeys] = useState(() =>
-    Array.from(mx.store.accountData.keys())
-  );
-
-  useAccountDataCallback(
-    mx,
-    useCallback(() => {
-      setAccountDataKeys(Array.from(mx.store.accountData.keys()));
-    }, [mx])
-  );
+  const accountDataEventsResult = useAccountDataEvents();
+  const accountDataEvents = accountDataEventsResult.value;
 
   return (
     <Box direction="Column" gap="100">
@@ -57,7 +48,7 @@ export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataPro
           <Box direction="Column" gap="100">
             <Box justifyContent="SpaceBetween">
               <Text size="L400">Events</Text>
-              <Text size="L400">Total: {accountDataTypes.length}</Text>
+              {accountDataEvents && <Text size="L400">Total: {accountDataEvents.length}</Text>}
             </Box>
             <CutoutCard>
               <MenuItem
@@ -74,23 +65,25 @@ export function AccountData({ expand, onExpandToggle, onSelect }: AccountDataPro
                   </Text>
                 </Box>
               </MenuItem>
-              {accountDataTypes.sort().map((type) => (
-                <MenuItem
-                  key={type}
-                  variant="Surface"
-                  fill="None"
-                  size="300"
-                  radii="0"
-                  after={<Icon size="50" src={Icons.ChevronRight} />}
-                  onClick={() => onSelect(type)}
-                >
-                  <Box grow="Yes">
-                    <Text size="T200" truncate>
-                      {type}
-                    </Text>
-                  </Box>
-                </MenuItem>
-              ))}
+              {accountDataEvents
+                ?.sort((e1, e2) => (e1 < e2 ? -1 : 1))
+                .map((event) => (
+                  <MenuItem
+                    key={event.type}
+                    variant="Surface"
+                    fill="None"
+                    size="300"
+                    radii="0"
+                    after={<Icon size="50" src={Icons.ChevronRight} />}
+                    onClick={() => onSelect(event)}
+                  >
+                    <Box grow="Yes">
+                      <Text size="T200" truncate>
+                        {event.type}
+                      </Text>
+                    </Box>
+                  </MenuItem>
+                ))}
             </CutoutCard>
           </Box>
         )}
diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx
index a3f04567..8b7463df 100644
--- a/src/app/features/settings/developer-tools/DevelopTools.tsx
+++ b/src/app/features/settings/developer-tools/DevelopTools.tsx
@@ -1,42 +1,52 @@
 import React, { useCallback, useState } from 'react';
 import { Box, Text, IconButton, Icon, Icons, Scroll, Switch, Button } from 'folds';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { AccountDataEvent } from 'neurone/lib/api/types';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import {
   AccountDataEditor,
   AccountDataSubmitCallback,
 } from '../../../components/AccountDataEditor';
 import { copyToClipboard } from '../../../utils/dom';
+import { useClient } from '../../../hooks/useClient';
 import { AccountData } from './AccountData';
 
 type DeveloperToolsProps = {
   requestClose: () => void;
 };
 export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+
   const [expand, setExpend] = useState(false);
-  const [accountDataType, setAccountDataType] = useState<string | null>();
+  const [editAccountData, setEditAccountData] = useState<AccountDataEvent | null>();
 
   const submitAccountData: AccountDataSubmitCallback = useCallback(
     async (type, content) => {
-      await mx.setAccountData(type, content);
+      const resp = await ct.requestAuthJSON(
+        putAccountData({
+          pathParams: { type, userId: ct.session.userId },
+          body: content,
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     },
-    [mx]
+    [ct]
   );
 
-  if (accountDataType !== undefined) {
+  if (editAccountData !== undefined) {
     return (
       <AccountDataEditor
-        type={accountDataType ?? undefined}
-        content={accountDataType ? mx.getAccountData(accountDataType)?.getContent() : undefined}
+        event={editAccountData ?? undefined}
         submitChange={submitAccountData}
-        requestClose={() => setAccountDataType(undefined)}
+        requestClose={() => setEditAccountData(undefined)}
       />
     );
   }
@@ -92,9 +102,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
                       description="Copy access token to clipboard."
                       after={
                         <Button
-                          onClick={() =>
-                            copyToClipboard(mx.getAccessToken() ?? '<NO_ACCESS_TOKEN_FOUND>')
-                          }
+                          onClick={() => copyToClipboard(ct.session.accessToken)}
                           variant="Secondary"
                           fill="Soft"
                           size="300"
@@ -112,7 +120,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
                 <AccountData
                   expand={expand}
                   onExpandToggle={setExpend}
-                  onSelect={setAccountDataType}
+                  onSelect={setEditAccountData}
                 />
               )}
             </Box>
diff --git a/src/app/hooks/storage/useAccountData.ts b/src/app/hooks/storage/useAccountData.ts
index 83b5c4d7..485a45eb 100644
--- a/src/app/hooks/storage/useAccountData.ts
+++ b/src/app/hooks/storage/useAccountData.ts
@@ -23,3 +23,15 @@ export function useAccountData<T extends AccountDataEvent>(
     useCallback((v) => v?.event as T | undefined, [])
   );
 }
+
+export function useAccountDataEvents(): PendingObservableResult<AccountDataEvent[]> {
+  const ct = useClient();
+  const observablePromise = useMemo(() => ct.storage.accountData.observableRead.getAll(), [ct]);
+
+  const result = useObservableValuePromise(observablePromise);
+
+  return useComputedPendingObservableResult(
+    result,
+    useCallback((objs) => objs.map((o) => o.event), [])
+  );
+}

From 5d6dab9cb96cf78ec739a19b738b3093835f580b Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 26 Jul 2026 12:23:36 +0530
Subject: [PATCH 038/158] move about settings to new sdk

---
 src/app/features/settings/about/About.tsx | 13 +++++++++----
 src/app/state/navToActivePath.ts          |  4 ++--
 src/client/context.ts                     |  1 +
 src/client/initialize.ts                  |  7 +++++++
 src/client/storage/index.ts               |  9 ++++++++-
 5 files changed, 27 insertions(+), 7 deletions(-)

diff --git a/src/app/features/settings/about/About.tsx b/src/app/features/settings/about/About.tsx
index 8e55aa8f..be10f3fa 100644
--- a/src/app/features/settings/about/About.tsx
+++ b/src/app/features/settings/about/About.tsx
@@ -5,14 +5,19 @@ import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import CinnySVG from '../../../../../public/res/svg/cinny.svg';
-import { clearCacheAndReload } from '../../../../client/initMatrix';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { clearNavToActivePathStore } from '../../../state/navToActivePath';
+import { useClient } from '../../../hooks/useClient';
 
 type AboutProps = {
   requestClose: () => void;
 };
 export function About({ requestClose }: AboutProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+
+  const handleClearCache = () => {
+    clearNavToActivePathStore(ct.session.userId);
+    ct.clearCacheAndReload();
+  };
 
   return (
     <Page>
@@ -94,7 +99,7 @@ export function About({ requestClose }: AboutProps) {
                     description="Clear all your locally stored data and reload from server."
                     after={
                       <Button
-                        onClick={() => clearCacheAndReload(mx)}
+                        onClick={handleClearCache}
                         variant="Secondary"
                         fill="Soft"
                         size="300"
diff --git a/src/app/state/navToActivePath.ts b/src/app/state/navToActivePath.ts
index af90c914..a7405898 100644
--- a/src/app/state/navToActivePath.ts
+++ b/src/app/state/navToActivePath.ts
@@ -24,7 +24,7 @@ type NavToActivePathAction =
       navId: string;
     };
 
-export type NavToActivePathAtom = WritableAtom<NavToActivePath, [NavToActivePathAction], undefined>;
+export type NavToActivePathAtom = WritableAtom<NavToActivePath, [NavToActivePathAction], void>;
 
 export const makeNavToActivePathAtom = (userId: string): NavToActivePathAtom => {
   const storeKey = getStoreKey(userId);
@@ -41,7 +41,7 @@ export const makeNavToActivePathAtom = (userId: string): NavToActivePathAtom =>
     }
   );
 
-  const navToActivePathAtom = atom<NavToActivePath, [NavToActivePathAction], undefined>(
+  const navToActivePathAtom = atom<NavToActivePath, [NavToActivePathAction], void>(
     (get) => get(baseNavToActivePathAtom),
     (get, set, action) => {
       if (action.type === 'DELETE') {
diff --git a/src/client/context.ts b/src/client/context.ts
index 021d79cf..d536c283 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -106,6 +106,7 @@ export type ClientContext = {
   requestAuthJSON: MatrixRequest;
   getTxnId: GetTxnId;
   logout: () => Promise<void>;
+  clearCacheAndReload: () => Promise<void>;
 };
 
 type RoomStateObject =
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index 81d27aaa..b91913c0 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -121,6 +121,12 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     await deleteStorage();
   });
 
+  const clearCacheAndReload = async () => {
+    disposer.run();
+    await deleteStorage();
+    window.location.reload();
+  };
+
   const ct: ClientContext = {
     session,
     storage,
@@ -157,6 +163,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     requestAuthJSON,
     getTxnId,
     logout: () => logoutManager.logout(),
+    clearCacheAndReload,
   };
 
   const machineManager = new MachineManager(ct);
diff --git a/src/client/storage/index.ts b/src/client/storage/index.ts
index 46653c5a..31a9efea 100644
--- a/src/client/storage/index.ts
+++ b/src/client/storage/index.ts
@@ -78,6 +78,8 @@ export interface Storage {
   presence: PresenceCollection;
 }
 
+const createDBName = (storageName: string, userId: string): string => `${storageName}${userId}`;
+
 export const createStorage = async (
   storageName: string,
   userId: string
@@ -85,7 +87,7 @@ export const createStorage = async (
   storage: Storage;
   deleteStorage: () => Promise<void>;
 }> => {
-  const dbName = `${storageName}${userId}`;
+  const dbName = createDBName(storageName, userId);
 
   // TODO: handle all openDB callbacks.
   const idb = await openDB(dbName, DATABASE_VERSION, {
@@ -151,3 +153,8 @@ export const createStorage = async (
 
   return { storage, deleteStorage };
 };
+
+export const deleteClientStorage = async (storageName: string, userId: string) => {
+  const dbName = createDBName(storageName, userId);
+  await deleteDB(dbName);
+};

From 5d9c9d588dc2a6732003076b1c5bf3474ee3e74b Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 26 Jul 2026 13:18:32 +0530
Subject: [PATCH 039/158] add client boot screen options for clear cache and
 logout

---
 src/app/pages/client/ClientRoot.tsx           |   4 +-
 src/app/pages/client/ClientRootOptions.tsx    | 106 ++++++++++++++++++
 .../pages/client/InitialSyncSplashScreen.tsx  |  20 ++--
 src/client/crypto.ts                          |  55 +++++++++
 src/client/initialize.ts                      |  38 +------
 src/client/storage/index.ts                   |  26 +++--
 6 files changed, 196 insertions(+), 53 deletions(-)
 create mode 100644 src/app/pages/client/ClientRootOptions.tsx
 create mode 100644 src/client/crypto.ts

diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index 19409004..4f528eb3 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -14,6 +14,7 @@ import { ClientContext } from '../../../client/context';
 import { ClientContextProvider } from '../../hooks/useClient';
 import { InitialSyncSplashScreen } from './InitialSyncSplashScreen';
 import { AutoDiscovery } from './AutoDiscovery';
+import { ClientRootOptions } from './ClientRootOptions';
 
 type ClientRootProps = {
   children: ReactNode;
@@ -46,6 +47,7 @@ export function ClientRoot({ children }: ClientRootProps) {
 
   return (
     <AutoDiscovery userId={userId!} baseUrl={baseUrl!}>
+      {initState.status !== AsyncStatus.Success && <ClientRootOptions userId={userId!} />}
       <SpecVersions baseUrl={baseUrl!}>
         {initState.status === AsyncStatus.Error && (
           <SplashScreen>
@@ -96,7 +98,7 @@ export function ClientRoot({ children }: ClientRootProps) {
         )}
         {initState.status === AsyncStatus.Success && (
           <ClientContextProvider value={initState.data}>
-            <InitialSyncSplashScreen sync={initState.data.sync}>
+            <InitialSyncSplashScreen>
               <SyncStatus />
               <ServerConfigsLoader>
                 {(serverConfigs) => (
diff --git a/src/app/pages/client/ClientRootOptions.tsx b/src/app/pages/client/ClientRootOptions.tsx
new file mode 100644
index 00000000..eecf7d34
--- /dev/null
+++ b/src/app/pages/client/ClientRootOptions.tsx
@@ -0,0 +1,106 @@
+import {
+  Box,
+  config,
+  Icon,
+  IconButton,
+  Icons,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Text,
+} from 'folds';
+import React, { MouseEventHandler, useState } from 'react';
+import FocusTrap from 'focus-trap-react';
+import { ClientContext } from '../../../client/context';
+import { stopPropagation } from '../../utils/keyboard';
+import { deleteClientStorage } from '../../../client/storage';
+import { clearNavToActivePathStore } from '../../state/navToActivePath';
+import { deleteClientCryptoStorage } from '../../../client/crypto';
+
+export function ClientRootOptions({ userId, ct }: { userId: string; ct?: ClientContext }) {
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+
+  const handleToggle: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const cords = evt.currentTarget.getBoundingClientRect();
+    setMenuAnchor((currentState) => {
+      if (currentState) return undefined;
+      return cords;
+    });
+  };
+
+  const handleClearCache = () => {
+    clearNavToActivePathStore(userId);
+    if (ct) {
+      ct.clearCacheAndReload();
+      return;
+    }
+    deleteClientStorage(userId);
+  };
+
+  const handleLogout = async () => {
+    if (ct) {
+      ct.logout();
+      return;
+    }
+
+    localStorage.clear();
+    await deleteClientCryptoStorage(userId);
+    await deleteClientStorage(userId);
+  };
+
+  return (
+    <IconButton
+      style={{
+        position: 'absolute',
+        top: config.space.S100,
+        right: config.space.S100,
+      }}
+      variant="Background"
+      fill="None"
+      onClick={handleToggle}
+    >
+      <Icon size="200" src={Icons.VerticalDots} />
+      <PopOut
+        anchor={menuAnchor}
+        position="Bottom"
+        align="End"
+        offset={6}
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              returnFocusOnDeactivate: false,
+              onDeactivate: () => setMenuAnchor(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
+                <MenuItem onClick={handleClearCache} size="300" radii="300">
+                  <Text as="span" size="T300" truncate>
+                    Clear Cache and Reload
+                  </Text>
+                </MenuItem>
+                <MenuItem
+                  onClick={handleLogout}
+                  size="300"
+                  radii="300"
+                  variant="Critical"
+                  fill="None"
+                >
+                  <Text as="span" size="T300" truncate>
+                    Logout
+                  </Text>
+                </MenuItem>
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
+    </IconButton>
+  );
+}
diff --git a/src/app/pages/client/InitialSyncSplashScreen.tsx b/src/app/pages/client/InitialSyncSplashScreen.tsx
index cfcb4f7a..6bfc8c81 100644
--- a/src/app/pages/client/InitialSyncSplashScreen.tsx
+++ b/src/app/pages/client/InitialSyncSplashScreen.tsx
@@ -7,6 +7,8 @@ import { useObservableValue } from '../../hooks/useObservableValue';
 import { createFakeProgress } from '../../../client/responseProgress';
 import { bytesToSize } from '../../utils/common';
 import { SyncContext, SyncProgress } from '../../../client/sync';
+import { ClientRootOptions } from './ClientRootOptions';
+import { useClient } from '../../hooks/useClient';
 
 function InitialSyncProgressScreen({
   sync,
@@ -112,17 +114,17 @@ function InitialSyncProgressScreen({
   );
 }
 
-export function InitialSyncSplashScreen({
-  sync,
-  children,
-}: {
-  sync: SyncContext;
-  children: ReactNode;
-}) {
-  const initialSync = useObservableValue(sync.controller.initialSync);
+export function InitialSyncSplashScreen({ children }: { children: ReactNode }) {
+  const ct = useClient();
+  const initialSync = useObservableValue(ct.sync.controller.initialSync);
 
   if (initialSync) {
-    return <InitialSyncProgressScreen sync={sync} progressObservable={initialSync.progress} />;
+    return (
+      <>
+        <ClientRootOptions userId={ct.session.userId} />
+        <InitialSyncProgressScreen sync={ct.sync} progressObservable={initialSync.progress} />;
+      </>
+    );
   }
 
   return children;
diff --git a/src/client/crypto.ts b/src/client/crypto.ts
new file mode 100644
index 00000000..fd92ab26
--- /dev/null
+++ b/src/client/crypto.ts
@@ -0,0 +1,55 @@
+import { deleteDB } from 'idb';
+import { Machine, OutgoingRequestSender } from 'neurone/lib/crypto/machine';
+import { MatrixRequest } from 'neurone/lib/matrix-request';
+import { MatrixRequestRetrier, sleep } from 'neurone/lib/utils';
+import { Session } from '../app/state/sessions';
+
+const getCryptoStoreName = (userId: string): string => `crypto${userId}`;
+
+// the matrix-crypto-sdk add postfix to storeName
+const getCryptoDBName = (userId: string): string =>
+  `${getCryptoStoreName(userId)}::matrix-sdk-crypto`;
+
+let closeMachineRef: (() => void) | undefined;
+
+export const initializeCrypto = async (
+  session: Session,
+  request: MatrixRequest
+): Promise<{
+  machine: Machine;
+  deleteCryptoStorage: () => Promise<void>;
+  closeMachine: () => void;
+}> => {
+  const storeName = getCryptoStoreName(session.userId);
+
+  const { olmMachine, closeMachine: closeMachineInner } = await Machine.init(
+    session.userId,
+    session.deviceId,
+    storeName
+  );
+
+  const closeMachine = () => {
+    closeMachineInner();
+    closeMachineRef = undefined;
+  };
+
+  closeMachineRef = closeMachine;
+
+  const outgoingSenderAbortCont = new AbortController();
+  const outgoingRequestRetrier = new MatrixRequestRetrier(sleep);
+  const outgoingSender = new OutgoingRequestSender(request, outgoingSenderAbortCont.signal);
+
+  const machine = new Machine(olmMachine, outgoingSender, outgoingRequestRetrier);
+
+  const deleteCryptoStorage = async () => {
+    closeMachine();
+    await deleteDB(getCryptoDBName(session.userId));
+  };
+
+  return { machine, deleteCryptoStorage, closeMachine };
+};
+
+export const deleteClientCryptoStorage = async (userId: string): Promise<void> => {
+  closeMachineRef?.();
+  await deleteDB(getCryptoDBName(userId));
+};
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index b91913c0..5324192b 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -1,8 +1,5 @@
-import { Machine, OutgoingRequestSender } from 'neurone/lib/crypto/machine';
-import { MatrixRequestRetrier, sleep } from 'neurone/lib/utils';
 import { MatrixRequest } from 'neurone/lib/matrix-request';
 import { Disposer } from 'neurone/lib/utils/disposable';
-import { deleteDB } from 'idb';
 import { Session } from '../app/state/sessions';
 import {
   ClientContext,
@@ -34,43 +31,12 @@ import { SyncResponseManager } from './SyncResponseManager';
 import { LogoutManager } from './LogoutManager';
 import { MachineManager } from './MachineManager';
 import { DecryptionManager } from './decryption';
-
-const initializeCrypto = async (
-  session: Session,
-  request: MatrixRequest
-): Promise<{
-  machine: Machine;
-  deleteCryptoStorage: () => Promise<void>;
-}> => {
-  const storeName = `crypto${session.userId}`;
-
-  const { olmMachine, closeMachine } = await Machine.init(
-    session.userId,
-    session.deviceId,
-    storeName
-  );
-
-  const outgoingSenderAbortCont = new AbortController();
-  const outgoingRequestRetrier = new MatrixRequestRetrier(sleep);
-  const outgoingSender = new OutgoingRequestSender(request, outgoingSenderAbortCont.signal);
-
-  const machine = new Machine(olmMachine, outgoingSender, outgoingRequestRetrier);
-
-  const deleteCryptoStorage = async () => {
-    closeMachine();
-
-    // the matrix-crypto-sdk add postfix to storeName
-    const realStoreName = `${storeName}::matrix-sdk-crypto`;
-    await deleteDB(realStoreName);
-  };
-
-  return { machine, deleteCryptoStorage };
-};
+import { initializeCrypto } from './crypto';
 
 export const initializeClient = async (session: Session): Promise<ClientContext> => {
   const disposer = new Disposer();
 
-  const { storage, deleteStorage } = await createStorage('client', session.userId);
+  const { storage, deleteStorage } = await createStorage(session.userId);
 
   const requestAuthJSON: MatrixRequest = getAuthJSONRequest(session.baseUrl, session.accessToken);
 
diff --git a/src/client/storage/index.ts b/src/client/storage/index.ts
index 31a9efea..7de45222 100644
--- a/src/client/storage/index.ts
+++ b/src/client/storage/index.ts
@@ -78,16 +78,20 @@ export interface Storage {
   presence: PresenceCollection;
 }
 
-const createDBName = (storageName: string, userId: string): string => `${storageName}${userId}`;
+const getDBName = (userId: string): string => `client${userId}`;
+
+// create a reference to opened database close callback.
+// used in clearing cache if client failed to initilize.
+let disconnectStorageRef: (() => void) | undefined;
 
 export const createStorage = async (
-  storageName: string,
   userId: string
 ): Promise<{
   storage: Storage;
   deleteStorage: () => Promise<void>;
+  disconnectStorage: () => void;
 }> => {
-  const dbName = createDBName(storageName, userId);
+  const dbName = getDBName(userId);
 
   // TODO: handle all openDB callbacks.
   const idb = await openDB(dbName, DATABASE_VERSION, {
@@ -118,6 +122,13 @@ export const createStorage = async (
     },
   });
 
+  const disconnectStorage = () => {
+    idb.close();
+    disconnectStorageRef = undefined;
+  };
+
+  disconnectStorageRef = disconnectStorage;
+
   const driver = new IndexedDBStorageDriver(unwrap(idb));
 
   const storage: Storage = {
@@ -147,14 +158,15 @@ export const createStorage = async (
   };
 
   const deleteStorage = async () => {
-    idb.close();
+    disconnectStorage();
     await deleteDB(dbName);
   };
 
-  return { storage, deleteStorage };
+  return { storage, deleteStorage, disconnectStorage };
 };
 
-export const deleteClientStorage = async (storageName: string, userId: string) => {
-  const dbName = createDBName(storageName, userId);
+export const deleteClientStorage = async (userId: string) => {
+  disconnectStorageRef?.();
+  const dbName = getDBName(userId);
   await deleteDB(dbName);
 };

From 56c1d47a08161578d4c5d3b9baf5a5b8e4516891 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 26 Jul 2026 13:46:33 +0530
Subject: [PATCH 040/158] move explore communities to new sdk

---
 src/app/pages/Router.tsx                |  3 +-
 src/app/pages/client/explore/Server.tsx | 70 ++++++++++++++++---------
 2 files changed, 47 insertions(+), 26 deletions(-)

diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 4fe83a33..508331e8 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -251,8 +251,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                 </MobileFriendlyPageNav>
               }
             >
-              <span>hello</span>
-              {/* <Outlet /> */}
+              <Outlet />
             </PageRoot>
           }
         >
diff --git a/src/app/pages/client/explore/Server.tsx b/src/app/pages/client/explore/Server.tsx
index 48f267cc..24cd7df8 100644
--- a/src/app/pages/client/explore/Server.tsx
+++ b/src/app/pages/client/explore/Server.tsx
@@ -30,10 +30,11 @@ import {
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom';
 import FocusTrap from 'focus-trap-react';
 import { useAtomValue } from 'jotai';
+import { postPublicRooms, PostPublicRoomsOK } from 'neurone/lib/api/matrix/client/v3/publicRooms';
+import { getProtocols, GetProtocolsOK } from 'neurone/lib/api/matrix/client/v3/thirdparty';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { useQuery } from '@tanstack/react-query';
-import { MatrixClient, Method, RoomType } from 'matrix-js-sdk';
 import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { RoomTopicViewer } from '../../../components/room-topic-viewer';
 import { RoomCard, RoomCardBase, RoomCardGrid } from '../../../components/room-card';
 import { ExploreServerPathSearchParams } from '../../paths';
@@ -45,6 +46,10 @@ import { getMxIdServer } from '../../../utils/matrix';
 import { stopPropagation } from '../../../utils/keyboard';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useClient } from '../../../hooks/useClient';
+import { rError } from '../../../../client/reader';
+import { ErrorCode } from '../../../cs-errorcode';
+import { RoomType } from '../../../../types/matrix/room';
 
 const useServerSearchParams = (searchParams: URLSearchParams): ExploreServerPathSearchParams =>
   useMemo(
@@ -153,12 +158,17 @@ function ThirdPartyProtocolsSelector({
   instanceId?: string;
   onChange: (instanceId?: string) => void;
 }) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
   const { data } = useQuery({
     queryKey: ['thirdparty', 'protocols'],
-    queryFn: () => mx.getThirdpartyProtocols(),
+    queryFn: async () => {
+      const resp = await ct.requestAuthJSON(getProtocols({}));
+      const [err, result] = await parseMatrixResp<GetProtocolsOK>(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
+      return result;
+    },
   });
 
   const handleInstanceSelect: MouseEventHandler<HTMLButtonElement> = (evt): void => {
@@ -342,8 +352,8 @@ function LimitButton({ limit, onLimitChange }: LimitButtonProps) {
 
 export function PublicRooms() {
   const { server } = useParams();
-  const mx = useMatrixClient();
-  const userId = mx.getUserId();
+  const ct = useClient();
+  const { userId } = ct.session;
   const userServer = userId && getMxIdServer(userId);
   const allRooms = useAtomValue(allRoomsAtom);
   const { navigateSpace, navigateRoom } = useRoomNavigate();
@@ -368,7 +378,7 @@ export function PublicRooms() {
     if (scroll) scroll.scrollTop = 0;
   }, []);
 
-  const fetchPublicRooms = useCallback(() => {
+  const fetchPublicRooms = useCallback(async () => {
     const limit =
       typeof serverSearchParams.limit === 'string'
         ? parseInt(serverSearchParams.limit, 10)
@@ -376,23 +386,26 @@ export function PublicRooms() {
     const roomType: string | null | undefined =
       serverSearchParams.type === 'null' ? null : serverSearchParams.type;
 
-    return mx.http.authedRequest<Awaited<ReturnType<MatrixClient['publicRooms']>>>(
-      Method.Post,
-      '/publicRooms',
-      {
-        server,
-      },
-      {
-        limit,
-        since: serverSearchParams.since,
-        filter: {
-          generic_search_term: serverSearchParams.term,
-          room_types: roomType !== undefined ? [roomType] : undefined,
+    const resp = await ct.requestAuthJSON(
+      postPublicRooms({
+        searchParams: { server },
+        body: {
+          limit,
+          since: serverSearchParams.since,
+          filter: {
+            generic_search_term: serverSearchParams.term,
+            room_types: roomType !== undefined ? [roomType] : undefined,
+          },
+          third_party_instance_id: serverSearchParams.instance,
         },
-        third_party_instance_id: serverSearchParams.instance,
-      }
+      })
     );
-  }, [mx, server, serverSearchParams]);
+
+    const [err, result] = await parseMatrixResp<PostPublicRoomsOK>(resp);
+    if (err) throw err.data;
+
+    return result;
+  }, [ct, server, serverSearchParams]);
 
   const { data, isLoading, error } = useQuery({
     queryKey: [
@@ -405,6 +418,15 @@ export function PublicRooms() {
       serverSearchParams.instance,
     ],
     queryFn: fetchPublicRooms,
+    retry: (failureCount, err) => {
+      console.log(err, rError.errcode(err) === ErrorCode.M_FORBIDDEN);
+      if (rError.errcode(err) === ErrorCode.M_FORBIDDEN) {
+        return false;
+      }
+
+      // Retry other errors up to 3 times
+      return failureCount < 3;
+    },
   });
 
   useEffect(() => {
@@ -581,8 +603,8 @@ export function PublicRooms() {
                   )}
                   {error && (
                     <Box direction="Column" className={css.PublicRoomsError} gap="200">
-                      <Text size="L400">{error.name}</Text>
-                      <Text size="T300">{error.message}</Text>
+                      <Text size="L400">{rError.errcode(error) ?? error.name}</Text>
+                      <Text size="T300">{rError.error(error) ?? error.message}</Text>
                     </Box>
                   )}
                   {data &&

From 452ad28ef5c203dd4ce4f0db9a8bdad26bd74e14 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 26 Jul 2026 15:50:20 +0530
Subject: [PATCH 041/158] fix computed observable remain pending when result is
 undefined

---
 src/app/hooks/useObservableValue.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/hooks/useObservableValue.ts b/src/app/hooks/useObservableValue.ts
index 79f80cea..d907b9ca 100644
--- a/src/app/hooks/useObservableValue.ts
+++ b/src/app/hooks/useObservableValue.ts
@@ -75,10 +75,10 @@ export const useComputedPendingObservableResult = <T, U>(
   compute: (value: T) => U
 ): PendingObservableResult<U> => {
   const computedResult: PendingObservableResult<U> = useMemo(() => {
-    const { value, error } = result;
-    if (value) return { value: compute(value) };
+    const { value, error, pending } = result;
+    if (pending) return { pending: true };
     if (error) return { error };
-    return { pending: true };
+    return { value: compute(value) };
   }, [result, compute]);
 
   return computedResult;

From b385683ae348c8b8fc8ce887a21c172a8112f213 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 26 Jul 2026 15:50:46 +0530
Subject: [PATCH 042/158] fix empty quick emoji section

---
 src/app/features/room/message/Message.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 0eaa5445..f621d7e4 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -97,7 +97,7 @@ export const MessageQuickReactions = as<'div', MessageQuickReactionsProps>(
     const recentEmojisResult = useRecentEmoji(4);
     const recentEmojis = recentEmojisResult.value;
 
-    if (recentEmojis && recentEmojis.length === 0) return <span />;
+    if (!recentEmojis || recentEmojis.length === 0) return <span />;
     return (
       <>
         <Box

From 6d485399927e5a494e45310e29a4537c84c0d38e Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 26 Jul 2026 15:50:59 +0530
Subject: [PATCH 043/158] fix empty recent emoji section

---
 src/app/components/emoji-board/EmojiBoard.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx
index eab41f9f..57e8d959 100644
--- a/src/app/components/emoji-board/EmojiBoard.tsx
+++ b/src/app/components/emoji-board/EmojiBoard.tsx
@@ -81,11 +81,14 @@ const useGroups = (
     const g: EmojiGroupItem[] = [];
     if (tab !== EmojiBoardTab.Emoji) return g;
 
-    g.push({
-      id: RECENT_GROUP_ID,
-      name: 'Recent',
-      items: recentEmojisResult.value ?? [],
-    });
+    const recentEmojis = recentEmojisResult.value;
+    if (recentEmojis && recentEmojis.length > 0) {
+      g.push({
+        id: RECENT_GROUP_ID,
+        name: 'Recent',
+        items: recentEmojis,
+      });
+    }
 
     imagePacks.forEach((pack) => {
       let label = pack.meta.name;

From e367ba864c59cddd9892285836a02f91242e7449 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 28 Jul 2026 10:56:57 +0530
Subject: [PATCH 044/158] move jump to time to new

---
 .../features/room/jump-to-time/JumpToTime.tsx | 34 ++++++++++++-------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/src/app/features/room/jump-to-time/JumpToTime.tsx b/src/app/features/room/jump-to-time/JumpToTime.tsx
index 223c6cf6..6b8c15bf 100644
--- a/src/app/features/room/jump-to-time/JumpToTime.tsx
+++ b/src/app/features/room/jump-to-time/JumpToTime.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useCallback, useMemo, useState } from 'react';
+import React, { MouseEventHandler, useCallback, useState } from 'react';
 import FocusTrap from 'focus-trap-react';
 import {
   Dialog,
@@ -19,32 +19,31 @@ import {
   PopOut,
   RectCords,
 } from 'folds';
-import { Direction, MatrixError } from 'matrix-js-sdk';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { getTimestampToEvent, GetTimestampToEventOK } from 'neurone/lib/api/matrix/client/v1/rooms';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useAlive } from '../../../hooks/useAlive';
-import { useStateEvent } from '../../../hooks/useStateEvent';
 import { useRoom } from '../../../hooks/useRoom';
-import { StateEvent } from '../../../../types/matrix/room';
 import { getToday, getYesterday, timeDayMonthYear, timeHourMinute } from '../../../utils/time';
 import { DatePicker, TimePicker } from '../../../components/time-date';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
+import { useClient } from '../../../hooks/useClient';
 
 type JumpToTimeProps = {
   onCancel: () => void;
   onSubmit: (eventId: string) => void;
 };
 export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
   const alive = useAlive();
-  const createStateEvent = useStateEvent(room, StateEvent.RoomCreate);
 
   const todayTs = getToday();
   const yesterdayTs = getYesterday();
-  const createTs = useMemo(() => createStateEvent?.getTs() ?? 0, [createStateEvent]);
+  const createTs =
+    ct.state.join.create.read.find((e) => e.roomId === roomId)?.event.origin_server_ts ?? 0;
   const [ts, setTs] = useState(() => Date.now());
 
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
@@ -67,13 +66,20 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
   };
   const handleBeginning = () => setTs(createTs);
 
-  const [timestampState, timestampToEvent] = useAsyncCallback<string, MatrixError, [number]>(
+  const [timestampState, timestampToEvent] = useAsyncCallback<string, unknown, [number]>(
     useCallback(
       async (newTs) => {
-        const result = await mx.timestampToEvent(room.roomId, newTs, Direction.Forward);
+        const resp = await ct.requestAuthJSON(
+          getTimestampToEvent({
+            pathParams: { roomId },
+            searchParams: { ts: newTs, dir: 'f' },
+          })
+        );
+        const [err, result] = await parseMatrixResp<GetTimestampToEventOK>(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
         return result.event_id;
       },
-      [mx, room]
+      [ct, roomId]
     )
   );
 
@@ -232,7 +238,9 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
               </Box>
               {timestampState.status === AsyncStatus.Error && (
                 <Text style={{ color: color.Critical.Main }} size="T300">
-                  {timestampState.error.message}
+                  {timestampState.error instanceof Error
+                    ? timestampState.error.message
+                    : 'Unknown Error'}
                 </Text>
               )}
               <Button

From 4c07c9a42865cac998e4de768cb22b9889142b13 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 28 Jul 2026 10:59:47 +0530
Subject: [PATCH 045/158] remove event timeline option from space options menu

---
 src/app/pages/client/space/Space.tsx | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 99e9b879..59a9e383 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -100,7 +100,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ requestClose },
   const { userId } = ct.session;
   const spaceId = useSpace();
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const [developerTools] = useSetting(settingsAtom, 'developerTools');
   const roomToParents = useAtomValue(roomToParentsAtom);
   const powerLevelsStateResult = usePowerLevelsState(spaceId);
   const powerLevels = usePowerLevels(powerLevelsStateResult.value);
@@ -109,7 +108,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ requestClose },
   const permissions = useRoomPermissions(creators, powerLevels);
   const canInvite = permissions.action('invite', userId);
   const openSpaceSettings = useOpenSpaceSettings();
-  const { navigateRoom } = useRoomNavigate();
 
   const [invitePrompt, setInvitePrompt] = useState(false);
 
@@ -142,11 +140,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ requestClose },
     requestClose();
   };
 
-  const handleOpenTimeline = () => {
-    navigateRoom(spaceId);
-    requestClose();
-  };
-
   return (
     <Menu ref={ref} style={{ maxWidth: toRem(160), width: '100vw' }}>
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
@@ -207,18 +200,6 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ requestClose },
             Space Settings
           </Text>
         </MenuItem>
-        {developerTools && (
-          <MenuItem
-            onClick={handleOpenTimeline}
-            size="300"
-            after={<Icon size="100" src={Icons.Terminal} />}
-            radii="300"
-          >
-            <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
-              Event Timeline
-            </Text>
-          </MenuItem>
-        )}
       </Box>
       <Line variant="Surface" size="300" />
       <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>

From 1a90795dbfc35b82309fa2eccf9355949a8e1456 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 28 Jul 2026 12:14:51 +0530
Subject: [PATCH 046/158] move quick room switcher to new sdk

---
 src/app/features/search/Search.tsx | 152 ++++++++++++++++-------------
 src/app/pages/Router.tsx           |   2 +-
 src/app/utils/sort.ts              |  16 +--
 src/client/context.ts              |  41 ++++++--
 src/client/initialize.ts           |   5 +-
 5 files changed, 122 insertions(+), 94 deletions(-)

diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx
index cfc4ee5f..1890049a 100644
--- a/src/app/features/search/Search.tsx
+++ b/src/app/features/search/Search.tsx
@@ -27,9 +27,7 @@ import React, {
 } from 'react';
 import { isKeyHotkey } from 'is-hotkey';
 import { useAtom, useAtomValue } from 'jotai';
-import { Room } from 'matrix-js-sdk';
 import { useDirects, useOrphanSpaces, useRooms, useSpaces } from '../../state/hooks/roomList';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { mDirectAtom } from '../../state/mDirectList';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import {
@@ -37,28 +35,31 @@ import {
   useAsyncSearch,
   UseAsyncSearchOptions,
 } from '../../hooks/useAsyncSearch';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import {
-  getAllParents,
-  getDirectRoomAvatarUrl,
-  getRoomAvatarUrl,
-  guessPerfectParent,
-} from '../../utils/room';
+import { getAllParents, guessPerfectParent } from '../../utils/room';
 import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
 import { factoryRoomIdByActivity } from '../../utils/sort';
 import { nameInitials } from '../../utils/common';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useListFocusIndex } from '../../hooks/useListFocusIndex';
-import { getMxIdLocalPart, getMxIdServer, guessDmRoomUserId } from '../../utils/matrix';
+import { getMxIdLocalPart, getMxIdServer } from '../../utils/matrix';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
-import { roomToUnreadAtom } from '../../state/room/roomToUnread';
+import { unreadRoomsAtom } from '../../state/room/roomToUnread';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { searchModalAtom } from '../../state/searchModal';
 import { useKeyDown } from '../../hooks/useKeyDown';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { KeySymbol } from '../../utils/key-symbol';
 import { isMacOS } from '../../utils/user-agent';
+import { useClient } from '../../hooks/useClient';
+import { useObservableValue } from '../../hooks/useObservableValue';
+import { roomToNotificationsAtom } from '../../state/room/roomToNotifications';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
+import { getRoomTotalNotifications } from '../../state/hooks/roomNotifications';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { useRoomsPowerLevels } from '../../hooks/usePowerLevels';
 
 enum SearchRoomType {
   Rooms = '#',
@@ -79,30 +80,23 @@ const useTopActiveRooms = (
   directs: string[],
   spaces: string[]
 ) => {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const roomToLatestEvent = useObservableValue(ct.roomToLatestEvent);
 
   return useMemo(() => {
+    const getTimestamp = (rId: string) => roomToLatestEvent.get(rId)?.origin_server_ts;
+
     if (searchRoomType === SearchRoomType.Spaces) {
       return spaces;
     }
     if (searchRoomType === SearchRoomType.Directs) {
-      return [...directs].sort(factoryRoomIdByActivity(mx)).slice(0, 20);
+      return [...directs].sort(factoryRoomIdByActivity(getTimestamp)).slice(0, 20);
     }
     if (searchRoomType === SearchRoomType.Rooms) {
-      return [...rooms].sort(factoryRoomIdByActivity(mx)).slice(0, 20);
+      return [...rooms].sort(factoryRoomIdByActivity(getTimestamp)).slice(0, 20);
     }
-    return [...rooms, ...directs].sort(factoryRoomIdByActivity(mx)).slice(0, 20);
-  }, [mx, rooms, directs, spaces, searchRoomType]);
-};
-
-const getDmUserId = (
-  roomId: string,
-  getRoom: (roomId: string) => Room | undefined,
-  myUserId: string
-): string | undefined => {
-  const room = getRoom(roomId);
-  const targetUserId = room && guessDmRoomUserId(room, myUserId);
-  return targetUserId;
+    return [...rooms, ...directs].sort(factoryRoomIdByActivity(getTimestamp)).slice(0, 20);
+  }, [roomToLatestEvent, rooms, directs, spaces, searchRoomType]);
 };
 
 const useSearchTargetRooms = (
@@ -135,39 +129,37 @@ type SearchProps = {
   requestClose: () => void;
 };
 export function Search({ requestClose }: SearchProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const scrollRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
   const { navigateRoom, navigateSpace } = useRoomNavigate();
-  const roomToUnread = useAtomValue(roomToUnreadAtom);
+  const unreadRooms = useAtomValue(unreadRoomsAtom);
+  const roomToNotifications = useAtomValue(roomToNotificationsAtom);
 
   const [searchRoomType, setSearchRoomType] = useState<SearchRoomType>();
 
-  const allRoomsSet = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allRoomsSet);
-
   const roomToParents = useAtomValue(roomToParentsAtom);
-  const orphanSpaces = useOrphanSpaces(mx, allRoomsAtom, roomToParents);
+  const orphanSpaces = useOrphanSpaces(ct, allRoomsAtom, roomToParents);
   const mDirects = useAtomValue(mDirectAtom);
-  const rooms = useRooms(mx, allRoomsAtom, mDirects);
-  const spaces = useSpaces(mx, allRoomsAtom);
-  const directs = useDirects(mx, allRoomsAtom, mDirects);
+  const rooms = useRooms(ct, allRoomsAtom, mDirects);
+  const spaces = useSpaces(ct, allRoomsAtom);
+  const directs = useDirects(ct, allRoomsAtom, mDirects);
+  const directRoomToUser = useObservableValue(ct.directRoomToUser);
+  const roomToPowerLevels = useRoomsPowerLevels(ct.rooms.join.read);
+
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
 
   const topActiveRooms = useTopActiveRooms(searchRoomType, rooms, directs, spaces);
   const targetRooms = useSearchTargetRooms(searchRoomType, rooms, directs, spaces);
 
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(directs);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
   const getTargetStr: SearchItemStrGetter<string> = useCallback(
-    (roomId: string) => {
-      const roomName = getRoom(roomId)?.name ?? roomId;
-      if (mDirects.has(roomId)) {
-        const targetUserId = getDmUserId(roomId, getRoom, mx.getSafeUserId());
-        const targetUsername = targetUserId && getMxIdLocalPart(targetUserId);
-        if (targetUsername) return [roomName, targetUsername];
-      }
-      return roomName;
-    },
-    [getRoom, mDirects, mx]
+    (roomId: string) => getRoomName(roomId) ?? 'Unknown',
+    [getRoomName]
   );
 
   const [result, search, resetSearch] = useAsyncSearch(targetRooms, getTargetStr, SEARCH_OPTIONS);
@@ -299,25 +291,42 @@ export function Search({ requestClose }: SearchProps) {
                 <Scroll ref={scrollRef} size="300" hideTrack>
                   <div style={{ padding: config.space.S400, paddingRight: config.space.S200 }}>
                     {roomsToRender.map((roomId, index) => {
-                      const room = getRoom(roomId);
-                      if (!room) return null;
-
                       const dm = mDirects.has(roomId);
-                      const dmUserId = dm && getDmUserId(roomId, getRoom, mx.getSafeUserId());
+                      const dmUserId = dm && directRoomToUser.get(roomId);
                       const dmUsername = dmUserId && getMxIdLocalPart(dmUserId);
                       const dmUserServer = dmUserId && getMxIdServer(dmUserId);
+                      const isSpace = ct.spaceRooms.read.has(roomId);
 
                       const allParents = getAllParents(roomToParents, roomId);
                       const orphanParents =
                         allParents && orphanSpaces.filter((o) => allParents.has(o));
                       const perfectOrphanParent =
-                        orphanParents && guessPerfectParent(mx, roomId, orphanParents);
+                        orphanParents &&
+                        guessPerfectParent(
+                          roomId,
+                          orphanParents,
+                          (rId) => ct.roomToCreators.read.get(rId),
+                          (rId) => roomToPowerLevels.get(rId)
+                        );
 
                       const exactParents = roomToParents.get(roomId);
                       const perfectParent =
-                        exactParents && guessPerfectParent(mx, roomId, Array.from(exactParents));
+                        exactParents &&
+                        guessPerfectParent(
+                          roomId,
+                          Array.from(exactParents),
+                          (rId) => ct.roomToCreators.read.get(rId),
+                          (rId) => roomToPowerLevels.get(rId)
+                        );
 
-                      const unread = roomToUnread.get(roomId);
+                      const unread = unreadRooms.has(roomId);
+                      const n = roomToNotifications.get(roomId);
+                      const notifications = n && getRoomTotalNotifications(n);
+                      const unreadOrNotification =
+                        (notifications && notifications.count > 0) || unread;
+
+                      const avatarMxc = getRoomAvatar(roomId);
+                      const roomName: string = getRoomName(roomId) ?? 'Unknown';
 
                       return (
                         <MenuItem
@@ -325,7 +334,7 @@ export function Search({ requestClose }: SearchProps) {
                           as="button"
                           data-focus-index={index}
                           data-room-id={roomId}
-                          data-space={room.isSpaceRoom()}
+                          data-space={isSpace}
                           onClick={handleRoomClick}
                           variant={listFocus.index === index ? 'Primary' : 'Surface'}
                           aria-pressed={listFocus.index === index}
@@ -339,14 +348,14 @@ export function Search({ requestClose }: SearchProps) {
                               )}
                               {!dm && perfectOrphanParent && (
                                 <Text size="T200" priority="300" truncate>
-                                  <b>{getRoom(perfectOrphanParent)?.name ?? perfectOrphanParent}</b>
+                                  <b>{getRoomName(perfectOrphanParent) ?? perfectOrphanParent}</b>
                                 </Text>
                               )}
-                              {unread && (
+                              {unreadOrNotification && (
                                 <UnreadBadgeCenter>
                                   <UnreadBadge
-                                    highlight={unread.highlight > 0}
-                                    count={unread.total}
+                                    highlight={notifications?.highlight}
+                                    count={notifications?.count ?? 0}
                                   />
                                 </UnreadBadgeCenter>
                               )}
@@ -354,26 +363,29 @@ export function Search({ requestClose }: SearchProps) {
                           }
                           before={
                             <Avatar size="200" radii={dm ? '400' : '300'}>
-                              {dm || room.isSpaceRoom() ? (
+                              {dm || isSpace ? (
                                 <RoomAvatar
-                                  roomId={room.roomId}
+                                  roomId={roomId}
                                   src={
-                                    dm
-                                      ? getDirectRoomAvatarUrl(mx, room, 32, useAuthentication)
-                                      : getRoomAvatarUrl(mx, room, 32, useAuthentication)
+                                    avatarMxc &&
+                                    mxcToHttp(
+                                      ct.session.baseUrl,
+                                      avatarMxc,
+                                      useAuthentication
+                                    ).thumbnail({ width: 32, height: 32, method: 'crop' })
                                   }
-                                  alt={room.name}
+                                  alt={roomName}
                                   renderFallback={() => (
                                     <Text as="span" size="H6">
-                                      {nameInitials(room.name)}
+                                      {nameInitials(roomName)}
                                     </Text>
                                   )}
                                 />
                               ) : (
                                 <RoomIcon
                                   size="100"
-                                  joinRule={room.getJoinRule()}
-                                  roomType={room.getType()}
+                                  joinRule={roomToJoinRule.get(roomId)}
+                                  roomType={ct.roomToType.read.get(roomId)}
                                 />
                               )}
                             </Avatar>
@@ -382,8 +394,8 @@ export function Search({ requestClose }: SearchProps) {
                           <Box grow="Yes" alignItems="Center" gap="100">
                             <Text size="T400" truncate>
                               {queryHighlighRegex
-                                ? highlightText(queryHighlighRegex, [room.name])
-                                : room.name}
+                                ? highlightText(queryHighlighRegex, [roomName])
+                                : roomName}
                             </Text>
                             {dmUsername && (
                               <Text as="span" size="T200" priority="300" truncate>
@@ -395,7 +407,7 @@ export function Search({ requestClose }: SearchProps) {
                             )}
                             {!dm && perfectParent && perfectParent !== perfectOrphanParent && (
                               <Text size="T200" priority="300" truncate>
-                                — {getRoom(perfectParent)?.name ?? perfectParent}
+                                — {getRoomName(perfectParent) ?? perfectParent}
                               </Text>
                             )}
                           </Box>
@@ -445,5 +457,5 @@ export function SearchModalRenderer() {
     )
   );
 
-  return opened && <Search requestClose={() => setOpen(false)} />;
+  return opened ? <Search requestClose={() => setOpen(false)} /> : null;
 }
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 508331e8..f6d7ae61 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -135,7 +135,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                   >
                     <Outlet />
                   </ClientLayout>
-                  {/*<SearchModalRenderer />*/}
+                  <SearchModalRenderer />
                   <UserRoomProfileRenderer />
                   <CreateRoomModalRenderer />
                   <CreateSpaceModalRenderer />
diff --git a/src/app/utils/sort.ts b/src/app/utils/sort.ts
index ee8aa832..b44f24c3 100644
--- a/src/app/utils/sort.ts
+++ b/src/app/utils/sort.ts
@@ -1,18 +1,10 @@
-import { MatrixClient } from 'matrix-js-sdk';
-
 export type SortFunc<T> = (a: T, b: T) => number;
 
 export const factoryRoomIdByActivity =
-  (mx: MatrixClient): SortFunc<string> =>
-  (a, b) => {
-    const room1 = mx.getRoom(a);
-    const room2 = mx.getRoom(b);
-
-    return (
-      (room2?.getLastActiveTimestamp() ?? Number.MIN_SAFE_INTEGER) -
-      (room1?.getLastActiveTimestamp() ?? Number.MIN_SAFE_INTEGER)
-    );
-  };
+  (getLatestEventTs: (roomId: string) => number | undefined): SortFunc<string> =>
+  (a, b) =>
+    (getLatestEventTs(b) ?? Number.MIN_SAFE_INTEGER) -
+    (getLatestEventTs(a) ?? Number.MIN_SAFE_INTEGER);
 
 export const factoryRoomIdByAtoZ =
   (getRoomName: (roomId: string) => string | undefined): SortFunc<string> =>
diff --git a/src/client/context.ts b/src/client/context.ts
index d536c283..45a1fd14 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -81,6 +81,7 @@ export type ClientContext = {
   rooms: RoomsContext;
   decryption: DecryptionManager;
 
+  directRoomToUser: ObservableValue<Map<string, string>>;
   directRooms: ObservableValue<Set<string>>;
   spaceRooms: ObservableValue<Set<string>>;
   encryptedRooms: ObservableValue<Set<string>>;
@@ -445,28 +446,48 @@ export const createEncryptedRoomsObservable = (
   return encryptedRoomsObservable;
 };
 
-export const createDirectRoomsObservable = async (
+export const createDirectRoomToUserObservable = async (
   storage: Storage,
   disposer: Disposer
-): Promise<ObservableValue<Set<string>>> => {
+): Promise<ObservableValue<Map<string, string>>> => {
   const mDirectObj = await storage.accountData.observableRead.get(AccountDataType.Direct);
-  const directRoomsObservable = new ComputedObservableValue(() => {
-    const rooms = new Set<string>();
+
+  const roomToUserObservable = new ComputedObservableValue(() => {
+    const roomToUser = new Map<string, string>();
     const userIdToRooms = mDirectObj.read?.event.content;
 
-    if (typeof userIdToRooms !== 'object') return rooms;
+    if (typeof userIdToRooms !== 'object' || userIdToRooms === null) {
+      return roomToUser;
+    }
 
-    Object.values(userIdToRooms).forEach((roomIds) => {
+    Object.entries(userIdToRooms).forEach(([userId, roomIds]) => {
       if (!Array.isArray(roomIds)) return;
-      roomIds.forEach((id) => {
-        if (typeof id === 'string') rooms.add(id);
+
+      roomIds.forEach((roomId) => {
+        if (typeof roomId === 'string') {
+          roomToUser.set(roomId, userId);
+        }
       });
     });
 
-    return rooms;
+    return roomToUser;
   }, [mDirectObj]);
 
-  disposer.collect(mDirectObj, directRoomsObservable);
+  disposer.collect(mDirectObj, roomToUserObservable);
+
+  return roomToUserObservable;
+};
+
+export const createDirectRoomsObservable = (
+  roomToUserObservable: ObservableValue<Map<string, string>>,
+  disposer: Disposer
+): ObservableValue<Set<string>> => {
+  const directRoomsObservable = new ComputedObservableValue(
+    () => new Set(roomToUserObservable.read?.keys() ?? []),
+    [roomToUserObservable]
+  );
+
+  disposer.collect(directRoomsObservable);
 
   return directRoomsObservable;
 };
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index 5324192b..e9b6ba48 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -4,6 +4,7 @@ import { Session } from '../app/state/sessions';
 import {
   ClientContext,
   createDirectRoomsObservable,
+  createDirectRoomToUserObservable,
   createEncryptedRoomsObservable,
   createLogoutObservable,
   createPendingMemberRoomObservable,
@@ -50,7 +51,8 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     disposer
   );
   const encryptedRooms = createEncryptedRoomsObservable(state, disposer);
-  const directRooms = await createDirectRoomsObservable(storage, disposer);
+  const directRoomToUser = await createDirectRoomToUserObservable(storage, disposer);
+  const directRooms = createDirectRoomsObservable(directRoomToUser, disposer);
   const { roomToParents, roomToChildEvents } = createSpaceMapping(state, disposer);
 
   const roomToSummary = await createRoomToSummaryObservable(storage, disposer);
@@ -101,6 +103,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     rooms,
     decryption,
 
+    directRoomToUser,
     directRooms,
     spaceRooms,
     encryptedRooms,

From 2d31b474faa46531c2965ec532f246e2507929d5 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 28 Jul 2026 14:53:31 +0530
Subject: [PATCH 047/158] fix search dm by username not working

---
 src/app/features/search/Search.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx
index 1890049a..fe6c5db8 100644
--- a/src/app/features/search/Search.tsx
+++ b/src/app/features/search/Search.tsx
@@ -158,8 +158,16 @@ export function Search({ requestClose }: SearchProps) {
   const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
 
   const getTargetStr: SearchItemStrGetter<string> = useCallback(
-    (roomId: string) => getRoomName(roomId) ?? 'Unknown',
-    [getRoomName]
+    (roomId: string) => {
+      const roomName = getRoomName(roomId) ?? 'Unknown';
+      if (mDirects.has(roomId)) {
+        const dmUser = directRoomToUser.get(roomId);
+        const targetUsername = dmUser && getMxIdLocalPart(dmUser);
+        if (targetUsername) return [roomName, targetUsername];
+      }
+      return roomName;
+    },
+    [directRoomToUser, getRoomName, mDirects]
   );
 
   const [result, search, resetSearch] = useAsyncSearch(targetRooms, getTargetStr, SEARCH_OPTIONS);

From d057233c4589a26c712d5705e2c5c5fbffc693df Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 28 Jul 2026 15:01:08 +0530
Subject: [PATCH 048/158] move leave room dialog to new sdk

---
 .../leave-room-prompt/LeaveRoomPrompt.tsx     | 40 ++++++-------------
 .../leave-space-prompt/LeaveSpacePrompt.tsx   | 33 ++++++++-------
 2 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx b/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
index eba75721..c8f87b9e 100644
--- a/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
+++ b/src/app/components/leave-room-prompt/LeaveRoomPrompt.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import FocusTrap from 'focus-trap-react';
 import {
   Dialog,
@@ -17,15 +17,12 @@ import {
   Spinner,
 } from 'folds';
 import { postLeave } from 'neurone/lib/api/matrix/client/v3/rooms';
-import {
-  MatrixResponseResult,
-  parseMatrixResp,
-  printMatrixError,
-} from 'neurone/lib/matrix-request';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../utils/keyboard';
 import { useClient } from '../../hooks/useClient';
 import { deleteJoinRooms } from '../../../client/syncWriter/utils';
+import { useAlive } from '../../hooks/useAlive';
 
 type LeaveRoomPromptProps = {
   roomId: string;
@@ -34,31 +31,25 @@ type LeaveRoomPromptProps = {
 };
 export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptProps) {
   const ct = useClient();
+  const alive = useAlive();
 
-  const [leaveState, leaveRoom] = useAsyncCallback<MatrixResponseResult<unknown>, Error, []>(
+  const [leaveState, leaveRoom] = useAsyncCallback<void, Error, []>(
     useCallback(async () => {
       const response = await ct.requestAuthJSON(postLeave({ pathParams: { roomId } }));
-      deleteJoinRooms(ct, [roomId])
-        .then(() => console.log('=====> deleted'))
-        .catch((e) => {
-          console.error(e);
-        });
-      return parseMatrixResp(response);
+      deleteJoinRooms(ct, [roomId]);
+      const [err] = await parseMatrixResp(response);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
     }, [ct, roomId])
   );
-  const success = leaveState.status === AsyncStatus.Success;
-  const [requestError] = success ? leaveState.data : [];
 
   const handleLeave = () => {
-    leaveRoom();
+    leaveRoom().then(() => {
+      if (alive()) {
+        onDone();
+      }
+    });
   };
 
-  useEffect(() => {
-    if (success) {
-      onDone();
-    }
-  }, [success, onDone]);
-
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
       <OverlayCenter>
@@ -94,11 +85,6 @@ export function LeaveRoomPrompt({ roomId, onDone, onCancel }: LeaveRoomPromptPro
                     Failed to leave room! {leaveState.error.message}
                   </Text>
                 )}
-                {requestError && (
-                  <Text style={{ color: color.Critical.Main }} size="T300">
-                    Failed to leave room! {printMatrixError(requestError)}
-                  </Text>
-                )}
               </Box>
               <Button
                 type="submit"
diff --git a/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx b/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx
index 8709b942..6b6910b5 100644
--- a/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx
+++ b/src/app/components/leave-space-prompt/LeaveSpacePrompt.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React, { useCallback } from 'react';
 import FocusTrap from 'focus-trap-react';
 import {
   Dialog,
@@ -16,10 +16,13 @@ import {
   Button,
   Spinner,
 } from 'folds';
-import { MatrixError } from 'matrix-js-sdk';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
+import { postLeave } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { stopPropagation } from '../../utils/keyboard';
+import { useClient } from '../../hooks/useClient';
+import { deleteJoinRooms } from '../../../client/syncWriter/utils';
+import { useAlive } from '../../hooks/useAlive';
 
 type LeaveSpacePromptProps = {
   roomId: string;
@@ -27,24 +30,26 @@ type LeaveSpacePromptProps = {
   onCancel: () => void;
 };
 export function LeaveSpacePrompt({ roomId, onDone, onCancel }: LeaveSpacePromptProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const alive = useAlive();
 
-  const [leaveState, leaveRoom] = useAsyncCallback<undefined, MatrixError, []>(
+  const [leaveState, leaveRoom] = useAsyncCallback<void, Error, []>(
     useCallback(async () => {
-      mx.leave(roomId);
-    }, [mx, roomId])
+      const response = await ct.requestAuthJSON(postLeave({ pathParams: { roomId } }));
+      deleteJoinRooms(ct, [roomId]);
+      const [err] = await parseMatrixResp(response);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
+    }, [ct, roomId])
   );
 
   const handleLeave = () => {
-    leaveRoom();
+    leaveRoom().then(() => {
+      if (alive()) {
+        onDone();
+      }
+    });
   };
 
-  useEffect(() => {
-    if (leaveState.status === AsyncStatus.Success) {
-      onDone();
-    }
-  }, [leaveState, onDone]);
-
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
       <OverlayCenter>

From 31e46a7435a2296008b1cdf147c92ed54fee797d Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 28 Jul 2026 21:21:30 +0530
Subject: [PATCH 049/158] move invites to new sdk

---
 src/app/hooks/storage/useInviteRooms.ts   | 113 +++++++++++
 src/app/pages/Router.tsx                  |   3 +-
 src/app/pages/client/inbox/Inbox.tsx      |   7 +-
 src/app/pages/client/inbox/Invites.tsx    | 221 ++++++++++------------
 src/app/pages/client/sidebar/InboxTab.tsx |   6 +-
 src/app/state/hooks/inviteList.ts         |  55 ------
 src/app/state/hooks/useBindAtoms.ts       |   2 -
 src/app/state/room-list/inviteList.ts     |  19 --
 src/app/utils/room.ts                     |  37 ----
 9 files changed, 220 insertions(+), 243 deletions(-)
 create mode 100644 src/app/hooks/storage/useInviteRooms.ts
 delete mode 100644 src/app/state/hooks/inviteList.ts
 delete mode 100644 src/app/state/room-list/inviteList.ts

diff --git a/src/app/hooks/storage/useInviteRooms.ts b/src/app/hooks/storage/useInviteRooms.ts
new file mode 100644
index 00000000..2d030705
--- /dev/null
+++ b/src/app/hooks/storage/useInviteRooms.ts
@@ -0,0 +1,113 @@
+import { ObjectReader } from 'neurone/lib/utils';
+import { useCallback, useMemo } from 'react';
+import { StateEventType } from '../../../types/matrix/room';
+import { getMxIdLocalPart } from '../../utils/matrix';
+import { useClient } from '../useClient';
+import {
+  useComputedPendingObservableResult,
+  useObservableValue,
+  useObservableValuePromise,
+} from '../useObservableValue';
+
+export type InviteData = {
+  roomId: string;
+  roomName: string;
+  roomAvatar?: string;
+  roomTopic?: string;
+  roomAlias?: string;
+
+  senderId: string;
+  senderName: string;
+  senderAvatar?: string;
+  inviteTs?: number;
+  reason?: string;
+
+  isSpace: boolean;
+  isDirect: boolean;
+  isEncrypted: boolean;
+};
+
+export const useInviteRooms = () => {
+  const ct = useClient();
+  const directRooms = useObservableValue(ct.directRooms);
+  const roomToName = useObservableValue(ct.roomToName);
+  const roomToAvatar = useObservableValue(ct.roomToAvatar);
+  const roomToTopic = useObservableValue(ct.roomToTopic);
+  const roomToAlias = useObservableValue(ct.roomToAlias);
+
+  const spaceRooms = useObservableValue(ct.spaceRooms);
+  const encryptedRooms = useObservableValue(ct.encryptedRooms);
+
+  const invitesStateResult = useObservableValuePromise(
+    useMemo(() => ct.storage.inviteRoomState.observableRead.getAll(), [ct])
+  );
+
+  const invitesDataResult = useComputedPendingObservableResult(
+    invitesStateResult,
+    useCallback(
+      (stateEventObjs) => {
+        const createEvents = stateEventObjs.filter(
+          (eventObj) =>
+            eventObj.type === StateEventType.RoomCreate && eventObj.event.state_key === ''
+        );
+
+        const invites: InviteData[] = createEvents.map((eventObj) => {
+          const { roomId } = eventObj;
+
+          const members = stateEventObjs
+            .filter((obj) => obj.roomId === roomId && obj.type === StateEventType.RoomMember)
+            .map((obj) => obj.event);
+          const memberEvent = members.find((member) => member.state_key === ct.session.userId);
+          const inviteTs = ObjectReader.number(memberEvent, 'origin_server_ts');
+          const reason = ObjectReader.string(memberEvent, 'reason');
+
+          const senderId = memberEvent?.sender;
+          const senderEvent = members.find((member) => member.state_key === senderId);
+          const senderName =
+            senderId &&
+            ObjectReader.string(senderEvent?.content, 'displayname') &&
+            getMxIdLocalPart(senderId) &&
+            senderId;
+          const senderAvatar = ObjectReader.string(senderEvent?.content, 'avatar_url');
+
+          const isDirect =
+            ObjectReader.boolean(memberEvent?.content, 'is_direct') ?? directRooms.has(roomId);
+
+          const data: InviteData = {
+            roomId,
+            roomAvatar: roomToAvatar.get(roomId) ?? isDirect ? senderAvatar : undefined,
+            roomName: roomToName.get(roomId) ?? roomToAlias.get(roomId) ?? roomId,
+            roomTopic: roomToTopic.get(roomId),
+            roomAlias: roomToAlias.get(roomId),
+
+            senderId: senderId ?? 'Unknown',
+            senderName: senderName ?? 'Unknown',
+            senderAvatar,
+            inviteTs,
+            reason,
+
+            isSpace: spaceRooms.has(roomId),
+            isDirect,
+            isEncrypted: encryptedRooms.has(roomId),
+          };
+
+          return data;
+        });
+
+        return invites;
+      },
+      [
+        ct,
+        directRooms,
+        roomToName,
+        roomToAvatar,
+        roomToTopic,
+        roomToAlias,
+        spaceRooms,
+        encryptedRooms,
+      ]
+    )
+  );
+
+  return invitesDataResult;
+};
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index f6d7ae61..3d3c13df 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -276,8 +276,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                 </MobileFriendlyPageNav>
               }
             >
-              <span>hello</span>
-              {/* <Outlet /> */}
+              <Outlet />
             </PageRoot>
           }
         >
diff --git a/src/app/pages/client/inbox/Inbox.tsx b/src/app/pages/client/inbox/Inbox.tsx
index 67d6021a..8a06d79c 100644
--- a/src/app/pages/client/inbox/Inbox.tsx
+++ b/src/app/pages/client/inbox/Inbox.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { Avatar, Box, Icon, Icons, Text } from 'folds';
-import { useAtomValue } from 'jotai';
 import { NavCategory, NavItem, NavItemContent, NavLink } from '../../../components/nav';
 import { getInboxInvitesPath, getInboxNotificationsPath } from '../../pathUtils';
 import {
@@ -8,13 +7,15 @@ import {
   useInboxNotificationsSelected,
 } from '../../../hooks/router/useInbox';
 import { UnreadBadge } from '../../../components/unread-badge';
-import { allInvitesAtom } from '../../../state/room-list/inviteList';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
+import { useClient } from '../../../hooks/useClient';
+import { useObservableValue } from '../../../hooks/useObservableValue';
 
 function InvitesNavItem() {
+  const ct = useClient();
   const invitesSelected = useInboxInvitesSelected();
-  const allInvites = useAtomValue(allInvitesAtom);
+  const allInvites = useObservableValue(ct.rooms.invite);
   const inviteCount = allInvites.length;
 
   return (
diff --git a/src/app/pages/client/inbox/Invites.tsx b/src/app/pages/client/inbox/Invites.tsx
index 20518e56..c7b1d9e6 100644
--- a/src/app/pages/client/inbox/Invites.tsx
+++ b/src/app/pages/client/inbox/Invites.tsx
@@ -18,9 +18,11 @@ import {
   config,
 } from 'folds';
 import { useAtomValue } from 'jotai';
-import { RoomTopicEventContent } from 'matrix-js-sdk/lib/types';
 import FocusTrap from 'focus-trap-react';
-import { MatrixClient, MatrixError, Room } from 'matrix-js-sdk';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
+import { ObjectReader } from 'neurone/lib/utils';
+import { postJoin, postLeave, postReport } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import {
   Page,
   PageContent,
@@ -30,27 +32,10 @@ import {
   PageHeroEmpty,
   PageHeroSection,
 } from '../../../components/page';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { allInvitesAtom } from '../../../state/room-list/inviteList';
 import { SequenceCard } from '../../../components/sequence-card';
-import {
-  bannedInRooms,
-  getCommonRooms,
-  getDirectRoomAvatarUrl,
-  getMemberDisplayName,
-  getRoomAvatarUrl,
-  getStateEvent,
-  isDirectInvite,
-  isSpace,
-} from '../../../utils/room';
 import { nameInitials } from '../../../utils/common';
 import { RoomAvatar } from '../../../components/room-avatar';
-import {
-  addRoomIdToMDirect,
-  getMxIdLocalPart,
-  guessDmRoomUserId,
-  rateLimitedActions,
-} from '../../../utils/matrix';
+import { addRoomIdToMDirect, rateLimitedActions } from '../../../utils/matrix';
 import { Time } from '../../../components/message';
 import { useElementSizeObserver } from '../../../hooks/useElementSizeObserver';
 import { onEnterOrSpace, stopPropagation } from '../../../utils/keyboard';
@@ -59,81 +44,22 @@ import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
-import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { StateEvent } from '../../../../types/matrix/room';
 import { testBadWords } from '../../../plugins/bad-words';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
-import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
+import { getIgnoredUsersContent, useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
 import { useReportRoomSupported } from '../../../hooks/useReportRoomSupported';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
+import { InviteData, useInviteRooms } from '../../../hooks/storage/useInviteRooms';
+import { useClient } from '../../../hooks/useClient';
+import { getJoinRoomMemberId, JoinRoomMemberObject } from '../../../../client/storage/collections';
+import { useObservableValuePromise } from '../../../hooks/useObservableValue';
+import { Membership } from '../../../../types/matrix/room';
+import { AccountDataType } from '../../../../types/matrix/accountData';
+import { deleteInviteRooms } from '../../../../client/syncWriter/utils';
 
 const COMPACT_CARD_WIDTH = 548;
 
-type InviteData = {
-  room: Room;
-  roomId: string;
-  roomName: string;
-  roomAvatar?: string;
-  roomTopic?: string;
-  roomAlias?: string;
-
-  senderId: string;
-  senderName: string;
-  inviteTs?: number;
-  reason?: string;
-
-  isSpace: boolean;
-  isDirect: boolean;
-  isEncrypted: boolean;
-};
-
-const makeInviteData = (mx: MatrixClient, room: Room, useAuthentication: boolean): InviteData => {
-  const userId = mx.getSafeUserId();
-  const direct = isDirectInvite(room, userId);
-
-  const roomAvatar = direct
-    ? getDirectRoomAvatarUrl(mx, room, 96, useAuthentication)
-    : getRoomAvatarUrl(mx, room, 96, useAuthentication);
-  const roomName = room.name || room.getCanonicalAlias() || room.roomId;
-  const roomTopic =
-    getStateEvent(room, StateEvent.RoomTopic)?.getContent<RoomTopicEventContent>()?.topic ??
-    undefined;
-
-  const member = room.getMember(userId);
-  const memberEvent = member?.events.member;
-
-  const content = memberEvent?.getContent();
-  const senderId = memberEvent?.getSender();
-
-  const senderName = senderId
-    ? getMemberDisplayName(room, senderId) ?? getMxIdLocalPart(senderId) ?? senderId
-    : undefined;
-  const inviteTs = memberEvent?.getTs();
-  const reason =
-    content && 'reason' in content && typeof content.reason === 'string'
-      ? content.reason
-      : undefined;
-
-  return {
-    room,
-    roomId: room.roomId,
-    roomAvatar,
-    roomName,
-    roomTopic,
-    roomAlias: room.getCanonicalAlias() ?? undefined,
-
-    senderId: senderId ?? 'Unknown',
-    senderName: senderName ?? 'Unknown',
-    inviteTs,
-    reason,
-
-    isSpace: isSpace(room),
-    isDirect: direct,
-    isEncrypted: !!getStateEvent(room, StateEvent.RoomEncryption),
-  };
-};
-
 const hasBadWords = (invite: InviteData): boolean =>
   testBadWords(invite.roomName) ||
   testBadWords(invite.roomTopic ?? '') ||
@@ -159,28 +85,37 @@ function InviteCard({
   onNavigate,
   hideAvatar,
 }: InviteCardProps) {
-  const mx = useMatrixClient();
-  const userId = mx.getSafeUserId();
+  const ct = useClient();
 
   const [viewTopic, setViewTopic] = useState(false);
   const closeTopic = () => setViewTopic(false);
   const openTopic = () => setViewTopic(true);
 
-  const [joinState, join] = useAsyncCallback<void, MatrixError, []>(
+  const [joinState, join] = useAsyncCallback<void, unknown, []>(
     useCallback(async () => {
-      const dmUserId = isDirectInvite(invite.room, userId)
-        ? guessDmRoomUserId(invite.room, userId)
-        : undefined;
+      const dmUserId = invite.isDirect ? invite.senderId : undefined;
+
+      const resp = await ct.requestAuthJSON(
+        postJoin({ pathParams: { roomId: invite.roomId }, body: {} })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
+
+      deleteInviteRooms(ct, [invite.roomId]);
 
-      await mx.joinRoom(invite.roomId);
       if (dmUserId) {
-        await addRoomIdToMDirect(mx, invite.roomId, dmUserId);
+        await addRoomIdToMDirect(ct, invite.roomId, dmUserId);
       }
       onNavigate(invite.roomId, invite.isSpace);
-    }, [mx, invite, userId, onNavigate])
+    }, [ct, invite, onNavigate])
   );
-  const [leaveState, leave] = useAsyncCallback<Record<string, never>, MatrixError, []>(
-    useCallback(() => mx.leave(invite.roomId), [mx, invite])
+  const [leaveState, leave] = useAsyncCallback<void, unknown, []>(
+    useCallback(async () => {
+      const resp = await ct.requestAuthJSON(postLeave({ pathParams: { roomId: invite.roomId } }));
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
+      deleteInviteRooms(ct, [invite.roomId]);
+    }, [ct, invite])
   );
 
   const joining =
@@ -271,12 +206,12 @@ function InviteCard({
             </Box>
             {joinState.status === AsyncStatus.Error && (
               <Text size="T200" style={{ color: color.Critical.Main }}>
-                {joinState.error.message}
+                {joinState.error instanceof Error ? joinState.error.message : 'Unknown Error'}
               </Text>
             )}
             {leaveState.status === AsyncStatus.Error && (
               <Text size="T200" style={{ color: color.Critical.Main }}>
-                {leaveState.error.message}
+                {leaveState.error instanceof Error ? leaveState.error.message : 'Unkonwn Error'}
               </Text>
             )}
           </Box>
@@ -473,14 +408,19 @@ function UnknownInvites({
   hour24Clock,
   dateFormatString,
 }: UnknownInvitesProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
   const [declineAllStatus, declineAll] = useAsyncCallback(
     useCallback(async () => {
       const roomIds = invites.map((invite) => invite.roomId);
 
-      await rateLimitedActions(roomIds, (roomId) => mx.leave(roomId));
-    }, [mx, invites])
+      await rateLimitedActions(roomIds, async (roomId) => {
+        const resp = await ct.requestAuthJSON(postLeave({ pathParams: { roomId } }));
+        const [err] = await parseMatrixResp(resp);
+        if (!err) deleteInviteRooms(ct, [roomId]);
+        return err;
+      });
+    }, [ct, invites])
   );
 
   const declining = declineAllStatus.status === AsyncStatus.Loading;
@@ -546,7 +486,7 @@ function SpamInvites({
   hour24Clock,
   dateFormatString,
 }: SpamInvitesProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const [showInvites, setShowInvites] = useState(false);
 
   const reportRoomSupported = useReportRoomSupported();
@@ -555,16 +495,27 @@ function SpamInvites({
     useCallback(async () => {
       const roomIds = invites.map((invite) => invite.roomId);
 
-      await rateLimitedActions(roomIds, (roomId) => mx.leave(roomId));
-    }, [mx, invites])
+      await rateLimitedActions(roomIds, async (roomId) => {
+        const resp = await ct.requestAuthJSON(postLeave({ pathParams: { roomId } }));
+        const [err] = await parseMatrixResp(resp);
+        if (!err) deleteInviteRooms(ct, [roomId]);
+        return err;
+      });
+    }, [ct, invites])
   );
 
   const [reportAllStatus, reportAll] = useAsyncCallback(
     useCallback(async () => {
       const roomIds = invites.map((invite) => invite.roomId);
 
-      await rateLimitedActions(roomIds, (roomId) => mx.reportRoom(roomId, 'Spam Invite'));
-    }, [mx, invites])
+      await rateLimitedActions(roomIds, async (roomId) => {
+        const resp = await ct.requestAuthJSON(
+          postReport({ pathParams: { roomId }, body: { reason: 'Spam Invite' } })
+        );
+        const [err] = await parseMatrixResp(resp);
+        return err;
+      });
+    }, [ct, invites])
   );
 
   const ignoredUsers = useIgnoredUsers();
@@ -572,10 +523,16 @@ function SpamInvites({
     (user) => !ignoredUsers.includes(user)
   );
   const [blockAllStatus, blockAll] = useAsyncCallback(
-    useCallback(
-      () => mx.setIgnoredUsers([...ignoredUsers, ...unignoredUsers]),
-      [mx, ignoredUsers, unignoredUsers]
-    )
+    useCallback(async () => {
+      const resp = await ct.requestAuthJSON(
+        putAccountData({
+          pathParams: { userId: ct.session.userId, type: AccountDataType.IgnoredUserList },
+          body: getIgnoredUsersContent([...ignoredUsers, ...unignoredUsers]),
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) throw new Error(err.data.error ?? err.data.errcode);
+    }, [ct, ignoredUsers, unignoredUsers])
   );
 
   const declining = declineAllStatus.status === AsyncStatus.Loading;
@@ -692,30 +649,48 @@ function SpamInvites({
 }
 
 export function Invites() {
-  const mx = useMatrixClient();
-  const useAuthentication = useMediaAuthentication();
+  const ct = useClient();
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const allRooms = useAtomValue(allRoomsAtom);
-  const allInviteIds = useAtomValue(allInvitesAtom);
 
   const [filter, setFilter] = useState(InviteFilter.Known);
 
-  const invitesData = allInviteIds
-    .map((inviteId) => mx.getRoom(inviteId))
-    .filter((inviteRoom) => !!inviteRoom)
-    .map((inviteRoom) => makeInviteData(mx, inviteRoom, useAuthentication));
+  const invitesDataResult = useInviteRooms();
+  const invitesData = invitesDataResult.value;
+
+  const senderMembersPromise = useMemo(() => {
+    const inviteSenders = Array.from(new Set(invitesData?.map((i) => i.senderId) ?? []));
+    const keys = allRooms.flatMap((rId) =>
+      inviteSenders.map((sId) => getJoinRoomMemberId(rId, sId))
+    );
+
+    return ct.storage.joinRoomMember.observableRead.getMultiple(keys);
+  }, [ct, allRooms, invitesData]);
+  const senderMemberResult = useObservableValuePromise(senderMembersPromise);
 
   const [knownInvites, unknownInvites, spamInvites] = useMemo(() => {
     const known: InviteData[] = [];
     const unknown: InviteData[] = [];
     const spam: InviteData[] = [];
-    invitesData.forEach((invite) => {
-      if (hasBadWords(invite) || bannedInRooms(mx, allRooms, invite.senderId)) {
+    const senderMembers =
+      senderMemberResult.value?.filter((m): m is JoinRoomMemberObject => !!m) ?? [];
+
+    invitesData?.forEach((invite) => {
+      const senderMemberEvents = senderMembers.filter((m) => m.userId === invite.senderId);
+      const banned = senderMemberEvents.some(
+        (memberObj) => ObjectReader.string(memberObj.event.content, 'membership') === Membership.Ban
+      );
+
+      if (hasBadWords(invite) || banned) {
         spam.push(invite);
         return;
       }
 
-      if (getCommonRooms(mx, allRooms, invite.senderId).length === 0) {
+      const common = senderMemberEvents.some(
+        (memberObj) =>
+          ObjectReader.string(memberObj.event.content, 'membership') === Membership.Join
+      );
+      if (!common) {
         unknown.push(invite);
         return;
       }
@@ -724,7 +699,7 @@ export function Invites() {
     });
 
     return [known, unknown, spam];
-  }, [mx, allRooms, invitesData]);
+  }, [invitesData, senderMemberResult]);
 
   const containerRef = useRef<HTMLDivElement>(null);
   const [compact, setCompact] = useState(document.body.clientWidth <= COMPACT_CARD_WIDTH);
diff --git a/src/app/pages/client/sidebar/InboxTab.tsx b/src/app/pages/client/sidebar/InboxTab.tsx
index 5d13a9ab..a3b7e6f6 100644
--- a/src/app/pages/client/sidebar/InboxTab.tsx
+++ b/src/app/pages/client/sidebar/InboxTab.tsx
@@ -8,7 +8,6 @@ import {
   SidebarItemBadge,
   SidebarItemTooltip,
 } from '../../../components/sidebar';
-import { allInvitesAtom } from '../../../state/room-list/inviteList';
 import {
   getInboxInvitesPath,
   getInboxNotificationsPath,
@@ -19,13 +18,16 @@ import { useInboxSelected } from '../../../hooks/router/useInbox';
 import { UnreadBadge } from '../../../components/unread-badge';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
+import { useObservableValue } from '../../../hooks/useObservableValue';
+import { useClient } from '../../../hooks/useClient';
 
 export function InboxTab() {
+  const ct = useClient();
   const screenSize = useScreenSizeContext();
   const navigate = useNavigate();
   const navToActivePath = useAtomValue(useNavToActivePathAtom());
   const inboxSelected = useInboxSelected();
-  const allInvites = useAtomValue(allInvitesAtom);
+  const allInvites = useObservableValue(ct.rooms.invite);
   const inviteCount = allInvites.length;
 
   const handleInboxClick = () => {
diff --git a/src/app/state/hooks/inviteList.ts b/src/app/state/hooks/inviteList.ts
deleted file mode 100644
index 5e003fb1..00000000
--- a/src/app/state/hooks/inviteList.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import { useAtomValue } from 'jotai';
-import { selectAtom } from 'jotai/utils';
-import { MatrixClient } from 'matrix-js-sdk';
-import { useCallback } from 'react';
-import { isDirectInvite, isRoom, isSpace, isUnsupportedRoom } from '../../utils/room';
-import { compareRoomsEqual } from '../room-list/utils';
-import { allInvitesAtom } from '../room-list/inviteList';
-
-export const useSpaceInvites = (mx: MatrixClient, invitesAtom: typeof allInvitesAtom) => {
-  const selector = useCallback(
-    (rooms: string[]) => rooms.filter((roomId) => isSpace(mx.getRoom(roomId))),
-    [mx]
-  );
-  return useAtomValue(selectAtom(invitesAtom, selector, compareRoomsEqual));
-};
-
-export const useRoomInvites = (
-  mx: MatrixClient,
-  invitesAtom: typeof allInvitesAtom,
-  mDirects: Set<string>
-) => {
-  const selector = useCallback(
-    (rooms: string[]) =>
-      rooms.filter(
-        (roomId) =>
-          isRoom(mx.getRoom(roomId)) &&
-          !(mDirects.has(roomId) || isDirectInvite(mx.getRoom(roomId), mx.getUserId()))
-      ),
-    [mx, mDirects]
-  );
-  return useAtomValue(selectAtom(invitesAtom, selector, compareRoomsEqual));
-};
-
-export const useDirectInvites = (
-  mx: MatrixClient,
-  invitesAtom: typeof allInvitesAtom,
-  mDirects: Set<string>
-) => {
-  const selector = useCallback(
-    (rooms: string[]) =>
-      rooms.filter(
-        (roomId) => mDirects.has(roomId) || isDirectInvite(mx.getRoom(roomId), mx.getUserId())
-      ),
-    [mx, mDirects]
-  );
-  return useAtomValue(selectAtom(invitesAtom, selector, compareRoomsEqual));
-};
-
-export const useUnsupportedInvites = (mx: MatrixClient, invitesAtom: typeof allInvitesAtom) => {
-  const selector = useCallback(
-    (rooms: string[]) => rooms.filter((roomId) => isUnsupportedRoom(mx.getRoom(roomId))),
-    [mx]
-  );
-  return useAtomValue(selectAtom(invitesAtom, selector, compareRoomsEqual));
-};
diff --git a/src/app/state/hooks/useBindAtoms.ts b/src/app/state/hooks/useBindAtoms.ts
index eed9e68c..c6a95449 100644
--- a/src/app/state/hooks/useBindAtoms.ts
+++ b/src/app/state/hooks/useBindAtoms.ts
@@ -1,4 +1,3 @@
-import { allInvitesAtom, useBindAllInvitesAtom } from '../room-list/inviteList';
 import { allRoomsAtom, useBindAllRoomsAtom } from '../room-list/roomList';
 import { mDirectAtom, useBindMDirectAtom } from '../mDirectList';
 import { roomToParentsAtom, useBindRoomToParentsAtom } from '../room/roomToParents';
@@ -12,7 +11,6 @@ import { unreadRoomsAtom, useBindUnreadRoomsAtom } from '../room/roomToUnread';
 
 export const useBindAtoms = (ct: ClientContext) => {
   useBindMDirectAtom(ct, mDirectAtom);
-  useBindAllInvitesAtom(ct, allInvitesAtom);
   useBindAllRoomsAtom(ct, allRoomsAtom);
   useBindRoomToParentsAtom(ct, roomToParentsAtom);
   useBindRoomToNotificationsAtom(ct, roomToNotificationsAtom);
diff --git a/src/app/state/room-list/inviteList.ts b/src/app/state/room-list/inviteList.ts
deleted file mode 100644
index 0b41f8dc..00000000
--- a/src/app/state/room-list/inviteList.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-import { atom, useSetAtom } from 'jotai';
-import { useEffect } from 'react';
-import { ClientContext } from '../../../client/context';
-
-export const allInvitesAtom = atom<string[]>([]);
-
-export const useBindAllInvitesAtom = (ct: ClientContext, allRooms: typeof allInvitesAtom) => {
-  const setRoomsAtom = useSetAtom(allRooms);
-
-  useEffect(() => {
-    setRoomsAtom(ct.rooms.invite.read);
-
-    const unsubscribe = ct.rooms.invite.subscribe((rooms) => {
-      setRoomsAtom(rooms);
-    });
-
-    return unsubscribe;
-  }, [ct, setRoomsAtom]);
-};
diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts
index 9057dcfd..3a2ef6e1 100644
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -63,14 +63,6 @@ export const getMDirects = (mDirectEvent: MatrixEvent): Set<string> => {
   return roomIds;
 };
 
-export const isDirectInvite = (room: Room | null, myUserId: string | null): boolean => {
-  if (!room || !myUserId) return false;
-  const me = room.getMember(myUserId);
-  const memberEvent = me?.events?.member;
-  const content = memberEvent?.getContent();
-  return content?.is_direct === true;
-};
-
 export const isSpace = (room: Room | null): boolean => {
   if (!room) return false;
   const event = getStateEvent(room, StateEvent.RoomCreate);
@@ -576,35 +568,6 @@ export const getMentionContent = (userIds: string[], room: boolean): MentionsCon
   return mMentions;
 };
 
-export const getCommonRooms = (
-  mx: MatrixClient,
-  rooms: string[],
-  otherUserId: string
-): string[] => {
-  const commonRooms: string[] = [];
-
-  rooms.forEach((roomId) => {
-    const room = mx.getRoom(roomId);
-    if (!room || room.getMyMembership() !== Membership.Join) return;
-
-    const common = room.hasMembershipState(otherUserId, Membership.Join);
-    if (common) {
-      commonRooms.push(roomId);
-    }
-  });
-
-  return commonRooms;
-};
-
-export const bannedInRooms = (mx: MatrixClient, rooms: string[], otherUserId: string): boolean =>
-  rooms.some((roomId) => {
-    const room = mx.getRoom(roomId);
-    if (!room || room.getMyMembership() !== Membership.Join) return false;
-
-    const banned = room.hasMembershipState(otherUserId, Membership.Ban);
-    return banned;
-  });
-
 export const guessPerfectParent = (
   roomId: string,
   parents: string[],

From 17011b3739bf12f381d75988330f04f063e90129 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 28 Jul 2026 23:06:05 +0530
Subject: [PATCH 050/158] upgrade typescript to v6

---
 package-lock.json                             | 32 +++----------------
 package.json                                  |  2 +-
 .../settings/emojis-stickers/GlobalPacks.tsx  |  7 ++--
 src/app/hooks/useImagePacks.ts                |  4 +--
 src/app/hooks/useRoomAliases.ts               |  2 +-
 src/app/pages/client/inbox/Invites.tsx        |  3 +-
 src/client/reader/message/Mentions.ts         |  4 +--
 .../room/local-event/LocalEventOutbox.ts      |  2 +-
 tsconfig.json                                 | 18 +++++++----
 9 files changed, 25 insertions(+), 49 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 1368756c..7d588927 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -97,7 +97,7 @@
         "husky": "9.1.7",
         "lint-staged": "16.3.2",
         "prettier": "2.8.1",
-        "typescript": "4.9.4",
+        "typescript": "6.0.3",
         "vite": "5.4.19",
         "vite-plugin-pwa": "0.20.5",
         "vite-plugin-static-copy": "1.0.4",
@@ -10135,28 +10135,6 @@
         "node": ">=22.0.0"
       }
     },
-    "node_modules/matrix-js-sdk/node_modules/@matrix-org/matrix-sdk-crypto-wasm": {
-      "version": "15.3.0",
-      "resolved": "https://registry.npmjs.org/@matrix-org/matrix-sdk-crypto-wasm/-/matrix-sdk-crypto-wasm-15.3.0.tgz",
-      "integrity": "sha512-QyxHvncvkl7nf+tnn92PjQ54gMNV8hMSpiukiDgNrqF6IYwgySTlcSdkPYdw8QjZJ0NR6fnVrNzMec0OohM3wA==",
-      "license": "Apache-2.0",
-      "engines": {
-        "node": ">= 18"
-      }
-    },
-    "node_modules/matrix-js-sdk/node_modules/uuid": {
-      "version": "11.1.0",
-      "resolved": "https://registry.npmjs.org/uuid/-/uuid-11.1.0.tgz",
-      "integrity": "sha512-0/A9rDy9P7cJ+8w1c9WD9V//9Wj15Ce2MPz8Ri6032usz+NfePxx5AcN3bN+r6ZL6jEo066/yNYB3tn4pQEx+A==",
-      "funding": [
-        "https://github.com/sponsors/broofa",
-        "https://github.com/sponsors/ctavan"
-      ],
-      "license": "MIT",
-      "bin": {
-        "uuid": "dist/esm/bin/uuid"
-      }
-    },
     "node_modules/matrix-widget-api": {
       "version": "1.16.1",
       "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.16.1.tgz",
@@ -12648,9 +12626,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.9.4",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.9.4.tgz",
-      "integrity": "sha512-Uz+dTXYzxXXbsFpM86Wh3dKCxrQqUcVMxwU54orwlJjOpO3ao8L7j5lH+dWfTwgCwIuM9GQ2kvVotzYJMXTBZg==",
+      "version": "6.0.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-6.0.3.tgz",
+      "integrity": "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw==",
       "dev": true,
       "license": "Apache-2.0",
       "bin": {
@@ -12658,7 +12636,7 @@
         "tsserver": "bin/tsserver"
       },
       "engines": {
-        "node": ">=4.2.0"
+        "node": ">=14.17"
       }
     },
     "node_modules/ua-parser-js": {
diff --git a/package.json b/package.json
index 371938ae..d0da1dae 100644
--- a/package.json
+++ b/package.json
@@ -121,7 +121,7 @@
     "husky": "9.1.7",
     "lint-staged": "16.3.2",
     "prettier": "2.8.1",
-    "typescript": "4.9.4",
+    "typescript": "6.0.3",
     "vite": "5.4.19",
     "vite-plugin-pwa": "0.20.5",
     "vite-plugin-static-copy": "1.0.4",
diff --git a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
index 8d84c89f..5f5670f0 100644
--- a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
+++ b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
@@ -59,10 +59,7 @@ function GlobalPackSelector({
   const ct = useClient();
 
   const imagePackRooms = useMemo(
-    () =>
-      packs
-        .map((pack) => pack.address?.roomId)
-        .filter((rId): rId is string => typeof rId === 'string'),
+    () => packs.map((pack) => pack.address?.roomId).filter((rId) => typeof rId === 'string'),
     [packs]
   );
   const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(imagePackRooms);
@@ -153,7 +150,7 @@ function GlobalPackSelector({
 
               const roomPackAddresses = roomPacks
                 .map((pack) => pack.address)
-                .filter((addr): addr is PackAddress => addr !== undefined);
+                .filter((addr) => addr !== undefined);
 
               const allSelected = roomPackAddresses.every((addr) =>
                 selected.find((address) => packAddressEqual(addr, address))
diff --git a/src/app/hooks/useImagePacks.ts b/src/app/hooks/useImagePacks.ts
index 91a701f2..6f3d52fc 100644
--- a/src/app/hooks/useImagePacks.ts
+++ b/src/app/hooks/useImagePacks.ts
@@ -65,7 +65,7 @@ export const useGlobalImagePacks = (): PendingObservableResult<ImagePack[]> => {
     useCallback(
       (roomPackEvents) =>
         roomPackEvents
-          .filter((p): p is JoinRoomStateObject => !!p)
+          .filter((p) => !!p)
           .map((packEvent) => ImagePack.fromStateEvent(packEvent.roomId, packEvent.event)),
       []
     )
@@ -150,7 +150,7 @@ export const useRoomsImagePacks = (rooms: string[]): PendingObservableResult<Ima
     useCallback(
       (roomPackEvents) =>
         roomPackEvents
-          .filter((p): p is JoinRoomStateObject => !!p)
+          .filter((p) => !!p)
           .map((roomPackEvent) =>
             ImagePack.fromStateEvent(roomPackEvent.roomId, roomPackEvent.event)
           ),
diff --git a/src/app/hooks/useRoomAliases.ts b/src/app/hooks/useRoomAliases.ts
index 115cd132..91130724 100644
--- a/src/app/hooks/useRoomAliases.ts
+++ b/src/app/hooks/useRoomAliases.ts
@@ -16,7 +16,7 @@ export const usePublishedAliases = (roomId: string): [string | undefined, string
 
   const alias = ObjectReader.string(content, 'alias');
   const altAliases = ObjectReader.array(content, 'alt_aliases')?.filter(
-    (a): a is string => typeof a === 'string'
+    (a) => typeof a === 'string'
   );
 
   const publishedAliases = useMemo(() => {
diff --git a/src/app/pages/client/inbox/Invites.tsx b/src/app/pages/client/inbox/Invites.tsx
index c7b1d9e6..1c92bb56 100644
--- a/src/app/pages/client/inbox/Invites.tsx
+++ b/src/app/pages/client/inbox/Invites.tsx
@@ -672,8 +672,7 @@ export function Invites() {
     const known: InviteData[] = [];
     const unknown: InviteData[] = [];
     const spam: InviteData[] = [];
-    const senderMembers =
-      senderMemberResult.value?.filter((m): m is JoinRoomMemberObject => !!m) ?? [];
+    const senderMembers = senderMemberResult.value?.filter((m) => !!m) ?? [];
 
     invitesData?.forEach((invite) => {
       const senderMemberEvents = senderMembers.filter((m) => m.userId === invite.senderId);
diff --git a/src/client/reader/message/Mentions.ts b/src/client/reader/message/Mentions.ts
index c66d403d..a5289ae9 100644
--- a/src/client/reader/message/Mentions.ts
+++ b/src/client/reader/message/Mentions.ts
@@ -2,9 +2,7 @@ import { ObjectReader } from 'neurone/lib/utils';
 
 export class rMentions {
   static userIds(mentions?: object): string[] | undefined {
-    return ObjectReader.array(mentions, 'user_ids')?.filter(
-      (id): id is string => typeof id === 'string'
-    );
+    return ObjectReader.array(mentions, 'user_ids')?.filter((id) => typeof id === 'string');
   }
 
   static room(mentions?: object): boolean | undefined {
diff --git a/src/client/room/local-event/LocalEventOutbox.ts b/src/client/room/local-event/LocalEventOutbox.ts
index 89a0fa99..0e2c67ca 100644
--- a/src/client/room/local-event/LocalEventOutbox.ts
+++ b/src/client/room/local-event/LocalEventOutbox.ts
@@ -48,6 +48,6 @@ export class LocalEventOutbox {
   public getSentEventIds(): string[] {
     return this.items
       .map((s) => (s.state.read instanceof EventSenderSuccess ? s.state.read.eventId : undefined))
-      .filter<string>((eId): eId is string => typeof eId === 'string');
+      .filter<string>((eId) => typeof eId === 'string');
   }
 }
diff --git a/tsconfig.json b/tsconfig.json
index 7608e557..ea2b1810 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,17 +1,21 @@
 {
   "compilerOptions": {
-    "sourceMap": true,
+    "rootDir": "./src",
+    "outDir": "./dist",
+
+    "target": "ES2022",
+    "module": "ES2022",
+    "lib": ["ES2022", "DOM"],
+
     "jsx": "react",
-    "target": "ES2016",
-    "module": "ES2020",
+    "moduleResolution": "bundler",
+
+    "sourceMap": true,
     "allowJs": true,
     "strict": true,
     "esModuleInterop": true,
-    "moduleResolution": "Node",
     "resolveJsonModule": true,
-    "outDir": "dist",
-    "skipLibCheck": true,
-    "lib": ["ES2016", "DOM"]
+    "skipLibCheck": true
   },
   "exclude": ["node_modules", "dist"],
   "include": ["src"]

From c4b36b9064fb316b50cd90a84bdf8dde552d3c38 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 29 Jul 2026 09:00:27 +0530
Subject: [PATCH 051/158] =?UTF-8?q?=E2=80=B8fix=20editor=20crash=20with=20?=
 =?UTF-8?q?opened=20thread=20room=20switch?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/components/editor/Editor.tsx          | 22 +++++++++----------
 src/app/features/room/RoomInput.tsx           | 10 +++------
 src/app/features/room/hooks/useSendMessage.ts |  2 +-
 .../thread-selector/ThreadSelector.tsx        |  1 -
 src/app/state/room/roomInputDrafts.ts         |  2 +-
 5 files changed, 15 insertions(+), 22 deletions(-)

diff --git a/src/app/components/editor/Editor.tsx b/src/app/components/editor/Editor.tsx
index bd848dd5..b869f247 100644
--- a/src/app/components/editor/Editor.tsx
+++ b/src/app/components/editor/Editor.tsx
@@ -20,17 +20,9 @@ import {
 import { withHistory } from 'slate-history';
 import { BlockType } from './types';
 import { RenderElement, RenderLeaf } from './Elements';
-import { CustomElement } from './slate';
 import * as css from './Editor.css';
 import { toggleKeyboardShortcut } from './keyboard';
 
-const initialValue: CustomElement[] = [
-  {
-    type: BlockType.Paragraph,
-    children: [{ text: '' }],
-  },
-];
-
 const withInline = (editor: Editor): Editor => {
   const { isInline } = editor;
 
@@ -59,13 +51,13 @@ export const useEditor = (): Editor => {
 
 export type EditorChangeHandler = (value: Descendant[]) => void;
 type CustomEditorProps = {
-  editableName?: string;
   top?: ReactNode;
   bottom?: ReactNode;
   before?: ReactNode;
   after?: ReactNode;
   maxHeight?: string;
   editor: Editor;
+  initialValue?: Descendant[];
   placeholder?: string;
   onKeyDown?: KeyboardEventHandler;
   onKeyUp?: KeyboardEventHandler;
@@ -75,13 +67,13 @@ type CustomEditorProps = {
 export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
   (
     {
-      editableName,
       top,
       bottom,
       before,
       after,
       maxHeight = '50vh',
       editor,
+      initialValue,
       placeholder,
       onKeyDown,
       onKeyUp,
@@ -90,6 +82,13 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
     },
     ref
   ) => {
+    const [defaultValue] = useState<Descendant[]>(() => [
+      {
+        type: BlockType.Paragraph,
+        children: [{ text: '' }],
+      },
+    ]);
+
     const renderElement = useCallback(
       (props: RenderElementProps) => <RenderElement {...props} />,
       []
@@ -120,7 +119,7 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
 
     return (
       <div className={css.Editor} ref={ref}>
-        <Slate editor={editor} initialValue={initialValue} onChange={onChange}>
+        <Slate editor={editor} initialValue={initialValue ?? defaultValue} onChange={onChange}>
           {top}
           <Box alignItems="Start">
             {before && (
@@ -137,7 +136,6 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
               hideTrack
             >
               <Editable
-                data-editable-name={editableName}
                 className={css.EditorTextarea}
                 placeholder={placeholder}
                 renderPlaceholder={renderPlaceholder}
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 8aaabf71..d1b8354a 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -10,7 +10,7 @@ import React, {
 import { useAtom } from 'jotai';
 import { isKeyHotkey } from 'is-hotkey';
 import { ReactEditor } from 'slate-react';
-import { Transforms, Editor } from 'slate';
+import { Editor } from 'slate';
 import { Box, Checkbox, Icon, IconButton, Icons, Line, PopOut, Scroll, Text, config } from 'folds';
 
 import {
@@ -148,17 +148,13 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
       useCallback((width) => setHideStickerBtn(width < 500), [])
     );
 
-    useEffect(() => {
-      Transforms.insertFragment(editor, draft);
-    }, [editor, draft]);
-
     useEffect(
       () => () => {
         if (!isEmptyEditor(editor)) {
           const parsedDraft = JSON.parse(JSON.stringify(editor.children));
           setDraft(parsedDraft);
         } else {
-          setDraft([]);
+          setDraft(undefined);
         }
         resetEditor(editor);
         resetEditorHistory(editor);
@@ -306,8 +302,8 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
           />
         )}
         <CustomEditor
-          editableName="RoomInput"
           editor={editor}
+          initialValue={draft}
           placeholder="Send a message..."
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
diff --git a/src/app/features/room/hooks/useSendMessage.ts b/src/app/features/room/hooks/useSendMessage.ts
index 5672dfb8..1c3bcea3 100644
--- a/src/app/features/room/hooks/useSendMessage.ts
+++ b/src/app/features/room/hooks/useSendMessage.ts
@@ -203,7 +203,7 @@ export const useSendStickerMessage = (threadId?: string) => {
     const stickerUrl = mxcToHttp(ct.session.baseUrl, mxc, useAuthentication).url();
     if (!stickerUrl) return;
 
-    const info = await getImageInfo(
+    const info = getImageInfo(
       await loadImageElement(stickerUrl),
       await getImageUrlBlob(stickerUrl)
     );
diff --git a/src/app/features/room/message/thread-selector/ThreadSelector.tsx b/src/app/features/room/message/thread-selector/ThreadSelector.tsx
index 41bbc9b0..693612f2 100644
--- a/src/app/features/room/message/thread-selector/ThreadSelector.tsx
+++ b/src/app/features/room/message/thread-selector/ThreadSelector.tsx
@@ -63,7 +63,6 @@ export function ThreadSelector({
                 hour24Clock={hour24Clock}
                 dateFormatString={dateFormatString}
                 ts={latestEvent.origin_server_ts}
-                inheritPriority
               />
             </Text>
             <Icon size="100" src={Icons.ChevronRight} />
diff --git a/src/app/state/room/roomInputDrafts.ts b/src/app/state/room/roomInputDrafts.ts
index f4d57415..13f9b489 100644
--- a/src/app/state/room/roomInputDrafts.ts
+++ b/src/app/state/room/roomInputDrafts.ts
@@ -34,7 +34,7 @@ export type RoomIdToMsgAction =
       roomId: string;
     };
 
-const createDraftAtom = () => atom<Descendant[]>([]);
+const createDraftAtom = () => atom<Descendant[] | undefined>(undefined);
 export type DraftAtom = ReturnType<typeof createDraftAtom>;
 export const composerToDraftAtom = atomFamily<string, DraftAtom>(() => createDraftAtom());
 

From 5cbc88fbdbad18fdb391bf65e5588c7477a9bd13 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 2 Aug 2026 11:36:30 +0530
Subject: [PATCH 052/158] receive verification request

---
 src/app/components/DeviceVerification.tsx | 131 +++++++++++-----------
 src/app/hooks/useVerificationRequest.ts   |  88 +--------------
 src/client/SyncResponseManager.ts         |  33 ++++--
 src/client/context.ts                     |  19 +++-
 src/client/initialize.ts                  |  14 ++-
 5 files changed, 121 insertions(+), 164 deletions(-)

diff --git a/src/app/components/DeviceVerification.tsx b/src/app/components/DeviceVerification.tsx
index d2502ccf..8e3641fd 100644
--- a/src/app/components/DeviceVerification.tsx
+++ b/src/app/components/DeviceVerification.tsx
@@ -1,11 +1,4 @@
-import {
-  ShowSasCallbacks,
-  VerificationPhase,
-  VerificationRequest,
-  Verifier,
-} from 'matrix-js-sdk/lib/crypto-api';
 import React, { CSSProperties, useCallback, useEffect, useState } from 'react';
-import { VerificationMethod } from 'matrix-js-sdk/lib/types';
 import {
   Box,
   Button,
@@ -23,13 +16,24 @@ import {
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
 import {
-  useVerificationRequestPhase,
-  useVerificationRequestReceived,
-  useVerifierCancel,
-  useVerifierShowSas,
-} from '../hooks/useVerificationRequest';
+  CancelableVerificationStage,
+  CancelVerificationStage,
+  DoneVerificationStage,
+  InboundRequestStage,
+  InboundVerification,
+  OutboundRequestStage,
+  OutboundVerification,
+  ReadyVerificationStage,
+  SasAcceptStage,
+  SasCancelState,
+  SasMethod,
+  SasStartStage,
+  StartVerificationStage,
+} from 'neurone/lib/crypto/machine/verification';
+import { useVerificationRequestReceived } from '../hooks/useVerificationRequest';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { ContainerColor } from '../styles/ContainerColor.css';
+import { useObservableValue } from '../hooks/useObservableValue';
 
 const DialogHeaderStyles: CSSProperties = {
   padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
@@ -70,10 +74,12 @@ function VerificationWaitAccept() {
 }
 
 type VerificationAcceptProps = {
-  onAccept: () => Promise<void>;
+  stage: InboundRequestStage;
 };
-function VerificationAccept({ onAccept }: VerificationAcceptProps) {
-  const [acceptState, accept] = useAsyncCallback(onAccept);
+function VerificationAccept({ stage }: VerificationAcceptProps) {
+  const [acceptState, accept] = useAsyncCallback(
+    useCallback(() => stage.ready(['m.sas.v1']), [stage])
+  );
 
   const accepting = acceptState.status === AsyncStatus.Loading;
   return (
@@ -102,12 +108,12 @@ function VerificationWaitStart() {
 }
 
 type VerificationStartProps = {
-  onStart: () => Promise<void>;
+  stage: ReadyVerificationStage;
 };
-function AutoVerificationStart({ onStart }: VerificationStartProps) {
+function AutoVerificationStart({ stage }: VerificationStartProps) {
   useEffect(() => {
-    onStart();
-  }, [onStart]);
+    stage.startSas();
+  }, [stage]);
 
   return (
     <Box direction="Column" gap="400">
@@ -116,8 +122,8 @@ function AutoVerificationStart({ onStart }: VerificationStartProps) {
   );
 }
 
-function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
-  const [confirmState, confirm] = useAsyncCallback(useCallback(() => sasData.confirm(), [sasData]));
+function CompareEmoji({ stage }: { stage: SasAcceptStage }) {
+  const [confirmState, confirm] = useAsyncCallback(useCallback(() => stage.match(), [stage]));
 
   const confirming =
     confirmState.status === AsyncStatus.Loading || confirmState.status === AsyncStatus.Success;
@@ -135,17 +141,17 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
         wrap="Wrap"
         justifyContent="Center"
       >
-        {sasData.sas.emoji?.map(([emoji, name], index) => (
+        {stage.emoji?.map((emoji, index) => (
           <Box
             // eslint-disable-next-line react/no-array-index-key
-            key={`${emoji}${name}${index}`}
+            key={`${emoji.description}${index}`}
             direction="Column"
             gap="100"
             justifyContent="Center"
             alignItems="Center"
           >
-            <Text size="H1">{emoji}</Text>
-            <Text size="T200">{name}</Text>
+            <Text size="H1">{emoji.emoji}</Text>
+            <Text size="T200">{emoji.description}</Text>
           </Box>
         ))}
       </Box>
@@ -162,7 +168,7 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
         <Button
           variant="Primary"
           fill="Soft"
-          onClick={() => sasData.mismatch()}
+          onClick={() => stage.mismatch()}
           disabled={confirming}
         >
           <Text size="B400">Do not Match</Text>
@@ -173,21 +179,23 @@ function CompareEmoji({ sasData }: { sasData: ShowSasCallbacks }) {
 }
 
 type SasVerificationProps = {
-  verifier: Verifier;
+  sas: SasMethod;
   onCancel: () => void;
 };
-function SasVerification({ verifier, onCancel }: SasVerificationProps) {
-  const [sasData, setSasData] = useState<ShowSasCallbacks>();
-
-  useVerifierShowSas(verifier, setSasData);
-  useVerifierCancel(verifier, onCancel);
+function SasVerification({ sas, onCancel }: SasVerificationProps) {
+  const stage = useObservableValue(sas.stage);
 
   useEffect(() => {
-    verifier.verify();
-  }, [verifier]);
+    if (stage instanceof SasStartStage) {
+      stage.accept();
+    }
+    if (stage instanceof SasCancelState) {
+      onCancel();
+    }
+  }, [stage, onCancel]);
 
-  if (sasData) {
-    return <CompareEmoji sasData={sasData} />;
+  if (stage instanceof SasAcceptStage && stage.emoji) {
+    return <CompareEmoji stage={stage} />;
   }
 
   return (
@@ -214,12 +222,13 @@ function VerificationDone({ onExit }: VerificationDoneProps) {
 }
 
 type VerificationCanceledProps = {
+  stage: CancelVerificationStage;
   onClose: () => void;
 };
-function VerificationCanceled({ onClose }: VerificationCanceledProps) {
+function VerificationCanceled({ stage, onClose }: VerificationCanceledProps) {
   return (
     <Box direction="Column" gap="400">
-      <Text>Verification has been canceled.</Text>
+      <Text>Verification has been canceled. {stage.reason}</Text>
       <Button variant="Secondary" fill="Soft" onClick={onClose}>
         <Text size="B400">Close</Text>
       </Button>
@@ -228,23 +237,18 @@ function VerificationCanceled({ onClose }: VerificationCanceledProps) {
 }
 
 type DeviceVerificationProps = {
-  request: VerificationRequest;
+  request: InboundVerification | OutboundVerification;
   onExit: () => void;
 };
 export function DeviceVerification({ request, onExit }: DeviceVerificationProps) {
-  const phase = useVerificationRequestPhase(request);
+  const stage = useObservableValue(request.stage);
 
   const handleCancel = useCallback(() => {
-    if (request.phase !== VerificationPhase.Done && request.phase !== VerificationPhase.Cancelled) {
-      request.cancel();
+    if (stage instanceof CancelableVerificationStage) {
+      stage.cancel();
     }
     onExit();
-  }, [request, onExit]);
-
-  const handleAccept = useCallback(() => request.accept(), [request]);
-  const handleStart = useCallback(async () => {
-    await request.startVerification(VerificationMethod.Sas);
-  }, [request]);
+  }, [stage, onExit]);
 
   return (
     <Overlay open backdrop={<OverlayBackdrop />}>
@@ -266,30 +270,27 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
               </IconButton>
             </Header>
             <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-              {phase === VerificationPhase.Requested &&
-                (request.initiatedByMe ? (
-                  <VerificationWaitAccept />
-                ) : (
-                  <VerificationAccept onAccept={handleAccept} />
-                ))}
-              {phase === VerificationPhase.Ready &&
-                (request.initiatedByMe ? (
-                  <AutoVerificationStart onStart={handleStart} />
+              {stage instanceof InboundRequestStage && <VerificationAccept stage={stage} />}
+              {stage instanceof OutboundRequestStage && <VerificationWaitAccept />}
+              {stage instanceof ReadyVerificationStage &&
+                (request instanceof OutboundRequestStage ? (
+                  <AutoVerificationStart stage={stage} />
                 ) : (
                   <VerificationWaitStart />
                 ))}
-              {phase === VerificationPhase.Started &&
-                (request.verifier ? (
-                  <SasVerification verifier={request.verifier} onCancel={handleCancel} />
+              {stage instanceof StartVerificationStage &&
+                (stage.method ? (
+                  <SasVerification sas={stage.method} onCancel={handleCancel} />
                 ) : (
                   <VerificationUnexpected
                     message="Unexpected Error! Verification is started but verifier is missing."
                     onClose={handleCancel}
                   />
                 ))}
-              {phase === VerificationPhase.Done && <VerificationDone onExit={onExit} />}
-              {phase === VerificationPhase.Cancelled && (
-                <VerificationCanceled onClose={handleCancel} />
+
+              {stage instanceof DoneVerificationStage && <VerificationDone onExit={onExit} />}
+              {stage instanceof CancelVerificationStage && (
+                <VerificationCanceled stage={stage} onClose={handleCancel} />
               )}
             </Box>
           </Dialog>
@@ -300,7 +301,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
 }
 
 export function ReceiveSelfDeviceVerification() {
-  const [request, setRequest] = useState<VerificationRequest>();
+  const [request, setRequest] = useState<InboundVerification | OutboundVerification>();
 
   useVerificationRequestReceived(setRequest);
 
@@ -310,7 +311,7 @@ export function ReceiveSelfDeviceVerification() {
 
   if (!request) return null;
 
-  if (!request.isSelfVerification) {
+  if (!request.selfVerification) {
     return null;
   }
 
diff --git a/src/app/hooks/useVerificationRequest.ts b/src/app/hooks/useVerificationRequest.ts
index 5feb5232..f1e0a98a 100644
--- a/src/app/hooks/useVerificationRequest.ts
+++ b/src/app/hooks/useVerificationRequest.ts
@@ -1,87 +1,11 @@
-import { useCallback, useEffect, useState } from 'react';
-import {
-  CryptoEvent,
-  CryptoEventHandlerMap,
-  VerificationPhase,
-  VerificationRequest,
-  VerificationRequestEvent,
-  VerificationRequestEventHandlerMap,
-  Verifier,
-  VerifierEvent,
-  VerifierEventHandlerMap,
-} from 'matrix-js-sdk/lib/crypto-api';
-import { useMatrixClient } from './useMatrixClient';
+import { useEffect } from 'react';
+import { InboundVerification, OutboundVerification } from 'neurone/lib/crypto/machine/verification';
+import { useClient } from './useClient';
 
 export const useVerificationRequestReceived = (
-  onRequest: CryptoEventHandlerMap[CryptoEvent.VerificationRequestReceived]
+  onRequest: (request: OutboundVerification | InboundVerification) => void
 ) => {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
-  useEffect(() => {
-    mx.on(CryptoEvent.VerificationRequestReceived, onRequest);
-    return () => {
-      mx.removeListener(CryptoEvent.VerificationRequestReceived, onRequest);
-    };
-  }, [mx, onRequest]);
-};
-
-export const useVerificationRequestChange = (
-  request: VerificationRequest,
-  onChange: VerificationRequestEventHandlerMap[VerificationRequestEvent.Change]
-) => {
-  useEffect(() => {
-    request.on(VerificationRequestEvent.Change, onChange);
-    return () => {
-      request.removeListener(VerificationRequestEvent.Change, onChange);
-    };
-  }, [request, onChange]);
-};
-
-export const useVerificationRequestPhase = (request: VerificationRequest): VerificationPhase => {
-  const [phase, setPhase] = useState(() => request.phase);
-
-  useVerificationRequestChange(
-    request,
-    useCallback(() => {
-      setPhase(request.phase);
-    }, [request])
-  );
-
-  return phase;
-};
-
-export const useVerifierCancel = (
-  verifier: Verifier,
-  onCallback: VerifierEventHandlerMap[VerifierEvent.Cancel]
-) => {
-  useEffect(() => {
-    verifier.on(VerifierEvent.Cancel, onCallback);
-    return () => {
-      verifier.removeListener(VerifierEvent.Cancel, onCallback);
-    };
-  }, [verifier, onCallback]);
-};
-
-export const useVerifierShowSas = (
-  verifier: Verifier,
-  onCallback: VerifierEventHandlerMap[VerifierEvent.ShowSas]
-) => {
-  useEffect(() => {
-    verifier.on(VerifierEvent.ShowSas, onCallback);
-    return () => {
-      verifier.removeListener(VerifierEvent.ShowSas, onCallback);
-    };
-  }, [verifier, onCallback]);
-};
-
-export const useVerifierShowReciprocateQr = (
-  verifier: Verifier,
-  onCallback: VerifierEventHandlerMap[VerifierEvent.ShowReciprocateQr]
-) => {
-  useEffect(() => {
-    verifier.on(VerifierEvent.ShowReciprocateQr, onCallback);
-    return () => {
-      verifier.removeListener(VerifierEvent.ShowReciprocateQr, onCallback);
-    };
-  }, [verifier, onCallback]);
+  useEffect(() => ct.verificationRequest.subscribe(onRequest), [ct, onRequest]);
 };
diff --git a/src/client/SyncResponseManager.ts b/src/client/SyncResponseManager.ts
index 232c24f7..60654454 100644
--- a/src/client/SyncResponseManager.ts
+++ b/src/client/SyncResponseManager.ts
@@ -2,8 +2,10 @@ import { GetSyncOK, JoinRoom } from 'neurone/lib/api/matrix/client/v3/sync';
 import { ObservableValue } from 'neurone/lib/utils/observable';
 import { EncryptionSyncChanges } from 'neurone/lib/crypto/machine';
 import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { ToDeviceDecrypted, ToDevicePlainText } from 'neurone/lib/crypto/machine/events';
 import { roomState } from 'neurone/lib/utils/sync/v3/join';
 import { ObjectReader } from 'neurone/lib/utils';
+import { InboundVerification, OutboundVerification } from 'neurone/lib/crypto/machine/verification';
 import to from 'await-to-js';
 import { ClientContext } from './context';
 import { writeSync } from './syncWriter';
@@ -11,6 +13,12 @@ import { sessionValue } from './storage/collections';
 import { syncLatestEvent } from './syncLatestEvent';
 import { SyncValue } from './sync';
 
+export type SyncResponseManagerCallbacks = {
+  onWriteComplete: () => void;
+  onSyncToken: (token: string) => void;
+  onVerificationRequest: (verificationFlow: OutboundVerification | InboundVerification) => void;
+};
+
 export class SyncResponseManager implements Disposable {
   private firstSync = true;
 
@@ -18,22 +26,18 @@ export class SyncResponseManager implements Disposable {
 
   private readonly syncTokenObservable: ObservableValue<string | undefined>;
 
-  private readonly onWriteComplete: () => void;
-
-  private readonly onSyncToken: (token: string) => void;
+  private readonly callbacks: SyncResponseManagerCallbacks;
 
   private readonly disposer = new Disposer();
 
   constructor(
     ct: ClientContext,
     syncTokenObservable: ObservableValue<string | undefined>,
-    onWriteComplete: () => void,
-    onSyncToken: (token: string) => void
+    callbacks: SyncResponseManagerCallbacks
   ) {
     this.ct = ct;
     this.syncTokenObservable = syncTokenObservable;
-    this.onWriteComplete = onWriteComplete;
-    this.onSyncToken = onSyncToken;
+    this.callbacks = callbacks;
 
     this.disposer.collect(
       this.syncTokenObservable.subscribe(this.handleSyncToken.bind(this)),
@@ -48,7 +52,7 @@ export class SyncResponseManager implements Disposable {
       // after syncLatestEvent completes to prevent race
       return;
     }
-    this.onSyncToken(sinceToken);
+    this.callbacks.onSyncToken(sinceToken);
   };
 
   private async handleSync(syncValue: SyncValue) {
@@ -70,7 +74,14 @@ export class SyncResponseManager implements Disposable {
       unusedFallbackKeys: data.device_unused_fallback_key_types,
     };
 
-    await this.ct.machine.syncChanges.receive(encryptionChanges);
+    const proccessedToDeviceEvents = await this.ct.machine.syncChanges.receive(encryptionChanges);
+    proccessedToDeviceEvents
+      .filter((e) => e instanceof ToDeviceDecrypted || e instanceof ToDevicePlainText)
+      .forEach((proccessedEvent) => {
+        this.ct.machine.verificationManager.receiveToDeviceEvent(proccessedEvent.event, (v) =>
+          this.callbacks.onVerificationRequest(v)
+        );
+      });
     // TODO: room key bundle detection from to device events;
 
     const encryptedRooms = this.filterEncryptedRoomResponse(data.rooms?.join ?? {});
@@ -81,7 +92,7 @@ export class SyncResponseManager implements Disposable {
   }
 
   private async afterWrite(nextBatch: string) {
-    this.onWriteComplete();
+    this.callbacks.onWriteComplete();
 
     await this.ct.machine.outgoingRequests.processAll();
 
@@ -95,7 +106,7 @@ export class SyncResponseManager implements Disposable {
       const [err] = await to(syncLatestEvent(this.ct, currentSyncToken));
       if (err) console.error(err);
       this.firstSync = false;
-      this.onSyncToken(nextBatch);
+      this.callbacks.onSyncToken(nextBatch);
     }
   }
 
diff --git a/src/client/context.ts b/src/client/context.ts
index 45a1fd14..96aeefc4 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -1,8 +1,9 @@
-import { ComputedObservableValue, ObservableValue } from 'neurone/lib/utils/observable';
+import { ComputedObservableValue, Observable, ObservableValue } from 'neurone/lib/utils/observable';
 import { MatrixRequest } from 'neurone/lib/matrix-request';
 import { HistoryVisibility, Machine } from 'neurone/lib/crypto/machine';
 import { ObjectReader } from 'neurone/lib/utils';
 import { Disposer } from 'neurone/lib/utils/disposable';
+import { InboundVerification, OutboundVerification } from 'neurone/lib/crypto/machine/verification';
 import {
   MessageEventWithoutRoomId,
   RoomSummary,
@@ -103,6 +104,7 @@ export type ClientContext = {
   roomToTimeline: ObservableValue<Map<string, Timeline>>;
 
   pendingMemberRooms: ObservableValue<string[]>;
+  verificationRequest: Observable<InboundVerification | OutboundVerification>;
   sync: SyncContext;
   requestAuthJSON: MatrixRequest;
   getTxnId: GetTxnId;
@@ -878,3 +880,18 @@ export const createPendingMemberRoomObservable = async (
   disposer.collect(pendingMemberRoomsObj, pendingMemberRoomsObservable);
   return pendingMemberRoomsObservable;
 };
+
+export const createVerificationRequestObservable = () => {
+  const publishKey = crypto.randomUUID();
+  const verificationRequest = new Observable<InboundVerification | OutboundVerification>(
+    publishKey
+  );
+  const onVerificationRequest = (v: InboundVerification | OutboundVerification) => {
+    verificationRequest.publish(publishKey, v);
+  };
+
+  return {
+    verificationRequest,
+    onVerificationRequest,
+  };
+};
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index e9b6ba48..91e6a276 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -22,6 +22,7 @@ import {
   createSpaceMapping,
   createStateContext,
   createSyncTokenObservable,
+  createVerificationRequestObservable,
 } from './context';
 import { createStorage } from './storage';
 import { getAuthJSONRequest } from './request';
@@ -69,6 +70,8 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
   const syncTokenObservable = await createSyncTokenObservable(storage, disposer);
   const pendingMemberRooms = await createPendingMemberRoomObservable(storage, disposer);
 
+  const { verificationRequest, onVerificationRequest } = createVerificationRequestObservable();
+
   const getTxnId: GetTxnId = getTxnIdFunc();
 
   const [syncObservable, sync] = createSync(requestAuthJSON);
@@ -125,6 +128,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     roomToTimeline,
 
     pendingMemberRooms,
+    verificationRequest,
     sync: {
       observable: syncObservable,
       controller: syncController,
@@ -137,12 +141,11 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
 
   const machineManager = new MachineManager(ct);
 
-  const syncResponseManager = new SyncResponseManager(
-    ct,
-    syncTokenObservable,
+  const syncResponseManager = new SyncResponseManager(ct, syncTokenObservable, {
     onWriteComplete,
-    onSyncToken
-  );
+    onSyncToken,
+    onVerificationRequest,
+  });
 
   disposer.collect(
     decryption,
@@ -152,6 +155,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     logoutObservable,
     logoutManager,
     machineManager,
+    verificationRequest,
     syncResponseManager
   );
 

From 144777220941ea508fbf79b57a6296e4f08b59f2 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 5 Aug 2026 12:06:01 +0530
Subject: [PATCH 053/158] move device verification and megolm backup to new sdk

---
 src/app/components/ActionUIA.tsx              |  30 +-
 src/app/components/BackupRestore.tsx          | 321 ++++++++----------
 .../components/DeviceVerificationStatus.ts    |   5 +-
 src/app/components/LogoutDialog.tsx           |  16 +-
 src/app/components/ManualVerification.tsx     |  71 ++--
 src/app/components/RenderMessageContent.tsx   |   5 -
 src/app/components/SecretStorage.tsx          |  71 ++--
 src/app/components/message/Reply.tsx          |  38 ++-
 src/app/features/room/RoomTimeline.tsx        |  83 ++---
 .../features/settings/devices/DeviceTile.tsx  |  78 ++---
 src/app/features/settings/devices/Devices.tsx |  56 ++-
 .../settings/devices/OtherDevices.tsx         |  55 +--
 .../settings/devices/Verification.tsx         |  48 +--
 src/app/hooks/useCrossSigning.ts              |  65 +++-
 src/app/hooks/useDeviceList.ts                |  50 +--
 src/app/hooks/useDeviceVerificationStatus.ts  |  59 ++--
 src/app/hooks/useKeyBackup.ts                 | 160 ---------
 .../hooks/useRestoreBackupOnVerification.ts   |  24 --
 src/app/hooks/useSecretStorage.ts             |  27 +-
 src/app/hooks/useUIAFlows.ts                  |   4 +-
 src/app/pages/Router.tsx                      |   4 +-
 src/app/pages/client/SidebarNav.tsx           |   2 +-
 .../pages/client/sidebar/UnverifiedTab.tsx    |  25 +-
 src/app/state/backupRestore.ts                |  70 ----
 src/app/utils/matrix-crypto.ts                |  14 -
 src/client/MegolmBackup.ts                    | 211 ++++++++++++
 src/client/context.ts                         | 122 ++++++-
 src/client/decryption/DecryptionManager.ts    |  12 +-
 src/client/initialize.ts                      |  10 +
 src/types/matrix/accountData.ts               |   8 +-
 30 files changed, 928 insertions(+), 816 deletions(-)
 delete mode 100644 src/app/hooks/useKeyBackup.ts
 delete mode 100644 src/app/hooks/useRestoreBackupOnVerification.ts
 delete mode 100644 src/app/state/backupRestore.ts
 delete mode 100644 src/app/utils/matrix-crypto.ts
 create mode 100644 src/client/MegolmBackup.ts

diff --git a/src/app/components/ActionUIA.tsx b/src/app/components/ActionUIA.tsx
index b9cd122f..cced4f2f 100644
--- a/src/app/components/ActionUIA.tsx
+++ b/src/app/components/ActionUIA.tsx
@@ -1,33 +1,33 @@
 import React, { ReactNode } from 'react';
-import { AuthDict, AuthType, IAuthData, UIAFlow } from 'matrix-js-sdk';
-import { getUIAFlowForStages } from '../utils/matrix-uia';
+import { AuthResponse, AuthType, UIAFlow } from '../utils/matrix-uia';
 import { useSupportedUIAFlows, useUIACompleted, useUIAFlow } from '../hooks/useUIAFlows';
 import { UIAFlowOverlay } from './UIAFlowOverlay';
 import { PasswordStage, SSOStage } from './uia-stages';
-import { useMatrixClient } from '../hooks/useMatrixClient';
+import { useClient } from '../hooks/useClient';
 
 export const SUPPORTED_IN_APP_UIA_STAGES = [AuthType.Password, AuthType.Sso];
 
-export const pickUIAFlow = (uiaFlows: UIAFlow[]): UIAFlow | undefined => {
-  const passwordFlow = getUIAFlowForStages(uiaFlows, [AuthType.Password]);
-  if (passwordFlow) return passwordFlow;
-  return getUIAFlowForStages(uiaFlows, [AuthType.Sso]);
-};
-
 type ActionUIAProps = {
-  authData: IAuthData;
+  authData: AuthResponse;
   ongoingFlow: UIAFlow;
-  action: (authDict: AuthDict) => void;
+  action: (authDict: object) => void;
   onCancel: () => void;
 };
 export function ActionUIA({ authData, ongoingFlow, action, onCancel }: ActionUIAProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const completed = useUIACompleted(authData);
   const { getStageToComplete } = useUIAFlow(authData, ongoingFlow);
 
   const stageToComplete = getStageToComplete();
 
   if (!stageToComplete) return null;
+
+  const ssoRedirectURL = new URL(`/auth/${AuthType.Sso}/fallback/web`, ct.session.baseUrl);
+
+  if (stageToComplete.session) {
+    ssoRedirectURL.searchParams.set('session', stageToComplete.session);
+  }
+
   return (
     <UIAFlowOverlay
       currentStep={completed.length + 1}
@@ -36,7 +36,7 @@ export function ActionUIA({ authData, ongoingFlow, action, onCancel }: ActionUIA
     >
       {stageToComplete.type === AuthType.Password && (
         <PasswordStage
-          userId={mx.getUserId()!}
+          userId={ct.session.userId}
           stageData={stageToComplete}
           onCancel={onCancel}
           submitAuthDict={action}
@@ -44,7 +44,7 @@ export function ActionUIA({ authData, ongoingFlow, action, onCancel }: ActionUIA
       )}
       {stageToComplete.type === AuthType.Sso && stageToComplete.session && (
         <SSOStage
-          ssoRedirectURL={mx.getFallbackAuthUrl(AuthType.Sso, stageToComplete.session)}
+          ssoRedirectURL={ssoRedirectURL.toString()}
           stageData={stageToComplete}
           onCancel={onCancel}
           submitAuthDict={action}
@@ -55,7 +55,7 @@ export function ActionUIA({ authData, ongoingFlow, action, onCancel }: ActionUIA
 }
 
 type ActionUIAFlowsLoaderProps = {
-  authData: IAuthData;
+  authData: AuthResponse;
   unsupported: () => ReactNode;
   children: (ongoingFlow: UIAFlow) => ReactNode;
 };
diff --git a/src/app/components/BackupRestore.tsx b/src/app/components/BackupRestore.tsx
index 068f437b..bd6289a3 100644
--- a/src/app/components/BackupRestore.tsx
+++ b/src/app/components/BackupRestore.tsx
@@ -1,6 +1,4 @@
 import React, { MouseEventHandler, useCallback, useState } from 'react';
-import { useAtom } from 'jotai';
-import { CryptoApi, KeyBackupInfo } from 'matrix-js-sdk/lib/crypto-api';
 import {
   Badge,
   Box,
@@ -19,130 +17,113 @@ import {
   Text,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { BackupProgressStatus, backupRestoreProgressAtom } from '../state/backupRestore';
 import { InfoCard } from './info-card';
-import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import {
-  useKeyBackupInfo,
-  useKeyBackupStatus,
-  useKeyBackupSync,
-  useKeyBackupTrust,
-} from '../hooks/useKeyBackup';
 import { stopPropagation } from '../utils/keyboard';
-import { useRestoreBackupOnVerification } from '../hooks/useRestoreBackupOnVerification';
+import { bytesToSize } from '../utils/common';
+import { useObservableValue } from '../hooks/useObservableValue';
+import { useClient } from '../hooks/useClient';
+import { AsyncStatus, useAsyncCallbackValue } from '../hooks/useAsyncCallback';
 
 type BackupStatusProps = {
-  enabled: boolean;
+  active: boolean;
 };
-function BackupStatus({ enabled }: BackupStatusProps) {
+function BackupStatus({ active }: BackupStatusProps) {
   return (
     <Box as="span" gap="100" alignItems="Center">
-      <Badge variant={enabled ? 'Success' : 'Critical'} fill="Solid" size="200" radii="Pill" />
+      <Badge variant={active ? 'Success' : 'Critical'} fill="Solid" size="200" radii="Pill" />
       <Text
         as="span"
         size="L400"
-        style={{ color: enabled ? color.Success.Main : color.Critical.Main }}
+        style={{ color: active ? color.Success.Main : color.Critical.Main }}
       >
-        {enabled ? 'Connected' : 'Disconnected'}
+        {active ? 'Connected' : 'Disconnected'}
       </Text>
     </Box>
   );
 }
-type BackupSyncingProps = {
-  count: number;
-};
-function BackupSyncing({ count }: BackupSyncingProps) {
+
+function BackupSyncing() {
+  const ct = useClient();
+  const [countState] = useAsyncCallbackValue(useCallback(() => ct.machine.roomKeys.count(), [ct]));
+
+  const count = countState.status === AsyncStatus.Success ? countState.data : undefined;
+
+  const remaining = count ? count.total - count.backedUp : undefined;
+
   return (
     <Box as="span" gap="100" alignItems="Center">
       <Spinner size="50" variant="Primary" fill="Soft" />
       <Text as="span" size="L400" style={{ color: color.Primary.Main }}>
-        Syncing ({count})
+        Syncing ({remaining ?? '...'})
       </Text>
     </Box>
   );
 }
 
-function BackupProgressFetching() {
+function BackupProgressFetching({
+  receivedBytes,
+  totalBytes,
+}: {
+  receivedBytes: number;
+  totalBytes?: number;
+}) {
+  const receviedStr = bytesToSize(receivedBytes);
+  const totalStr = totalBytes ? bytesToSize(totalBytes) : undefined;
+
   return (
     <Box grow="Yes" gap="200" alignItems="Center">
       <Badge variant="Secondary" fill="Solid" radii="300">
-        <Text size="L400">Restoring: 0%</Text>
+        <Text size="L400">Downloading</Text>
       </Badge>
       <Box grow="Yes" direction="Column">
-        <ProgressBar variant="Secondary" size="300" min={0} max={1} value={0} />
+        <ProgressBar
+          variant="Secondary"
+          size="300"
+          min={0}
+          max={totalBytes}
+          value={receivedBytes}
+        />
       </Box>
-      <Spinner size="50" variant="Secondary" fill="Soft" />
+      <Badge variant="Secondary" fill="Soft" radii="Pill">
+        <Text size="L400">{totalStr ? `${receivedBytes} / ${totalStr}` : receviedStr}</Text>
+      </Badge>
     </Box>
   );
 }
 
 type BackupProgressProps = {
-  total: number;
-  downloaded: number;
+  total?: number;
+  imported: number;
 };
-function BackupProgress({ total, downloaded }: BackupProgressProps) {
+function BackupProgress({ total, imported }: BackupProgressProps) {
   return (
     <Box grow="Yes" gap="200" alignItems="Center">
       <Badge variant="Secondary" fill="Solid" radii="300">
-        <Text size="L400">Restoring: {`${Math.round(percent(0, total, downloaded))}%`}</Text>
+        <Text size="L400">
+          Restoring: {total ? `${Math.round(percent(0, total, imported))}%` : '0%'}
+        </Text>
       </Badge>
       <Box grow="Yes" direction="Column">
-        <ProgressBar variant="Secondary" size="300" min={0} max={total} value={downloaded} />
+        <ProgressBar variant="Secondary" size="300" min={0} max={total} value={imported} />
       </Box>
-      <Badge variant="Secondary" fill="Soft" radii="Pill">
-        <Text size="L400">
-          {downloaded} / {total}
-        </Text>
-      </Badge>
-    </Box>
-  );
-}
-
-type BackupTrustInfoProps = {
-  crypto: CryptoApi;
-  backupInfo: KeyBackupInfo;
-};
-function BackupTrustInfo({ crypto, backupInfo }: BackupTrustInfoProps) {
-  const trust = useKeyBackupTrust(crypto, backupInfo);
-
-  if (!trust) return null;
-
-  return (
-    <Box direction="Column">
-      {trust.matchesDecryptionKey ? (
-        <Text size="T200" style={{ color: color.Success.Main }}>
-          <b>Backup has trusted decryption key.</b>
-        </Text>
-      ) : (
-        <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>Backup does not have trusted decryption key!</b>
-        </Text>
-      )}
-      {trust.trusted ? (
-        <Text size="T200" style={{ color: color.Success.Main }}>
-          <b>Backup has trusted by signature.</b>
-        </Text>
-      ) : (
-        <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>Backup does not have trusted signature!</b>
-        </Text>
+      {total && (
+        <Badge variant="Secondary" fill="Soft" radii="Pill">
+          <Text size="L400">
+            {imported} / {total}
+          </Text>
+        </Badge>
       )}
     </Box>
   );
 }
 
-type BackupRestoreTileProps = {
-  crypto: CryptoApi;
-};
-export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
-  const [restoreProgress, setRestoreProgress] = useAtom(backupRestoreProgressAtom);
-  const restoring =
-    restoreProgress.status === BackupProgressStatus.Fetching ||
-    restoreProgress.status === BackupProgressStatus.Loading;
-
-  const backupEnabled = useKeyBackupStatus(crypto);
-  const backupInfo = useKeyBackupInfo(crypto);
-  const [remainingSession, syncFailure] = useKeyBackupSync();
+export function BackupRestoreTile() {
+  const ct = useClient();
+  const backupInfo = useObservableValue(ct.backupInfo);
+  const keyBackup = useObservableValue(ct.megolmBackup.keyBackup);
+  const restoreState = useObservableValue(ct.megolmBackup.restoreState);
+  const backupInProgress = useObservableValue(ct.megolmBackup.backupInProgress);
+  const restoring = restoreState.type === 'download' || restoreState.type === 'import';
 
   const [menuCords, setMenuCords] = useState<RectCords>();
 
@@ -150,19 +131,11 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
     setMenuCords(evt.currentTarget.getBoundingClientRect());
   };
 
-  const [restoreState, restoreBackup] = useAsyncCallback<void, Error, []>(
-    useCallback(async () => {
-      await crypto.restoreKeyBackup({
-        progressCallback(progress) {
-          setRestoreProgress(progress);
-        },
-      });
-    }, [crypto, setRestoreProgress])
-  );
-
   const handleRestore = () => {
     setMenuCords(undefined);
-    restoreBackup();
+    if (keyBackup) {
+      ct.megolmBackup.restore(keyBackup);
+    }
   };
 
   return (
@@ -171,111 +144,99 @@ export function BackupRestoreTile({ crypto }: BackupRestoreTileProps) {
       title="Encryption Backup"
       after={
         <Box alignItems="Center" gap="200">
-          {remainingSession === 0 ? (
-            <BackupStatus enabled={backupEnabled} />
-          ) : (
-            <BackupSyncing count={remainingSession} />
-          )}
-          <IconButton
-            aria-pressed={!!menuCords}
-            size="300"
-            variant="Surface"
-            radii="300"
-            onClick={handleMenu}
-          >
-            <Icon size="100" src={Icons.VerticalDots} />
-          </IconButton>
-          <PopOut
-            anchor={menuCords}
-            offset={5}
-            position="Bottom"
-            align="End"
-            content={
-              <FocusTrap
-                focusTrapOptions={{
-                  initialFocus: false,
-                  onDeactivate: () => setMenuCords(undefined),
-                  clickOutsideDeactivates: true,
-                  isKeyForward: (evt: KeyboardEvent) =>
-                    evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
-                  isKeyBackward: (evt: KeyboardEvent) =>
-                    evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
-                  escapeDeactivates: stopPropagation,
-                }}
+          {backupInfo && (
+            <>
+              {backupInProgress ? <BackupSyncing /> : <BackupStatus active={!!keyBackup} />}
+              <IconButton
+                aria-pressed={!!menuCords}
+                size="300"
+                variant="Surface"
+                radii="300"
+                onClick={handleMenu}
               >
-                <Menu
-                  style={{
-                    padding: config.space.S100,
-                  }}
-                >
-                  <Box direction="Column" gap="100">
-                    <Box direction="Column" gap="200">
-                      <InfoCard
-                        variant="SurfaceVariant"
-                        title="Backup Details"
-                        description={
-                          <>
-                            <span>Version: {backupInfo?.version ?? 'NIL'}</span>
-                            <br />
-                            <span>Keys: {backupInfo?.count ?? 'NIL'}</span>
-                          </>
-                        }
-                      />
-                    </Box>
-                    <Button
-                      size="300"
-                      variant="Success"
-                      radii="300"
-                      aria-disabled={restoreState.status === AsyncStatus.Loading || restoring}
-                      onClick={
-                        restoreState.status === AsyncStatus.Loading || restoring
-                          ? undefined
-                          : handleRestore
-                      }
-                      before={<Icon size="100" src={Icons.Download} />}
-                    >
-                      <Text size="B300">Restore Backup</Text>
-                    </Button>
-                  </Box>
-                </Menu>
-              </FocusTrap>
-            }
-          />
+                <Icon size="100" src={Icons.VerticalDots} />
+              </IconButton>
+              <PopOut
+                anchor={menuCords}
+                offset={5}
+                position="Bottom"
+                align="End"
+                content={
+                  <FocusTrap
+                    focusTrapOptions={{
+                      initialFocus: false,
+                      onDeactivate: () => setMenuCords(undefined),
+                      clickOutsideDeactivates: true,
+                      isKeyForward: (evt: KeyboardEvent) =>
+                        evt.key === 'ArrowDown' || evt.key === 'ArrowRight',
+                      isKeyBackward: (evt: KeyboardEvent) =>
+                        evt.key === 'ArrowUp' || evt.key === 'ArrowLeft',
+                      escapeDeactivates: stopPropagation,
+                    }}
+                  >
+                    <Menu style={{ padding: config.space.S100 }}>
+                      <Box direction="Column" gap="100">
+                        <Box direction="Column" gap="200">
+                          <InfoCard
+                            variant="SurfaceVariant"
+                            title="Backup Details"
+                            description={
+                              <>
+                                <span>Version: {backupInfo.version}</span>
+                                <br />
+                                <span>Keys: {backupInfo.count}</span>
+                              </>
+                            }
+                          />
+                        </Box>
+                        <Button
+                          size="300"
+                          variant="Success"
+                          radii="300"
+                          aria-disabled={!keyBackup || restoring}
+                          onClick={restoring ? undefined : handleRestore}
+                          before={<Icon size="100" src={Icons.Download} />}
+                        >
+                          <Text size="B300">Restore Backup</Text>
+                        </Button>
+                      </Box>
+                    </Menu>
+                  </FocusTrap>
+                }
+              />
+            </>
+          )}
         </Box>
       }
     >
-      {syncFailure && (
+      {!backupInfo && (
         <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>{syncFailure}</b>
+          <b>No key backup has been configured.</b>
         </Text>
       )}
-      {!backupEnabled && backupInfo === null && (
+
+      {backupInfo && !keyBackup && (
         <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>No backup present on server!</b>
+          <b>Cannot start key backup because the backup could not be verified.</b>
         </Text>
       )}
-      {!syncFailure && !backupEnabled && backupInfo && (
-        <BackupTrustInfo crypto={crypto} backupInfo={backupInfo} />
-      )}
-      {restoreState.status === AsyncStatus.Loading && !restoring && <BackupProgressFetching />}
-      {restoreProgress.status === BackupProgressStatus.Fetching && <BackupProgressFetching />}
-      {restoreProgress.status === BackupProgressStatus.Loading && (
-        <BackupProgress
-          total={restoreProgress.data.total}
-          downloaded={restoreProgress.data.downloaded}
+      {restoreState.type === 'download' && (
+        <BackupProgressFetching
+          receivedBytes={restoreState.receivedBytes}
+          totalBytes={restoreState.totalBytes}
         />
       )}
-      {restoreState.status === AsyncStatus.Error && (
+      {restoreState.type === 'import' && (
+        <BackupProgress
+          imported={restoreState.progress?.imported ?? 0}
+          total={restoreState.progress?.total}
+        />
+      )}
+      {restoreState.type === 'error' && (
         <Text size="T200" style={{ color: color.Critical.Main }}>
-          <b>{restoreState.error.message}</b>
+          <b>{restoreState.error.data.error ?? restoreState.error.data.errcode}</b>
         </Text>
       )}
     </InfoCard>
   );
 }
-
-export function AutoRestoreBackupOnVerification() {
-  useRestoreBackupOnVerification();
-
-  return null;
-}
diff --git a/src/app/components/DeviceVerificationStatus.ts b/src/app/components/DeviceVerificationStatus.ts
index e8a6b0c1..3f168313 100644
--- a/src/app/components/DeviceVerificationStatus.ts
+++ b/src/app/components/DeviceVerificationStatus.ts
@@ -1,24 +1,21 @@
 import { ReactNode } from 'react';
-import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
 import {
   useDeviceVerificationStatus,
   VerificationStatus,
 } from '../hooks/useDeviceVerificationStatus';
 
 type DeviceVerificationStatusProps = {
-  crypto?: CryptoApi;
   userId: string;
   deviceId: string;
   children: (verificationStatus: VerificationStatus) => ReactNode;
 };
 
 export function DeviceVerificationStatus({
-  crypto,
   userId,
   deviceId,
   children,
 }: DeviceVerificationStatusProps) {
-  const status = useDeviceVerificationStatus(crypto, userId, deviceId);
+  const status = useDeviceVerificationStatus(userId, deviceId);
 
   return children(status);
 }
diff --git a/src/app/components/LogoutDialog.tsx b/src/app/components/LogoutDialog.tsx
index 9fd9cdef..42206ead 100644
--- a/src/app/components/LogoutDialog.tsx
+++ b/src/app/components/LogoutDialog.tsx
@@ -2,6 +2,12 @@ import React, { forwardRef, useCallback } from 'react';
 import { Dialog, Header, config, Box, Text, Button, Spinner, color } from 'folds';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
 import { useClient } from '../hooks/useClient';
+import { InfoCard } from './info-card';
+import { useCrossSigning } from '../hooks/useCrossSigning';
+import {
+  useDeviceVerificationStatus,
+  VerificationStatus,
+} from '../hooks/useDeviceVerificationStatus';
 
 type LogoutDialogProps = {
   handleClose: () => void;
@@ -9,6 +15,10 @@ type LogoutDialogProps = {
 export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
   ({ handleClose }, ref) => {
     const ct = useClient();
+    const hasEncryptedRoom = ct.encryptedRooms.read.size > 0;
+    const crossSigning = useCrossSigning();
+
+    const verificationStatus = useDeviceVerificationStatus(ct.session.userId, ct.session.deviceId);
 
     const [logoutState, logout] = useAsyncCallback<void, Error, []>(
       useCallback(async () => {
@@ -33,8 +43,8 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
           </Box>
         </Header>
         <Box style={{ padding: config.space.S400 }} direction="Column" gap="400">
-          {/* {hasEncryptedRoom &&
-            (crossSigningActive ? (
+          {hasEncryptedRoom &&
+            (crossSigning ? (
               verificationStatus === VerificationStatus.Unverified && (
                 <InfoCard
                   variant="Critical"
@@ -48,7 +58,7 @@ export const LogoutDialog = forwardRef<HTMLDivElement, LogoutDialogProps>(
                 title="Alert"
                 description="Enable device verification or export your encrypted data from settings to avoid losing access to your messages."
               />
-            ))} */}
+            ))}
           <Text priority="400">You’re about to log out. Are you sure?</Text>
           {logoutState.status === AsyncStatus.Error && (
             <Text style={{ color: color.Critical.Main }} size="T300">
diff --git a/src/app/components/ManualVerification.tsx b/src/app/components/ManualVerification.tsx
index f7cde92b..fdb8b94d 100644
--- a/src/app/components/ManualVerification.tsx
+++ b/src/app/components/ManualVerification.tsx
@@ -13,13 +13,15 @@ import {
   color,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
+import { AesHmacSha2, AesHmacSha2KeyDescription } from 'neurone/lib/crypto/ssss';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { stopPropagation } from '../utils/keyboard';
 import { SettingTile } from './setting-tile';
-import { SecretStorageKeyContent } from '../../types/matrix/accountData';
 import { SecretStorageRecoveryKey, SecretStorageRecoveryPassphrase } from './SecretStorage';
-import { useMatrixClient } from '../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { storePrivateKey } from '../../client/secretStorageKeys';
+import { useClient } from '../hooks/useClient';
+import { getCrossSigningPrivateKeys, useCrossSigningSecretData } from '../hooks/useCrossSigning';
+import { AccountDataType } from '../../types/matrix/accountData';
 
 export enum ManualVerificationMethod {
   RecoveryPassphrase = 'passphrase',
@@ -112,7 +114,7 @@ export function ManualVerificationMethodSwitcher({
 
 type ManualVerificationTileProps = {
   secretStorageKeyId: string;
-  secretStorageKeyContent: SecretStorageKeyContent;
+  secretStorageKeyContent: AesHmacSha2KeyDescription;
   options?: ReactNode;
 };
 export function ManualVerificationTile({
@@ -120,7 +122,8 @@ export function ManualVerificationTile({
   secretStorageKeyContent,
   options,
 }: ManualVerificationTileProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const csSecretData = useCrossSigningSecretData(secretStorageKeyId);
 
   const hasPassphrase = !!secretStorageKeyContent.passphrase;
   const [method, setMethod] = useState(
@@ -130,25 +133,53 @@ export function ManualVerificationTile({
   );
 
   const verifyAndRestoreBackup = useCallback(
-    async (recoveryKey: Uint8Array) => {
-      const crypto = mx.getCrypto();
-      if (!crypto) {
-        throw new Error('Unexpected Error! Crypto object not found.');
+    async (recoveryKey: Uint8Array<ArrayBuffer>) => {
+      const status = await ct.machine.crossSigning.getStatus();
+      const machineHasKeys = status.master && status.self && status.user;
+
+      if (!machineHasKeys && csSecretData) {
+        const crossSigningKeys = await getCrossSigningPrivateKeys(recoveryKey, csSecretData);
+
+        const s = await ct.machine.crossSigning.importKeys(crossSigningKeys);
+        if (!s.master || !s.self || !s.user) {
+          throw new Error('Failed to import to CrossSigningSecrets keys!');
+        }
       }
 
-      storePrivateKey(secretStorageKeyId, recoveryKey);
+      const { userId, deviceId } = ct.session;
+      const device = await ct.machine.userTracker.getDevice(userId, deviceId);
+      if (device && !device.crossSigningTrusted) {
+        const resp = await device.verify();
+        const [err] = await parseMatrixResp(resp);
+        if (err) {
+          throw new Error(err.data.error ?? 'Failed to verify. Signature upload request failed.');
+        }
 
-      await crypto.bootstrapCrossSigning({});
-      await crypto.bootstrapSecretStorage({});
+        // device.verify uploads signatures to mark device as verifed
+        // query keys to receive signs now instead of update via /sync
+        // if we don't do that device remains unverified until next sync device_list change
+        await ct.machine.outgoingRequests.queryKeys([ct.session.userId]);
+      }
 
-      await crypto.loadSessionBackupPrivateKeyFromSecretStorage();
+      const backupKeyEncryptedData = ct.secrets.megolmBackup.read?.get(secretStorageKeyId);
+      if (!backupKeyEncryptedData) {
+        return;
+      }
+      const backupKey = await AesHmacSha2.decrypt(
+        recoveryKey,
+        AccountDataType.MegolmBackupV1,
+        backupKeyEncryptedData
+      );
+      await ct.megolmBackup.saveDecryptionKey(backupKey);
     },
-    [mx, secretStorageKeyId]
+    [ct, secretStorageKeyId, csSecretData]
   );
 
-  const [verifyState, handleDecodedRecoveryKey] = useAsyncCallback<void, Error, [Uint8Array]>(
-    verifyAndRestoreBackup
-  );
+  const [verifyState, handleDecodedRecoveryKey] = useAsyncCallback<
+    void,
+    Error,
+    [Uint8Array<ArrayBuffer>]
+  >(verifyAndRestoreBackup);
   const verifying = verifyState.status === AsyncStatus.Loading;
 
   return (
@@ -174,7 +205,7 @@ export function ManualVerificationTile({
           {method === ManualVerificationMethod.RecoveryKey && (
             <SecretStorageRecoveryKey
               processing={verifying}
-              keyContent={secretStorageKeyContent}
+              keyDescription={secretStorageKeyContent}
               onDecodedRecoveryKey={handleDecodedRecoveryKey}
             />
           )}
@@ -182,8 +213,8 @@ export function ManualVerificationTile({
             secretStorageKeyContent.passphrase && (
               <SecretStorageRecoveryPassphrase
                 processing={verifying}
-                keyContent={secretStorageKeyContent}
-                passphraseContent={secretStorageKeyContent.passphrase}
+                keyDescription={secretStorageKeyContent}
+                passphraseInfo={secretStorageKeyContent.passphrase}
                 onDecodedRecoveryKey={handleDecodedRecoveryKey}
               />
             )}
diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
index 423fb1ff..3e93b213 100644
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -12,7 +12,6 @@ import {
   MSticker,
   MText,
   MVideo,
-  RedactedContent,
   UnsupportedContent,
 } from './message';
 import { MsgType } from '../../types/matrix/common';
@@ -31,7 +30,6 @@ type RenderMessageContentProps = {
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: Opts;
   outlineAttachment?: boolean;
-  redacted?: boolean;
 };
 export function RenderMessageContent({
   displayName,
@@ -45,10 +43,7 @@ export function RenderMessageContent({
   htmlReactParserOptions,
   linkifyOpts,
   outlineAttachment,
-  redacted,
 }: RenderMessageContentProps) {
-  if (redacted) return <RedactedContent />;
-
   if (eventType === MessageEvent.Sticker) {
     return (
       <MSticker
diff --git a/src/app/components/SecretStorage.tsx b/src/app/components/SecretStorage.tsx
index 9d8628e5..de9a1c6d 100644
--- a/src/app/components/SecretStorage.tsx
+++ b/src/app/components/SecretStorage.tsx
@@ -1,53 +1,51 @@
 import React, { FormEventHandler, useCallback } from 'react';
 import { Box, Text, Button, Spinner, color } from 'folds';
-import { decodeRecoveryKey, deriveRecoveryKeyFromPassphrase } from 'matrix-js-sdk/lib/crypto-api';
-import { PasswordInput } from './password-input';
+import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto-api';
 import {
-  SecretStorageKeyContent,
-  SecretStoragePassphraseContent,
-} from '../../types/matrix/accountData';
+  AesHmacSha2,
+  AesHmacSha2KeyDescription,
+  Passphrase,
+  PassphraseInfo,
+} from 'neurone/lib/crypto/ssss';
+import { PasswordInput } from './password-input';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { useMatrixClient } from '../hooks/useMatrixClient';
 import { useAlive } from '../hooks/useAlive';
 
 type SecretStorageRecoveryPassphraseProps = {
   processing?: boolean;
-  keyContent: SecretStorageKeyContent;
-  passphraseContent: SecretStoragePassphraseContent;
-  onDecodedRecoveryKey: (recoveryKey: Uint8Array) => void;
+  keyDescription: AesHmacSha2KeyDescription;
+  passphraseInfo: PassphraseInfo;
+  onDecodedRecoveryKey: (recoveryKey: Uint8Array<ArrayBuffer>) => void;
 };
 export function SecretStorageRecoveryPassphrase({
   processing,
-  keyContent,
-  passphraseContent,
+  keyDescription,
+  passphraseInfo,
   onDecodedRecoveryKey,
 }: SecretStorageRecoveryPassphraseProps) {
-  const mx = useMatrixClient();
   const alive = useAlive();
 
   const [driveKeyState, submitPassphrase] = useAsyncCallback<
-    Uint8Array,
+    Uint8Array<ArrayBuffer>,
     Error,
-    Parameters<typeof deriveRecoveryKeyFromPassphrase>
+    [passphrase: string]
   >(
     useCallback(
-      async (passphrase, salt, iterations, bits) => {
-        const decodedRecoveryKey = await deriveRecoveryKeyFromPassphrase(
-          passphrase,
-          salt,
-          iterations,
-          bits
+      async (passphrase) => {
+        const decodedRecoveryKey = await Passphrase.derive(passphrase, passphraseInfo);
+
+        const { mac: regeneratedMac } = await AesHmacSha2.driveKeyMetaData(
+          decodedRecoveryKey,
+          keyDescription.iv
         );
 
-        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
-
-        if (!match) {
+        if (regeneratedMac !== keyDescription.mac) {
           throw new Error('Invalid recovery passphrase.');
         }
 
         return decodedRecoveryKey;
       },
-      [mx, keyContent]
+      [keyDescription, passphraseInfo]
     )
   );
 
@@ -64,8 +62,7 @@ export function SecretStorageRecoveryPassphrase({
     const recoveryPassphrase = recoveryPassphraseInput.value.trim();
     if (!recoveryPassphrase) return;
 
-    const { salt, iterations, bits } = passphraseContent;
-    submitPassphrase(recoveryPassphrase, salt, iterations, bits).then((decodedRecoveryKey) => {
+    submitPassphrase(recoveryPassphrase).then((decodedRecoveryKey) => {
       if (alive()) {
         recoveryPassphraseInput.value = '';
         onDecodedRecoveryKey(decodedRecoveryKey);
@@ -115,31 +112,37 @@ export function SecretStorageRecoveryPassphrase({
 
 type SecretStorageRecoveryKeyProps = {
   processing?: boolean;
-  keyContent: SecretStorageKeyContent;
-  onDecodedRecoveryKey: (recoveryKey: Uint8Array) => void;
+  keyDescription: AesHmacSha2KeyDescription;
+  onDecodedRecoveryKey: (recoveryKey: Uint8Array<ArrayBuffer>) => void;
 };
 export function SecretStorageRecoveryKey({
   processing,
-  keyContent,
+  keyDescription,
   onDecodedRecoveryKey,
 }: SecretStorageRecoveryKeyProps) {
-  const mx = useMatrixClient();
   const alive = useAlive();
 
-  const [driveKeyState, submitRecoveryKey] = useAsyncCallback<Uint8Array, Error, [string]>(
+  const [driveKeyState, submitRecoveryKey] = useAsyncCallback<
+    Uint8Array<ArrayBuffer>,
+    Error,
+    [string]
+  >(
     useCallback(
       async (recoveryKey) => {
         const decodedRecoveryKey = decodeRecoveryKey(recoveryKey);
 
-        const match = await mx.secretStorage.checkKey(decodedRecoveryKey, keyContent as any);
+        const { mac: regeneratedMac } = await AesHmacSha2.driveKeyMetaData(
+          decodedRecoveryKey,
+          keyDescription.iv
+        );
 
-        if (!match) {
+        if (regeneratedMac !== keyDescription.mac) {
           throw new Error('Invalid recovery key.');
         }
 
         return decodedRecoveryKey;
       },
-      [mx, keyContent]
+      [keyDescription]
     )
   );
 
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index d0a99a8d..f3bc3c5f 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -16,6 +16,7 @@ import { RenderMessageContent } from '../RenderMessageContent';
 import { Time } from './Time';
 import { BubbleLayout, CompactLayout, MessageBase, ModernLayout } from './layout';
 import { MessageLayout, MessageSpacing } from '../../state/settings';
+import { RedactedContent } from './MsgTypeRenderers';
 
 type ReplyMessageProps = {
   username?: ReactNode;
@@ -118,6 +119,8 @@ export function Reply({
 
   const usernameColor = legacyUsernameColor ? colorMXID(sender ?? eventId) : tagColor;
 
+  const redactedEvent = redacted || !!rUnsigned.redactedBecause(replyEvent?.unsigned);
+
   return (
     <MessageBase space={messageSpacing}>
       <ReplyMessage
@@ -142,23 +145,24 @@ export function Reply({
       >
         {replyEvent !== undefined ? (
           <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }} as="div">
-            {replyEvent === null ? (
-              <Text>
-                <MessageBadEncryptedContent />
-              </Text>
-            ) : (
-              <RenderMessageContent
-                displayName={getMemberName(replyEvent.sender)}
-                eventType={replyEvent.type}
-                ts={replyEvent.origin_server_ts}
-                edited={false}
-                content={replyEvent.content}
-                mediaAutoLoad={mediaAutoLoad}
-                htmlReactParserOptions={htmlReactParserOptions}
-                linkifyOpts={linkifyOpts}
-                redacted={redacted || !!rUnsigned.redactedBecause(replyEvent.unsigned)}
-              />
-            )}
+            {redactedEvent && <RedactedContent />}
+            {!redactedEvent &&
+              (replyEvent === null ? (
+                <Text>
+                  <MessageBadEncryptedContent />
+                </Text>
+              ) : (
+                <RenderMessageContent
+                  displayName={getMemberName(replyEvent.sender)}
+                  eventType={replyEvent.type}
+                  ts={replyEvent.origin_server_ts}
+                  edited={false}
+                  content={replyEvent.content}
+                  mediaAutoLoad={mediaAutoLoad}
+                  htmlReactParserOptions={htmlReactParserOptions}
+                  linkifyOpts={linkifyOpts}
+                />
+              ))}
           </Box>
         ) : (
           <LinePlaceholder
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 057ed0e4..dc4d8432 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -24,6 +24,7 @@ import {
   CompactPlaceholder,
   MessageBase,
   Reply,
+  RedactedContent,
 } from '../../components/message';
 import {
   factoryRenderLinkifyWithMention,
@@ -443,47 +444,47 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
         hour24Clock={hour24Clock}
         dateFormatString={dateFormatString}
       >
-        {(editedEvent ?? event).type === MessageEvent.RoomMessageEncrypted ? (
-          <EncryptedMessageEvent
-            roomId={roomId}
-            decryptionManager={ct.decryption}
-            event={editedEvent ?? event}
-          >
-            {(decryptedEvent) => (
-              <RenderMessageContent
-                displayName={membersAPI.getName(event.sender)}
-                eventType={decryptedEvent.type}
-                ts={event.origin_server_ts}
-                edited={!!editedEvent}
-                content={rContent.newContent(decryptedEvent.content) ?? decryptedEvent.content}
-                mediaAutoLoad={mediaAutoLoad}
-                urlPreview={showUrlPreview}
-                htmlReactParserOptions={htmlReactParserOptions}
-                linkifyOpts={linkifyOpts}
-                outlineAttachment={messageLayout === MessageLayout.Bubble}
-                redacted={redacted.has(event.event_id)}
-              />
-            )}
-          </EncryptedMessageEvent>
-        ) : (
-          <RenderMessageContent
-            displayName={membersAPI.getName(event.sender)}
-            eventType={event.type}
-            ts={event.origin_server_ts}
-            edited={!!editedEvent}
-            content={
-              editedEvent
-                ? rContent.newContent(editedEvent.content) ?? editedEvent.content
-                : event.content
-            }
-            mediaAutoLoad={mediaAutoLoad}
-            urlPreview={showUrlPreview}
-            htmlReactParserOptions={htmlReactParserOptions}
-            linkifyOpts={linkifyOpts}
-            outlineAttachment={messageLayout === MessageLayout.Bubble}
-            redacted={redacted.has(event.event_id)}
-          />
-        )}
+        {redacted.has(event.event_id) && <RedactedContent />}
+        {!redacted.has(event.event_id) &&
+          ((editedEvent ?? event).type === MessageEvent.RoomMessageEncrypted ? (
+            <EncryptedMessageEvent
+              roomId={roomId}
+              decryptionManager={ct.decryption}
+              event={editedEvent ?? event}
+            >
+              {(decryptedEvent) => (
+                <RenderMessageContent
+                  displayName={membersAPI.getName(event.sender)}
+                  eventType={decryptedEvent.type}
+                  ts={event.origin_server_ts}
+                  edited={!!editedEvent}
+                  content={rContent.newContent(decryptedEvent.content) ?? decryptedEvent.content}
+                  mediaAutoLoad={mediaAutoLoad}
+                  urlPreview={showUrlPreview}
+                  htmlReactParserOptions={htmlReactParserOptions}
+                  linkifyOpts={linkifyOpts}
+                  outlineAttachment={messageLayout === MessageLayout.Bubble}
+                />
+              )}
+            </EncryptedMessageEvent>
+          ) : (
+            <RenderMessageContent
+              displayName={membersAPI.getName(event.sender)}
+              eventType={event.type}
+              ts={event.origin_server_ts}
+              edited={!!editedEvent}
+              content={
+                editedEvent
+                  ? rContent.newContent(editedEvent.content) ?? editedEvent.content
+                  : event.content
+              }
+              mediaAutoLoad={mediaAutoLoad}
+              urlPreview={showUrlPreview}
+              htmlReactParserOptions={htmlReactParserOptions}
+              linkifyOpts={linkifyOpts}
+              outlineAttachment={messageLayout === MessageLayout.Bubble}
+            />
+          ))}
         {reactionJSX}
         {threadTimeline && (
           <ThreadSelectorContainer>
diff --git a/src/app/features/settings/devices/DeviceTile.tsx b/src/app/features/settings/devices/DeviceTile.tsx
index 71b684f5..892dadea 100644
--- a/src/app/features/settings/devices/DeviceTile.tsx
+++ b/src/app/features/settings/devices/DeviceTile.tsx
@@ -1,4 +1,4 @@
-import React, { FormEventHandler, ReactNode, useCallback, useEffect, useState } from 'react';
+import React, { FormEventHandler, ReactNode, useCallback, useState } from 'react';
 import {
   Box,
   Text,
@@ -15,11 +15,11 @@ import {
   OverlayBackdrop,
   OverlayCenter,
 } from 'folds';
-import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
 import FocusTrap from 'focus-trap-react';
-import { IMyDevice, MatrixError } from 'matrix-js-sdk';
+import { Device } from 'neurone/lib/api/types';
+import { putDevice } from 'neurone/lib/api/matrix/client/v3/devices';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { SettingTile } from '../../../components/setting-tile';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../../utils/time';
 import { BreakWord } from '../../../styles/Text.css';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -29,6 +29,8 @@ import { LogoutDialog } from '../../../components/LogoutDialog';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
 import { settingsAtom } from '../../../state/settings';
+import { useClient } from '../../../hooks/useClient';
+import { useAlive } from '../../../hooks/useAlive';
 
 export function DeviceTilePlaceholder() {
   return (
@@ -61,7 +63,7 @@ function DeviceActiveTime({ ts }: { ts: number }) {
   );
 }
 
-function DeviceDetails({ device }: { device: IMyDevice }) {
+function DeviceDetails({ device }: { device: Device }) {
   return (
     <>
       {typeof device.device_id === 'string' && (
@@ -78,58 +80,52 @@ function DeviceDetails({ device }: { device: IMyDevice }) {
   );
 }
 
-type DeviceKeyDetailsProps = {
-  crypto: CryptoApi;
-};
-export function DeviceKeyDetails({ crypto }: DeviceKeyDetailsProps) {
-  const [keysState, loadKeys] = useAsyncCallback(
-    useCallback(() => {
-      const keys = crypto.getOwnDeviceKeys();
-      return keys;
-    }, [crypto])
-  );
-
-  useEffect(() => {
-    loadKeys();
-  }, [loadKeys]);
-
-  if (keysState.status === AsyncStatus.Error) return null;
+export function DeviceKeyDetails() {
+  const ct = useClient();
 
   return (
-    <Text className={BreakWord} size="T200" priority="300">
-      Device Key:{' '}
-      <i>{keysState.status === AsyncStatus.Success ? keysState.data.ed25519 : 'loading...'}</i>
-    </Text>
+    <>
+      <Text className={BreakWord} size="T200" priority="300">
+        Encryption Key: <i>{ct.machine.getEncryptionKey()}</i>
+      </Text>
+      <Text className={BreakWord} size="T200" priority="300">
+        Singing Key: <i>{ct.machine.getSigningKey()}</i>
+      </Text>
+    </>
   );
 }
 
 type DeviceRenameProps = {
-  device: IMyDevice;
+  device: Device;
   onCancel: () => void;
   onRename: () => void;
   refreshDeviceList: () => Promise<void>;
 };
 function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceRenameProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const alive = useAlive();
 
-  const [renameState, rename] = useAsyncCallback<void, MatrixError, [string]>(
+  const [renameState, rename] = useAsyncCallback<void, unknown, [string]>(
     useCallback(
       async (name: string) => {
-        await mx.setDeviceDetails(device.device_id, { display_name: name });
+        const resp = await ct.requestAuthJSON(
+          putDevice({
+            pathParams: { deviceId: device.device_id },
+            body: {
+              display_name: name,
+            },
+          })
+        );
+        const [err] = await parseMatrixResp(resp);
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
         await refreshDeviceList();
       },
-      [mx, device.device_id, refreshDeviceList]
+      [ct, device.device_id, refreshDeviceList]
     )
   );
 
   const renaming = renameState.status === AsyncStatus.Loading;
 
-  useEffect(() => {
-    if (renameState.status === AsyncStatus.Success) {
-      onRename();
-    }
-  }, [renameState, onRename]);
-
   const handleSubmit: FormEventHandler<HTMLFormElement> = (evt) => {
     evt.preventDefault();
     if (renaming) return;
@@ -140,7 +136,11 @@ function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceR
     const deviceName = nameInput.value.trim();
     if (!deviceName || deviceName === device.display_name) return;
 
-    rename(deviceName);
+    rename(deviceName).then(() => {
+      if (alive()) {
+        onRename();
+      }
+    });
   };
 
   return (
@@ -186,7 +186,7 @@ function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceR
       </Box>
       {renameState.status === AsyncStatus.Error ? (
         <Text size="T200" style={{ color: color.Critical.Main }}>
-          {renameState.error.message}
+          {renameState.error instanceof Error ? renameState.error.message : 'Unknown Error'}
         </Text>
       ) : (
         <Text size="T200">Device names are visible to public.</Text>
@@ -260,7 +260,7 @@ export function DeviceDeleteBtn({
 }
 
 type DeviceTileProps = {
-  device: IMyDevice;
+  device: Device;
   deleted?: boolean;
   refreshDeviceList: () => Promise<void>;
   disabled?: boolean;
diff --git a/src/app/features/settings/devices/Devices.tsx b/src/app/features/settings/devices/Devices.tsx
index c957ab31..8ebcf361 100644
--- a/src/app/features/settings/devices/Devices.tsx
+++ b/src/app/features/settings/devices/Devices.tsx
@@ -5,10 +5,8 @@ import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useDeviceIds, useDeviceList, useSplitCurrentDevice } from '../../../hooks/useDeviceList';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { LocalBackup } from './LocalBackup';
 import { DeviceLogoutBtn, DeviceKeyDetails, DeviceTile, DeviceTilePlaceholder } from './DeviceTile';
-import { OtherDevices } from './OtherDevices';
 import {
   DeviceVerificationOptions,
   EnableVerification,
@@ -24,8 +22,11 @@ import {
   useSecretStorageDefaultKeyId,
   useSecretStorageKeyContent,
 } from '../../../hooks/useSecretStorage';
-import { useCrossSigningActive } from '../../../hooks/useCrossSigning';
+import { useCrossSigning } from '../../../hooks/useCrossSigning';
 import { BackupRestoreTile } from '../../../components/BackupRestore';
+import { useClient } from '../../../hooks/useClient';
+import { OtherDevices } from './OtherDevices';
+import { useObservableValue } from '../../../hooks/useObservableValue';
 
 function DevicesPlaceholder() {
   return (
@@ -40,24 +41,20 @@ type DevicesProps = {
   requestClose: () => void;
 };
 export function Devices({ requestClose }: DevicesProps) {
-  const mx = useMatrixClient();
-  const crypto = mx.getCrypto();
-  const crossSigningActive = useCrossSigningActive();
+  const ct = useClient();
+  const crossSigning = useCrossSigning();
+  const keyBackup = useObservableValue(ct.megolmBackup.keyBackup);
+
   const [devices, refreshDeviceList] = useDeviceList();
 
   const [currentDevice, otherDevices] = useSplitCurrentDevice(devices);
   const verificationStatus = useDeviceVerificationStatus(
-    crypto,
-    mx.getSafeUserId(),
+    ct.session.userId,
     currentDevice?.device_id
   );
 
   const otherDevicesId = useDeviceIds(otherDevices);
-  const unverifiedDeviceCount = useUnverifiedDeviceCount(
-    crypto,
-    mx.getSafeUserId(),
-    otherDevicesId
-  );
+  const unverifiedDeviceCount = useUnverifiedDeviceCount(ct.session.userId, otherDevicesId);
 
   const defaultSecretStorageKeyId = useSecretStorageDefaultKeyId();
   const defaultSecretStorageKeyContent = useSecretStorageKeyContent(
@@ -96,18 +93,17 @@ export function Devices({ requestClose }: DevicesProps) {
                     title="Device Verification"
                     description="To verify device identity and grant access to encrypted messages."
                     after={
-                      <>
-                        <EnableVerification visible={!crossSigningActive} />
-                        {crossSigningActive && (
-                          <Box gap="200" alignItems="Center">
-                            <VerificationStatusBadge
-                              verificationStatus={verificationStatus}
-                              otherUnverifiedCount={unverifiedDeviceCount}
-                            />
-                            <DeviceVerificationOptions />
-                          </Box>
-                        )}
-                      </>
+                      crossSigning ? (
+                        <Box gap="200" alignItems="Center">
+                          <VerificationStatusBadge
+                            verificationStatus={verificationStatus}
+                            otherUnverifiedCount={unverifiedDeviceCount}
+                          />
+                          <DeviceVerificationOptions />
+                        </Box>
+                      ) : (
+                        <EnableVerification />
+                      )
                     }
                   />
                 </SequenceCard>
@@ -126,9 +122,9 @@ export function Devices({ requestClose }: DevicesProps) {
                       refreshDeviceList={refreshDeviceList}
                       options={<DeviceLogoutBtn />}
                     >
-                      {crypto && <DeviceKeyDetails crypto={crypto} />}
+                      <DeviceKeyDetails />
                     </DeviceTile>
-                    {crossSigningActive &&
+                    {crossSigning &&
                       verificationStatus === VerificationStatus.Unverified &&
                       defaultSecretStorageKeyId &&
                       defaultSecretStorageKeyContent && (
@@ -137,9 +133,7 @@ export function Devices({ requestClose }: DevicesProps) {
                           secretStorageKeyContent={defaultSecretStorageKeyContent}
                         />
                       )}
-                    {crypto && verificationStatus === VerificationStatus.Verified && (
-                      <BackupRestoreTile crypto={crypto} />
-                    )}
+                    {keyBackup && <BackupRestoreTile />}
                   </SequenceCard>
                 ) : (
                   <DeviceTilePlaceholder />
@@ -151,7 +145,7 @@ export function Devices({ requestClose }: DevicesProps) {
                   devices={otherDevices}
                   refreshDeviceList={refreshDeviceList}
                   showVerification={
-                    crossSigningActive && verificationStatus === VerificationStatus.Verified
+                    crossSigning && verificationStatus === VerificationStatus.Verified
                   }
                 />
               )}
diff --git a/src/app/features/settings/devices/OtherDevices.tsx b/src/app/features/settings/devices/OtherDevices.tsx
index 4bd83dd6..8c491a98 100644
--- a/src/app/features/settings/devices/OtherDevices.tsx
+++ b/src/app/features/settings/devices/OtherDevices.tsx
@@ -1,12 +1,13 @@
 import React, { useCallback, useState } from 'react';
 import { Box, Button, config, Menu, Spinner, Text } from 'folds';
-import { AuthDict, IMyDevice, MatrixError } from 'matrix-js-sdk';
+import { MatrixResponseResult, parseMatrixResp } from 'neurone/lib/matrix-request';
+import { Device } from 'neurone/lib/api/types';
+import { postDeleteDevices } from 'neurone/lib/api/matrix/client/v3/deleteDevices';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { ActionUIA, ActionUIAFlowsLoader } from '../../../components/ActionUIA';
 import { DeviceDeleteBtn, DeviceTile } from './DeviceTile';
 import { AsyncState, AsyncStatus, useAsync } from '../../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { useUIAMatrixError } from '../../../hooks/useUIAFlows';
 import { DeviceVerificationStatus } from '../../../components/DeviceVerificationStatus';
 import { VerifyOtherDeviceTile } from './Verification';
@@ -15,15 +16,15 @@ import { useAuthMetadata } from '../../../hooks/useAuthMetadata';
 import { withSearchParam } from '../../../pages/pathUtils';
 import { useAccountManagementActions } from '../../../hooks/useAccountManagement';
 import { SettingTile } from '../../../components/setting-tile';
+import { useClient } from '../../../hooks/useClient';
 
 type OtherDevicesProps = {
-  devices: IMyDevice[];
+  devices: Device[];
   refreshDeviceList: () => Promise<void>;
   showVerification?: boolean;
 };
 export function OtherDevices({ devices, refreshDeviceList, showVerification }: OtherDevicesProps) {
-  const mx = useMatrixClient();
-  const crypto = mx.getCrypto();
+  const ct = useClient();
   const authMetadata = useAuthMetadata();
   const accountManagementActions = useAccountManagementActions();
 
@@ -69,31 +70,40 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
     });
   }, []);
 
-  const [deleteState, setDeleteState] = useState<AsyncState<void, MatrixError>>({
+  const [deleteState, setDeleteState] = useState<
+    AsyncState<MatrixResponseResult<unknown>, unknown>
+  >({
     status: AsyncStatus.Idle,
   });
 
   const deleteDevices = useAsync(
     useCallback(
-      async (authDict?: AuthDict) => {
-        await mx.deleteMultipleDevices(Array.from(deleted), authDict);
+      async (authDict?: object) => {
+        const resp = await ct.requestAuthJSON(
+          postDeleteDevices({ body: { auth: authDict, devices: Array.from(deleted) } })
+        );
+        return parseMatrixResp(resp);
       },
-      [mx, deleted]
+      [ct, deleted]
     ),
     useCallback(
       (state: typeof deleteState) => {
         if (state.status === AsyncStatus.Success) {
-          setDeleted(new Set());
-          refreshDeviceList();
+          const [err] = state.data;
+          if (!err) {
+            setDeleted(new Set());
+            refreshDeviceList();
+          }
         }
         setDeleteState(state);
       },
       [refreshDeviceList]
     )
   );
-  const [authData, deleteError] = useUIAMatrixError(
-    deleteState.status === AsyncStatus.Error ? deleteState.error : undefined
-  );
+
+  const deleteError = deleteState.status === AsyncStatus.Error ? deleteState.error : undefined;
+  const [deleteRespError] = deleteState.status === AsyncStatus.Success ? deleteState.data : [];
+  const [authData, deleteMatrixError] = useUIAMatrixError(deleteRespError);
   const deleting = deleteState.status === AsyncStatus.Loading || authData !== undefined;
 
   const handleCancelDelete = () => setDeleted(new Set());
@@ -166,14 +176,10 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
                 }
               />
               {showVerification && crypto && (
-                <DeviceVerificationStatus
-                  crypto={crypto}
-                  userId={mx.getSafeUserId()}
-                  deviceId={device.device_id}
-                >
+                <DeviceVerificationStatus userId={ct.session.userId} deviceId={device.device_id}>
                   {(status) =>
                     status === VerificationStatus.Unverified && (
-                      <VerifyOtherDeviceTile crypto={crypto} deviceId={device.device_id} />
+                      <VerifyOtherDeviceTile deviceId={device.device_id} />
                     )
                   }
                 </DeviceVerificationStatus>
@@ -196,9 +202,14 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
         >
           <Box alignItems="Center" gap="400">
             <Box grow="Yes" direction="Column">
-              {deleteError ? (
+              {deleteError || deleteMatrixError ? (
                 <Text size="T200">
-                  <b>Failed to logout devices! Please try again. {deleteError.message}</b>
+                  <b>
+                    Failed to logout devices! Please try again.{' '}
+                    {deleteError instanceof Error
+                      ? deleteError.message
+                      : deleteMatrixError?.data.error ?? 'Unkonwn Error'}
+                  </b>
                 </Text>
               ) : (
                 <Text size="T200">
diff --git a/src/app/features/settings/devices/Verification.tsx b/src/app/features/settings/devices/Verification.tsx
index 6c7eab17..79aacb04 100644
--- a/src/app/features/settings/devices/Verification.tsx
+++ b/src/app/features/settings/devices/Verification.tsx
@@ -19,13 +19,12 @@ import {
   MenuItem,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { CryptoApi, VerificationRequest } from 'matrix-js-sdk/lib/crypto-api';
+import { InboundVerification, OutboundVerification } from 'neurone/lib/crypto/machine/verification';
+import { AesHmacSha2KeyDescription } from 'neurone/lib/crypto/ssss';
 import { VerificationStatus } from '../../../hooks/useDeviceVerificationStatus';
 import { InfoCard } from '../../../components/info-card';
 import { ManualVerificationTile } from '../../../components/ManualVerification';
-import { SecretStorageKeyContent } from '../../../../types/matrix/accountData';
 import { AsyncState, AsyncStatus, useAsync } from '../../../hooks/useAsyncCallback';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { DeviceVerification } from '../../../components/DeviceVerification';
 import {
   DeviceVerificationReset,
@@ -35,6 +34,7 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { useAuthMetadata } from '../../../hooks/useAuthMetadata';
 import { withSearchParam } from '../../../pages/pathUtils';
 import { useAccountManagementActions } from '../../../hooks/useAccountManagement';
+import { useClient } from '../../../hooks/useClient';
 
 type VerificationStatusBadgeProps = {
   verificationStatus: VerificationStatus;
@@ -98,7 +98,7 @@ function LearnStartVerificationFromOtherDevice() {
 
 type VerifyCurrentDeviceTileProps = {
   secretStorageKeyId: string;
-  secretStorageKeyContent: SecretStorageKeyContent;
+  secretStorageKeyContent: AesHmacSha2KeyDescription;
 };
 export function VerifyCurrentDeviceTile({
   secretStorageKeyId,
@@ -163,20 +163,25 @@ export function VerifyCurrentDeviceTile({
 }
 
 type VerifyOtherDeviceTileProps = {
-  crypto: CryptoApi;
   deviceId: string;
 };
-export function VerifyOtherDeviceTile({ crypto, deviceId }: VerifyOtherDeviceTileProps) {
-  const mx = useMatrixClient();
-  const [requestState, setRequestState] = useState<AsyncState<VerificationRequest, Error>>({
+export function VerifyOtherDeviceTile({ deviceId }: VerifyOtherDeviceTileProps) {
+  const ct = useClient();
+  const [requestState, setRequestState] = useState<
+    AsyncState<InboundVerification | OutboundVerification, Error>
+  >({
     status: AsyncStatus.Idle,
   });
 
-  const requestVerification = useAsync<VerificationRequest, Error, []>(
-    useCallback(() => {
-      const requestPromise = crypto.requestDeviceVerification(mx.getSafeUserId(), deviceId);
-      return requestPromise;
-    }, [mx, crypto, deviceId]),
+  const requestVerification = useAsync(
+    useCallback(async () => {
+      const r = await ct.machine.verificationManager.requestDeviceVerification(
+        ct.session.userId,
+        deviceId,
+        ['m.sas.v1']
+      );
+      return r;
+    }, [ct, deviceId]),
     setRequestState
   );
 
@@ -217,23 +222,18 @@ export function VerifyOtherDeviceTile({ crypto, deviceId }: VerifyOtherDeviceTil
   );
 }
 
-type EnableVerificationProps = {
-  visible: boolean;
-};
-export function EnableVerification({ visible }: EnableVerificationProps) {
+export function EnableVerification() {
   const [open, setOpen] = useState(false);
 
   const handleCancel = useCallback(() => setOpen(false), []);
 
   return (
     <>
-      {visible && (
-        <Button size="300" radii="300" onClick={() => setOpen(true)}>
-          <Text as="span" size="B300">
-            Enable
-          </Text>
-        </Button>
-      )}
+      <Button size="300" radii="300" onClick={() => setOpen(true)}>
+        <Text as="span" size="B300">
+          Enable
+        </Text>
+      </Button>
       {open && (
         <Overlay open backdrop={<OverlayBackdrop />}>
           <OverlayCenter>
diff --git a/src/app/hooks/useCrossSigning.ts b/src/app/hooks/useCrossSigning.ts
index e3dc2c25..6f49e04f 100644
--- a/src/app/hooks/useCrossSigning.ts
+++ b/src/app/hooks/useCrossSigning.ts
@@ -1,9 +1,62 @@
-import { AccountDataEvent, SecretAccountData } from '../../types/matrix/accountData';
-import { useAccountData } from './useAccountData';
+import { AesHmacSha2, AesHmacSha2EncryptedData } from 'neurone/lib/crypto/ssss';
+import { useMemo } from 'react';
+import { CrossSigningKeys } from 'neurone/lib/crypto/machine';
+import { CrossSigningSecrets } from '../../client/context';
+import { useClient } from './useClient';
+import { useObservableValue } from './useObservableValue';
+import { AccountDataType } from '../../types/matrix/accountData';
 
-export const useCrossSigningActive = (): boolean => {
-  const masterEvent = useAccountData(AccountDataEvent.CrossSigningMaster);
-  const content = masterEvent?.getContent<SecretAccountData>();
+export const useCrossSigning = (): CrossSigningSecrets | undefined => {
+  const ct = useClient();
 
-  return !!content;
+  const crossSigning = useObservableValue(ct.secrets.crossSigning);
+
+  return crossSigning;
+};
+
+export type CrossSigningSecretData = {
+  master: AesHmacSha2EncryptedData;
+  self: AesHmacSha2EncryptedData;
+  user: AesHmacSha2EncryptedData;
+};
+export const useCrossSigningSecretData = (keyId: string): CrossSigningSecretData | undefined => {
+  const crossSigning = useCrossSigning();
+  const data: CrossSigningSecretData | undefined = useMemo(() => {
+    const master = crossSigning?.master.get(keyId);
+    const self = crossSigning?.self.get(keyId);
+    const user = crossSigning?.user.get(keyId);
+
+    if (!master || !self || !user) return undefined;
+
+    return {
+      master,
+      self,
+      user,
+    };
+  }, [crossSigning, keyId]);
+
+  return data;
+};
+
+export const getCrossSigningPrivateKeys = async (
+  recoveryKey: Uint8Array<ArrayBuffer>,
+  secretData: CrossSigningSecretData
+): Promise<CrossSigningKeys> => {
+  const master = await AesHmacSha2.decrypt(
+    recoveryKey,
+    AccountDataType.CrossSigningMaster,
+    secretData.master
+  );
+  const self = await AesHmacSha2.decrypt(
+    recoveryKey,
+    AccountDataType.CrossSigningSelf,
+    secretData.self
+  );
+  const user = await AesHmacSha2.decrypt(
+    recoveryKey,
+    AccountDataType.CrossSigningUser,
+    secretData.user
+  );
+
+  return { master, self, user };
 };
diff --git a/src/app/hooks/useDeviceList.ts b/src/app/hooks/useDeviceList.ts
index f89cb3d9..e4e6e288 100644
--- a/src/app/hooks/useDeviceList.ts
+++ b/src/app/hooks/useDeviceList.ts
@@ -1,30 +1,29 @@
 import { useEffect, useCallback, useMemo } from 'react';
-import { IMyDevice } from 'matrix-js-sdk';
 import { useQuery } from '@tanstack/react-query';
-import { CryptoEvent, CryptoEventHandlerMap } from 'matrix-js-sdk/lib/crypto-api';
-import { useMatrixClient } from './useMatrixClient';
+import { Device } from 'neurone/lib/api/types';
+import { getDevices, GetDevicesOK } from 'neurone/lib/api/matrix/client/v3/devices';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { useClient } from './useClient';
 
-export const useDeviceListChange = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.DevicesUpdated]
-) => {
-  const mx = useMatrixClient();
-  useEffect(() => {
-    mx.on(CryptoEvent.DevicesUpdated, onChange);
-    return () => {
-      mx.removeListener(CryptoEvent.DevicesUpdated, onChange);
-    };
-  }, [mx, onChange]);
+export const useDeviceListChange = (onChange: (users: string[]) => void) => {
+  const ct = useClient();
+
+  useEffect(() => ct.machine.events.onDevicesUpdated.subscribe(onChange), [ct, onChange]);
 };
 
 const DEVICES_QUERY_KEY = ['devices'];
 
-export function useDeviceList(): [undefined | IMyDevice[], () => Promise<void>] {
-  const mx = useMatrixClient();
+export function useDeviceList(): [undefined | Device[], () => Promise<void>] {
+  const ct = useClient();
 
   const fetchDevices = useCallback(async () => {
-    const data = await mx.getDevices();
-    return data.devices ?? [];
-  }, [mx]);
+    const resp = await ct.requestAuthJSON(getDevices({}));
+    const [err, result] = await parseMatrixResp<GetDevicesOK>(resp);
+
+    if (err) console.error('Error loading devices!', err);
+
+    return result?.devices ?? [];
+  }, [ct]);
 
   const { data: deviceList, refetch } = useQuery({
     queryKey: DEVICES_QUERY_KEY,
@@ -41,29 +40,30 @@ export function useDeviceList(): [undefined | IMyDevice[], () => Promise<void>]
   useDeviceListChange(
     useCallback(
       (users) => {
-        const userId = mx.getUserId();
+        const { userId } = ct.session;
         if (userId && users.includes(userId)) {
           refreshDeviceList();
         }
       },
-      [mx, refreshDeviceList]
+      [ct, refreshDeviceList]
     )
   );
 
   return [deviceList ?? undefined, refreshDeviceList];
 }
 
-export const useDeviceIds = (devices: IMyDevice[] | undefined): string[] => {
+export const useDeviceIds = (devices: Device[] | undefined): string[] => {
   const devicesId = useMemo(() => devices?.map((device) => device.device_id) ?? [], [devices]);
 
   return devicesId;
 };
 
 export const useSplitCurrentDevice = (
-  devices: IMyDevice[] | undefined
-): [IMyDevice | undefined, IMyDevice[] | undefined] => {
-  const mx = useMatrixClient();
-  const currentDeviceId = mx.getDeviceId();
+  devices: Device[] | undefined
+): [Device | undefined, Device[] | undefined] => {
+  const ct = useClient();
+  const currentDeviceId = ct.session.deviceId;
+
   const currentDevice = useMemo(
     () => devices?.find((d) => d.device_id === currentDeviceId),
     [devices, currentDeviceId]
diff --git a/src/app/hooks/useDeviceVerificationStatus.ts b/src/app/hooks/useDeviceVerificationStatus.ts
index 9e723bd7..f6a49b58 100644
--- a/src/app/hooks/useDeviceVerificationStatus.ts
+++ b/src/app/hooks/useDeviceVerificationStatus.ts
@@ -1,10 +1,8 @@
 import { useCallback, useEffect, useState } from 'react';
-import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
-import { verifiedDevice } from '../utils/matrix-crypto';
 import { useAlive } from './useAlive';
 import { fulfilledPromiseSettledResult } from '../utils/common';
-import { useMatrixClient } from './useMatrixClient';
 import { useDeviceListChange } from './useDeviceList';
+import { useClient } from './useClient';
 
 export enum VerificationStatus {
   Unknown,
@@ -13,30 +11,32 @@ export enum VerificationStatus {
   Unsupported,
 }
 
-export const useDeviceVerificationDetect = (
-  crypto: CryptoApi | undefined,
+export const useDeviceVerificationStatus = (
   userId: string,
-  deviceId: string | undefined,
-  callback: (status: VerificationStatus) => void
-): void => {
-  const mx = useMatrixClient();
+  deviceId: string | undefined
+): VerificationStatus => {
+  const [verificationStatus, setVerificationStatus] = useState(VerificationStatus.Unknown);
+  const ct = useClient();
 
   const updateStatus = useCallback(async () => {
     if (crypto && deviceId) {
-      const data = await verifiedDevice(crypto, userId, deviceId);
-      if (data === null) {
-        callback(VerificationStatus.Unsupported);
+      const device = await ct.machine.userTracker.getDevice(userId, deviceId);
+      if (!device) {
+        setVerificationStatus(VerificationStatus.Unsupported);
         return;
       }
-      callback(data ? VerificationStatus.Verified : VerificationStatus.Unverified);
+
+      setVerificationStatus(
+        device.crossSigningTrusted ? VerificationStatus.Verified : VerificationStatus.Unverified
+      );
       return;
     }
-    callback(VerificationStatus.Unknown);
-  }, [crypto, deviceId, userId, callback]);
+    setVerificationStatus(VerificationStatus.Unknown);
+  }, [ct, deviceId, userId]);
 
   useEffect(() => {
     updateStatus();
-  }, [mx, updateStatus, userId]);
+  }, [ct, userId, updateStatus]);
 
   useDeviceListChange(
     useCallback(
@@ -48,36 +48,25 @@ export const useDeviceVerificationDetect = (
       [userId, updateStatus]
     )
   );
-};
-
-export const useDeviceVerificationStatus = (
-  crypto: CryptoApi | undefined,
-  userId: string,
-  deviceId: string | undefined
-): VerificationStatus => {
-  const [verificationStatus, setVerificationStatus] = useState(VerificationStatus.Unknown);
-
-  useDeviceVerificationDetect(crypto, userId, deviceId, setVerificationStatus);
 
   return verificationStatus;
 };
 
-export const useUnverifiedDeviceCount = (
-  crypto: CryptoApi | undefined,
-  userId: string,
-  devices: string[]
-): number | undefined => {
+export const useUnverifiedDeviceCount = (userId: string, devices: string[]): number | undefined => {
+  const ct = useClient();
   const [unverifiedCount, setUnverifiedCount] = useState<number>();
   const alive = useAlive();
 
   const updateCount = useCallback(async () => {
     let count = 0;
     if (crypto) {
-      const promises = devices.map((deviceId) => verifiedDevice(crypto, userId, deviceId));
+      const promises = devices.map((deviceId) =>
+        ct.machine.userTracker.getDevice(userId, deviceId)
+      );
       const result = await Promise.allSettled(promises);
       const settledResult = fulfilledPromiseSettledResult(result);
-      settledResult.forEach((status) => {
-        if (status === false) {
+      settledResult.forEach((device) => {
+        if (device && !device.verified) {
           count += 1;
         }
       });
@@ -85,7 +74,7 @@ export const useUnverifiedDeviceCount = (
     if (alive()) {
       setUnverifiedCount(count);
     }
-  }, [crypto, userId, devices, alive]);
+  }, [ct, userId, devices, alive]);
 
   useDeviceListChange(
     useCallback(
diff --git a/src/app/hooks/useKeyBackup.ts b/src/app/hooks/useKeyBackup.ts
deleted file mode 100644
index e736e8dd..00000000
--- a/src/app/hooks/useKeyBackup.ts
+++ /dev/null
@@ -1,160 +0,0 @@
-import {
-  BackupTrustInfo,
-  CryptoApi,
-  CryptoEvent,
-  CryptoEventHandlerMap,
-  KeyBackupInfo,
-} from 'matrix-js-sdk/lib/crypto-api';
-import { useCallback, useEffect, useState } from 'react';
-import { useMatrixClient } from './useMatrixClient';
-import { useAlive } from './useAlive';
-
-export const useKeyBackupStatusChange = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupStatus]
-) => {
-  const mx = useMatrixClient();
-
-  useEffect(() => {
-    mx.on(CryptoEvent.KeyBackupStatus, onChange);
-    return () => {
-      mx.removeListener(CryptoEvent.KeyBackupStatus, onChange);
-    };
-  }, [mx, onChange]);
-};
-
-export const useKeyBackupStatus = (crypto: CryptoApi): boolean => {
-  const alive = useAlive();
-  const [status, setStatus] = useState(false);
-
-  useEffect(() => {
-    crypto.getActiveSessionBackupVersion().then((v) => {
-      if (alive()) {
-        setStatus(typeof v === 'string');
-      }
-    });
-  }, [crypto, alive]);
-
-  useKeyBackupStatusChange(setStatus);
-
-  return status;
-};
-
-export const useKeyBackupSessionsRemainingChange = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupSessionsRemaining]
-) => {
-  const mx = useMatrixClient();
-
-  useEffect(() => {
-    mx.on(CryptoEvent.KeyBackupSessionsRemaining, onChange);
-    return () => {
-      mx.removeListener(CryptoEvent.KeyBackupSessionsRemaining, onChange);
-    };
-  }, [mx, onChange]);
-};
-
-export const useKeyBackupFailedChange = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupFailed]
-) => {
-  const mx = useMatrixClient();
-
-  useEffect(() => {
-    mx.on(CryptoEvent.KeyBackupFailed, onChange);
-    return () => {
-      mx.removeListener(CryptoEvent.KeyBackupFailed, onChange);
-    };
-  }, [mx, onChange]);
-};
-
-export const useKeyBackupDecryptionKeyCached = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.KeyBackupDecryptionKeyCached]
-) => {
-  const mx = useMatrixClient();
-
-  useEffect(() => {
-    mx.on(CryptoEvent.KeyBackupDecryptionKeyCached, onChange);
-    return () => {
-      mx.removeListener(CryptoEvent.KeyBackupDecryptionKeyCached, onChange);
-    };
-  }, [mx, onChange]);
-};
-
-export const useKeyBackupSync = (): [number, string | undefined] => {
-  const [remaining, setRemaining] = useState(0);
-  const [failure, setFailure] = useState<string>();
-
-  useKeyBackupSessionsRemainingChange(
-    useCallback((count) => {
-      setRemaining(count);
-      setFailure(undefined);
-    }, [])
-  );
-
-  useKeyBackupFailedChange(
-    useCallback((f) => {
-      if (typeof f === 'string') {
-        setFailure(f);
-        setRemaining(0);
-      }
-    }, [])
-  );
-
-  return [remaining, failure];
-};
-
-export const useKeyBackupInfo = (crypto: CryptoApi): KeyBackupInfo | undefined | null => {
-  const alive = useAlive();
-  const [info, setInfo] = useState<KeyBackupInfo | null>();
-
-  const fetchInfo = useCallback(() => {
-    crypto.getKeyBackupInfo().then((i) => {
-      if (alive()) {
-        setInfo(i);
-      }
-    });
-  }, [crypto, alive]);
-
-  useEffect(() => {
-    fetchInfo();
-  }, [fetchInfo]);
-
-  useKeyBackupStatusChange(fetchInfo);
-
-  useKeyBackupSessionsRemainingChange(
-    useCallback(
-      (remainingCount) => {
-        if (remainingCount === 0) {
-          fetchInfo();
-        }
-      },
-      [fetchInfo]
-    )
-  );
-
-  return info;
-};
-
-export const useKeyBackupTrust = (
-  crypto: CryptoApi,
-  backupInfo: KeyBackupInfo
-): BackupTrustInfo | undefined => {
-  const alive = useAlive();
-  const [trust, setTrust] = useState<BackupTrustInfo>();
-
-  const fetchTrust = useCallback(() => {
-    crypto.isKeyBackupTrusted(backupInfo).then((t) => {
-      if (alive()) {
-        setTrust(t);
-      }
-    });
-  }, [crypto, alive, backupInfo]);
-
-  useEffect(() => {
-    fetchTrust();
-  }, [fetchTrust]);
-
-  useKeyBackupStatusChange(fetchTrust);
-
-  useKeyBackupDecryptionKeyCached(fetchTrust);
-
-  return trust;
-};
diff --git a/src/app/hooks/useRestoreBackupOnVerification.ts b/src/app/hooks/useRestoreBackupOnVerification.ts
deleted file mode 100644
index 74497b0a..00000000
--- a/src/app/hooks/useRestoreBackupOnVerification.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import { useSetAtom } from 'jotai';
-import { useCallback } from 'react';
-import { backupRestoreProgressAtom } from '../state/backupRestore';
-import { useMatrixClient } from './useMatrixClient';
-import { useKeyBackupDecryptionKeyCached } from './useKeyBackup';
-
-export const useRestoreBackupOnVerification = () => {
-  const setRestoreProgress = useSetAtom(backupRestoreProgressAtom);
-
-  const mx = useMatrixClient();
-
-  useKeyBackupDecryptionKeyCached(
-    useCallback(() => {
-      const crypto = mx.getCrypto();
-      if (!crypto) return;
-
-      crypto.restoreKeyBackup({
-        progressCallback(progress) {
-          setRestoreProgress(progress);
-        },
-      });
-    }, [mx, setRestoreProgress])
-  );
-};
diff --git a/src/app/hooks/useSecretStorage.ts b/src/app/hooks/useSecretStorage.ts
index 10eabeb9..6d746e7c 100644
--- a/src/app/hooks/useSecretStorage.ts
+++ b/src/app/hooks/useSecretStorage.ts
@@ -1,22 +1,23 @@
-import {
-  AccountDataEvent,
-  SecretStorageDefaultKeyContent,
-  SecretStorageKeyContent,
-} from '../../types/matrix/accountData';
-import { useAccountData } from './useAccountData';
-
-export const getSecretStorageKeyEventType = (key: string): string => `m.secret_storage.key.${key}`;
+import { ObjectReader } from 'neurone/lib/utils';
+import { AesHmacSha2KeyDescription, KeyStorage } from 'neurone/lib/crypto/ssss';
+import { useAccountData } from './storage/useAccountData';
 
 export const useSecretStorageDefaultKeyId = (): string | undefined => {
-  const defaultKeyEvent = useAccountData(AccountDataEvent.SecretStorageDefaultKey);
-  const defaultKeyId = defaultKeyEvent?.getContent<SecretStorageDefaultKeyContent>().key;
+  const defaultKeyResult = useAccountData(KeyStorage.defaultKeyIdentifier());
+  const defaultKeyEvent = defaultKeyResult.value;
+  const defaultKeyId = ObjectReader.string(defaultKeyEvent?.content, 'key');
 
   return defaultKeyId;
 };
 
-export const useSecretStorageKeyContent = (keyId: string): SecretStorageKeyContent | undefined => {
-  const keyEvent = useAccountData(getSecretStorageKeyEventType(keyId));
-  const secretStorageKey = keyEvent?.getContent<SecretStorageKeyContent>();
+export const useSecretStorageKeyContent = (
+  keyId: string
+): AesHmacSha2KeyDescription | undefined => {
+  const keyResult = useAccountData(KeyStorage.keyIdentifier(keyId));
+  const keyEvent = keyResult.value;
+  const secretStorageKey = keyEvent?.content
+    ? KeyStorage.getKeyDescription(keyEvent.content)
+    : undefined;
 
   return secretStorageKey;
 };
diff --git a/src/app/hooks/useUIAFlows.ts b/src/app/hooks/useUIAFlows.ts
index 012298d4..f420936f 100644
--- a/src/app/hooks/useUIAFlows.ts
+++ b/src/app/hooks/useUIAFlows.ts
@@ -1,5 +1,5 @@
 import { useCallback, useMemo } from 'react';
-import { MatrixError } from 'matrix-js-sdk';
+import { MatrixError } from 'neurone/lib/matrix-request';
 import {
   AuthResponse,
   AuthType,
@@ -102,7 +102,7 @@ export const useUIAMatrixError = (
   error?: MatrixError
 ): [undefined, undefined] | [AuthResponse, undefined] | [undefined, MatrixError] => {
   if (!error) return [undefined, undefined];
-  if (error.httpStatus === 401) return [error.data as AuthResponse, undefined];
+  if (error.status === 401) return [error.data as AuthResponse, undefined];
 
   return [undefined, error];
 };
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 3d3c13df..b36847eb 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -57,7 +57,6 @@ import { ClientInitStorageAtom } from './client/ClientInitStorageAtom';
 import { ClientNonUIFeatures } from './client/ClientNonUIFeatures';
 import { AuthRouteThemeManager, UnAuthRouteThemeManager } from './ThemeManager';
 import { ReceiveSelfDeviceVerification } from '../components/DeviceVerification';
-import { AutoRestoreBackupOnVerification } from '../components/BackupRestore';
 import { RoomSettingsRenderer } from '../features/room-settings';
 import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
 import { SpaceSettingsRenderer } from '../features/space-settings';
@@ -141,8 +140,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                   <CreateSpaceModalRenderer />
                   <RoomSettingsRenderer />
                   <SpaceSettingsRenderer />
-                  {/*<ReceiveSelfDeviceVerification />
-                  <AutoRestoreBackupOnVerification /> */}
+                  <ReceiveSelfDeviceVerification />
                 </ClientRoomsNotificationPreferences>
               </ClientInitStorageAtom>
             </ClientRoot>
diff --git a/src/app/pages/client/SidebarNav.tsx b/src/app/pages/client/SidebarNav.tsx
index b275f6f3..a2e1b682 100644
--- a/src/app/pages/client/SidebarNav.tsx
+++ b/src/app/pages/client/SidebarNav.tsx
@@ -44,7 +44,7 @@ export function SidebarNav() {
             <SidebarStackSeparator />
             <SidebarStack>
               <SearchTab />
-              {/* <UnverifiedTab /> */}
+              <UnverifiedTab />
               <InboxTab />
               <SettingsTab />
             </SidebarStack>
diff --git a/src/app/pages/client/sidebar/UnverifiedTab.tsx b/src/app/pages/client/sidebar/UnverifiedTab.tsx
index 0a2f117b..fb9f20a9 100644
--- a/src/app/pages/client/sidebar/UnverifiedTab.tsx
+++ b/src/app/pages/client/sidebar/UnverifiedTab.tsx
@@ -7,38 +7,29 @@ import {
   SidebarItemTooltip,
 } from '../../../components/sidebar';
 import { useDeviceIds, useDeviceList, useSplitCurrentDevice } from '../../../hooks/useDeviceList';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import * as css from './UnverifiedTab.css';
 import {
   useDeviceVerificationStatus,
   useUnverifiedDeviceCount,
   VerificationStatus,
 } from '../../../hooks/useDeviceVerificationStatus';
-import { useCrossSigningActive } from '../../../hooks/useCrossSigning';
+import { useCrossSigning } from '../../../hooks/useCrossSigning';
 import { Modal500 } from '../../../components/Modal500';
 import { Settings, SettingsPages } from '../../../features/settings';
+import { useClient } from '../../../hooks/useClient';
 
 function UnverifiedIndicator() {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
-  const crypto = mx.getCrypto();
   const [devices] = useDeviceList();
 
-  const [currentDevice, otherDevices] = useSplitCurrentDevice(devices);
+  const [, otherDevices] = useSplitCurrentDevice(devices);
 
-  const verificationStatus = useDeviceVerificationStatus(
-    crypto,
-    mx.getSafeUserId(),
-    currentDevice?.device_id
-  );
+  const verificationStatus = useDeviceVerificationStatus(ct.session.userId, ct.session.deviceId);
   const unverified = verificationStatus === VerificationStatus.Unverified;
 
   const otherDevicesId = useDeviceIds(otherDevices);
-  const unverifiedDeviceCount = useUnverifiedDeviceCount(
-    crypto,
-    mx.getSafeUserId(),
-    otherDevicesId
-  );
+  const unverifiedDeviceCount = useUnverifiedDeviceCount(ct.session.userId, otherDevicesId);
 
   const [settings, setSettings] = useState(false);
   const closeSettings = () => setSettings(false);
@@ -86,9 +77,9 @@ function UnverifiedIndicator() {
 }
 
 export function UnverifiedTab() {
-  const crossSigningActive = useCrossSigningActive();
+  const crossSigning = useCrossSigning();
 
-  if (!crossSigningActive) return null;
+  if (!crossSigning) return null;
 
   return <UnverifiedIndicator />;
 }
diff --git a/src/app/state/backupRestore.ts b/src/app/state/backupRestore.ts
deleted file mode 100644
index ad14e5d7..00000000
--- a/src/app/state/backupRestore.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-import { atom } from 'jotai';
-import { ImportRoomKeyProgressData, ImportRoomKeyStage } from 'matrix-js-sdk/lib/crypto-api';
-
-export enum BackupProgressStatus {
-  Idle,
-  Fetching,
-  Loading,
-  Done,
-}
-export type ProgressData = {
-  downloaded: number;
-  successes: number;
-  failures: number;
-  total: number;
-};
-export type IBackupProgress =
-  | {
-      status: BackupProgressStatus.Idle;
-    }
-  | {
-      status: BackupProgressStatus.Fetching;
-    }
-  | {
-      status: BackupProgressStatus.Loading;
-      data: ProgressData;
-    }
-  | {
-      status: BackupProgressStatus.Done;
-    };
-
-const baseBackupRestoreProgressAtom = atom<IBackupProgress>({
-  status: BackupProgressStatus.Idle,
-});
-
-export const backupRestoreProgressAtom = atom<
-  IBackupProgress,
-  [ImportRoomKeyProgressData],
-  undefined
->(
-  (get) => get(baseBackupRestoreProgressAtom),
-  (get, set, progress) => {
-    if (progress.stage === ImportRoomKeyStage.Fetch) {
-      set(baseBackupRestoreProgressAtom, {
-        status: BackupProgressStatus.Fetching,
-      });
-      return;
-    }
-
-    if (progress.stage === ImportRoomKeyStage.LoadKeys) {
-      const { total, successes, failures } = progress;
-
-      const downloaded = successes + failures;
-      if (downloaded === total) {
-        set(baseBackupRestoreProgressAtom, {
-          status: BackupProgressStatus.Done,
-        });
-        return;
-      }
-      set(baseBackupRestoreProgressAtom, {
-        status: BackupProgressStatus.Loading,
-        data: {
-          downloaded,
-          successes,
-          failures,
-          total,
-        },
-      });
-    }
-  }
-);
diff --git a/src/app/utils/matrix-crypto.ts b/src/app/utils/matrix-crypto.ts
deleted file mode 100644
index dda402f8..00000000
--- a/src/app/utils/matrix-crypto.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { CryptoApi } from 'matrix-js-sdk/lib/crypto-api';
-
-export const verifiedDevice = async (
-  api: CryptoApi,
-  userId: string,
-  deviceId: string
-): Promise<boolean | null> => {
-  const status = await api.getDeviceVerificationStatus(userId, deviceId);
-
-  if (!status) return null;
-
-  const verified = status.crossSigningVerified;
-  return verified;
-};
diff --git a/src/client/MegolmBackup.ts b/src/client/MegolmBackup.ts
new file mode 100644
index 00000000..813da0eb
--- /dev/null
+++ b/src/client/MegolmBackup.ts
@@ -0,0 +1,211 @@
+import { getKeys, GetKeysOK, PutKeysOK } from 'neurone/lib/api/matrix/client/v3/roomKeys';
+import { BackupVersionInfo } from 'neurone/lib/api/types';
+import { Machine } from 'neurone/lib/crypto/machine';
+import { KeyBackup, RoomKeysImportResult } from 'neurone/lib/crypto/machine/backup';
+import { MatrixError, MatrixRequest, parseMatrixResp } from 'neurone/lib/matrix-request';
+import { Base64 } from 'neurone/lib/utils';
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { ProgressCallback, responseProgress } from './responseProgress';
+
+export type ImportBackupIdle = {
+  type: 'idle';
+};
+export type ImportBackupDownload = {
+  type: 'download';
+  receivedBytes: number;
+  totalBytes?: number;
+};
+export type ImportBackupImport = {
+  type: 'import';
+  progress?: {
+    imported: number;
+    total: number;
+    failures: number;
+  };
+};
+export type ImportBackupDone = {
+  type: 'done';
+  result: RoomKeysImportResult;
+};
+export type ImportBackupError = {
+  type: 'error';
+  error: MatrixError;
+};
+
+export type BackupRestoreState =
+  | ImportBackupIdle
+  | ImportBackupDownload
+  | ImportBackupImport
+  | ImportBackupDone
+  | ImportBackupError;
+
+export class MegolmBackup implements Disposable {
+  private readonly disposer = new Disposer();
+
+  private readonly publishKey = crypto.randomUUID();
+
+  public readonly keyBackup: ObservableValue<KeyBackup | undefined>;
+
+  public readonly restoreState: ObservableValue<BackupRestoreState>;
+
+  public readonly backupInProgress: ObservableValue<boolean>;
+
+  constructor(
+    private readonly machine: Machine,
+    private readonly request: MatrixRequest,
+    private readonly backupInfo: ObservableValue<BackupVersionInfo | undefined>
+  ) {
+    this.keyBackup = new ObservableValue(undefined, this.publishKey);
+    this.restoreState = new ObservableValue({ type: 'idle' }, this.publishKey);
+    this.backupInProgress = new ObservableValue(false, this.publishKey);
+
+    this.handleBackupInfo(this.backupInfo.read);
+
+    this.disposer.collect(
+      this.backupInfo.subscribe(this.handleBackupInfo.bind(this)),
+
+      this.machine.events.onReceiveSecret.subscribe(({ name, value }) => {
+        if (name !== 'm.megolm_backup.v1') return;
+        this.saveDecryptionKey(value);
+      }),
+
+      this.machine.events.onRoomKeysUpdated.subscribe(() => {
+        const keyBackup = this.keyBackup.read;
+        if (keyBackup) {
+          this.backup(keyBackup);
+        }
+      })
+    );
+  }
+
+  private async handleBackupInfo(backupInfo?: BackupVersionInfo): Promise<void> {
+    const prevBackup = this.keyBackup.read?.backupInfo;
+
+    const backupRemoved = !backupInfo && prevBackup !== undefined;
+    if (backupRemoved) {
+      await this.machine.backupManager.disableBackup();
+      this.keyBackup.publish(this.publishKey, undefined);
+      return;
+    }
+
+    if (!backupInfo) return;
+
+    const versionChanged = prevBackup && prevBackup.version !== backupInfo.version;
+    if (versionChanged && this.keyBackup.read) {
+      this.machine.backupManager.disableBackup();
+    }
+
+    this.start(backupInfo);
+  }
+
+  public async saveDecryptionKey(secret: string): Promise<void> {
+    const backupInfo = this.backupInfo.read;
+    if (!backupInfo) {
+      throw new Error(
+        'Cannot save the backup recovery key because no backup version is configured.'
+      );
+    }
+
+    await this.machine.backupManager.saveDecryptionKey(Base64.decode(secret), this.backupInfo.read);
+
+    const keyBackup = this.keyBackup.read ?? (await this.start(backupInfo));
+
+    this.restore(keyBackup);
+  }
+
+  private async start(backupInfo: BackupVersionInfo): Promise<KeyBackup> {
+    const trusted = await this.machine.backupManager.trustedBackup(backupInfo);
+    if (!trusted) {
+      throw new Error(
+        'Cannot start key backup because the provided backup version is not trusted.'
+      );
+    }
+
+    const keyBackup = await this.machine.backupManager.enableBackup(backupInfo);
+    this.keyBackup.publish(this.publishKey, keyBackup);
+
+    this.backup(keyBackup);
+
+    return keyBackup;
+  }
+
+  private async backup(keyBackup: KeyBackup): Promise<void> {
+    if (this.backupInProgress.read) {
+      return;
+    }
+
+    this.backupInProgress.publish(this.publishKey, true);
+
+    try {
+      while (true) {
+        // eslint-disable-next-line no-await-in-loop
+        const req = await keyBackup.backupRoomKeys();
+
+        // No more keys to back up.
+        if (!req) break;
+
+        // eslint-disable-next-line no-await-in-loop
+        const [err, result] = await parseMatrixResp<PutKeysOK>(req.response);
+
+        if (err) throw new Error(err.data.error ?? err.data.errcode);
+
+        console.debug(`Backed up ${result.count} room keys`);
+      }
+    } catch (e) {
+      console.error('Backup keys request failed!', e);
+    } finally {
+      this.backupInProgress.publish(this.publishKey, false);
+    }
+  }
+
+  public async restore(keyBackup: KeyBackup): Promise<void> {
+    this.restoreState.publish(this.publishKey, {
+      type: 'download',
+      receivedBytes: 0,
+    });
+    const resp = await this.request(
+      getKeys({ searchParams: { version: keyBackup.backupInfo.version } })
+    );
+
+    const handleDownloadProgress: ProgressCallback = (receivedBytes, totalBytes) => {
+      this.restoreState.publish(this.publishKey, {
+        type: 'download',
+        receivedBytes,
+        totalBytes,
+      });
+    };
+    await responseProgress(resp.clone(), handleDownloadProgress);
+
+    const [error, result] = await parseMatrixResp<GetKeysOK>(resp);
+    if (error) {
+      this.restoreState.publish(this.publishKey, {
+        type: 'error',
+        error,
+      });
+      return;
+    }
+
+    this.restoreState.publish(this.publishKey, { type: 'import' });
+    const handleImportProgress = (imported: bigint, total: bigint, failures: bigint) => {
+      this.restoreState.publish(this.publishKey, {
+        type: 'import',
+        progress: {
+          imported: Number(imported),
+          total: Number(total),
+          failures: Number(failures),
+        },
+      });
+    };
+
+    const importResult = await keyBackup.importBackup(result.rooms, handleImportProgress);
+    this.restoreState.publish(this.publishKey, {
+      type: 'done',
+      result: importResult,
+    });
+  }
+
+  dispose(): void {
+    this.disposer.run();
+  }
+}
diff --git a/src/client/context.ts b/src/client/context.ts
index 96aeefc4..aa66f9a1 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -1,14 +1,18 @@
 import { ComputedObservableValue, Observable, ObservableValue } from 'neurone/lib/utils/observable';
-import { MatrixRequest } from 'neurone/lib/matrix-request';
+import { getVersion, GetVersionOK } from 'neurone/lib/api/matrix/client/v3/roomKeys';
+import { MatrixRequest, parseMatrixResp } from 'neurone/lib/matrix-request';
 import { HistoryVisibility, Machine } from 'neurone/lib/crypto/machine';
 import { ObjectReader } from 'neurone/lib/utils';
 import { Disposer } from 'neurone/lib/utils/disposable';
 import { InboundVerification, OutboundVerification } from 'neurone/lib/crypto/machine/verification';
 import {
+  AccountDataEvent,
+  BackupVersionInfo,
   MessageEventWithoutRoomId,
   RoomSummary,
   StateEventWithoutRoomId,
 } from 'neurone/lib/api/types';
+import { AesHmacSha2EncryptedData, SecretStorage } from 'neurone/lib/crypto/ssss';
 import {
   InviteRoomStateObject,
   JoinRoomStateObject,
@@ -24,6 +28,7 @@ import { GetTxnId } from './txn';
 import { Timeline } from './room';
 import { AccountDataType } from '../types/matrix/accountData';
 import { DecryptionManager } from './decryption';
+import { MegolmBackup } from './MegolmBackup';
 
 export type StateContext = {
   join: {
@@ -74,6 +79,17 @@ export type RoomsContext = {
   leave: ObservableValue<string[]>;
 };
 
+export type CrossSigningSecrets = {
+  master: Map<string, AesHmacSha2EncryptedData>;
+  self: Map<string, AesHmacSha2EncryptedData>;
+  user: Map<string, AesHmacSha2EncryptedData>;
+};
+
+export type Secrets = {
+  crossSigning: ObservableValue<CrossSigningSecrets | undefined>;
+  megolmBackup: ObservableValue<Map<string, AesHmacSha2EncryptedData> | undefined>;
+};
+
 export type ClientContext = {
   session: Session;
   storage: Storage;
@@ -105,6 +121,10 @@ export type ClientContext = {
 
   pendingMemberRooms: ObservableValue<string[]>;
   verificationRequest: Observable<InboundVerification | OutboundVerification>;
+  secrets: Secrets;
+  backupInfo: ObservableValue<BackupVersionInfo | undefined>;
+  megolmBackup: MegolmBackup;
+
   sync: SyncContext;
   requestAuthJSON: MatrixRequest;
   getTxnId: GetTxnId;
@@ -895,3 +915,103 @@ export const createVerificationRequestObservable = () => {
     onVerificationRequest,
   };
 };
+
+export const createSecretsObservable = async (
+  storage: Storage,
+  disposer: Disposer
+): Promise<Secrets> => {
+  const masterObservable = await storage.accountData.observableRead.get(
+    AccountDataType.CrossSigningMaster
+  );
+  const selfObservable = await storage.accountData.observableRead.get(
+    AccountDataType.CrossSigningSelf
+  );
+  const userObservable = await storage.accountData.observableRead.get(
+    AccountDataType.CrossSigningUser
+  );
+
+  const backupObservable = await storage.accountData.observableRead.get(
+    AccountDataType.MegolmBackupV1
+  );
+
+  const getData = (event: AccountDataEvent) => {
+    const kToD = new Map<string, AesHmacSha2EncryptedData>();
+
+    SecretStorage.getAllKeyId(event.content).forEach((keyId) => {
+      const d = SecretStorage.getEncryptedData(keyId, event.content);
+      if (!d) return;
+      kToD.set(keyId, d);
+    });
+
+    if (kToD.size === 0) return undefined;
+
+    return kToD;
+  };
+
+  const crossSigning: ObservableValue<CrossSigningSecrets | undefined> =
+    new ComputedObservableValue(() => {
+      const masterEvent = masterObservable.read?.event;
+      const selfEvent = selfObservable.read?.event;
+      const userEvent = userObservable.read?.event;
+
+      const master = masterEvent && getData(masterEvent);
+      const self = selfEvent && getData(selfEvent);
+      const user = userEvent && getData(userEvent);
+
+      if (!master || !self || !user) return undefined;
+
+      return {
+        master,
+        self,
+        user,
+      };
+    }, [masterObservable, selfObservable, userObservable]);
+
+  const megolmBackup: ObservableValue<Map<string, AesHmacSha2EncryptedData> | undefined> =
+    new ComputedObservableValue(() => {
+      const event = backupObservable.read?.event;
+      if (!event) return undefined;
+
+      return getData(event);
+    }, [backupObservable]);
+
+  disposer.collect(
+    masterObservable,
+    selfObservable,
+    userObservable,
+    backupObservable,
+    crossSigning,
+    megolmBackup
+  );
+
+  return {
+    crossSigning,
+    megolmBackup,
+  };
+};
+
+export const createBackupInfoObservable = async (
+  request: MatrixRequest,
+  secrets: Secrets,
+  disposer: Disposer
+): Promise<ObservableValue<BackupVersionInfo | undefined>> => {
+  const publishKey = crypto.randomUUID();
+  const backupInfo = new ObservableValue<BackupVersionInfo | undefined>(undefined, publishKey);
+
+  const update = async () => {
+    const resp = await request(getVersion({}));
+    const [, result] = await parseMatrixResp<GetVersionOK>(resp);
+    backupInfo.publish(publishKey, result);
+  };
+
+  update();
+
+  disposer.collect(
+    backupInfo,
+    secrets.megolmBackup.subscribe(() => {
+      update();
+    })
+  );
+
+  return backupInfo;
+};
diff --git a/src/client/decryption/DecryptionManager.ts b/src/client/decryption/DecryptionManager.ts
index 3b180183..b1867144 100644
--- a/src/client/decryption/DecryptionManager.ts
+++ b/src/client/decryption/DecryptionManager.ts
@@ -51,16 +51,16 @@ export class DecryptionManager implements Disposable {
     const { content } = event;
     const sessionId = ObjectReader.string(content, 'session_id');
 
-    if (!sessionId) {
-      throw new Error('Malformed event! Missing session_id');
+    if (sessionId) {
+      const existingEvent = eventIndex.get(roomId, sessionId, event.event_id);
+      if (existingEvent) return existingEvent;
     }
 
-    const existingEvent = eventIndex.get(roomId, sessionId, event.event_id);
-    if (existingEvent) return existingEvent;
-
     const encryptedEvent = new EncryptedEvent(this.machine.roomEncryption, roomId, event);
 
-    eventIndex.store(roomId, sessionId, encryptedEvent);
+    if (sessionId) {
+      eventIndex.store(roomId, sessionId, encryptedEvent);
+    }
 
     return encryptedEvent;
   }
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index 91e6a276..a638ddab 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -3,6 +3,7 @@ import { Disposer } from 'neurone/lib/utils/disposable';
 import { Session } from '../app/state/sessions';
 import {
   ClientContext,
+  createSecretsObservable,
   createDirectRoomsObservable,
   createDirectRoomToUserObservable,
   createEncryptedRoomsObservable,
@@ -23,6 +24,7 @@ import {
   createStateContext,
   createSyncTokenObservable,
   createVerificationRequestObservable,
+  createBackupInfoObservable,
 } from './context';
 import { createStorage } from './storage';
 import { getAuthJSONRequest } from './request';
@@ -34,6 +36,7 @@ import { LogoutManager } from './LogoutManager';
 import { MachineManager } from './MachineManager';
 import { DecryptionManager } from './decryption';
 import { initializeCrypto } from './crypto';
+import { MegolmBackup } from './MegolmBackup';
 
 export const initializeClient = async (session: Session): Promise<ClientContext> => {
   const disposer = new Disposer();
@@ -71,6 +74,9 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
   const pendingMemberRooms = await createPendingMemberRoomObservable(storage, disposer);
 
   const { verificationRequest, onVerificationRequest } = createVerificationRequestObservable();
+  const secrets = await createSecretsObservable(storage, disposer);
+  const backupInfo = await createBackupInfoObservable(requestAuthJSON, secrets, disposer);
+  const megolmBackup = new MegolmBackup(machine, requestAuthJSON, backupInfo);
 
   const getTxnId: GetTxnId = getTxnIdFunc();
 
@@ -129,6 +135,9 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
 
     pendingMemberRooms,
     verificationRequest,
+    secrets,
+    backupInfo,
+    megolmBackup,
     sync: {
       observable: syncObservable,
       controller: syncController,
@@ -148,6 +157,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
   });
 
   disposer.collect(
+    megolmBackup,
     decryption,
     syncObservable,
     syncController,
diff --git a/src/types/matrix/accountData.ts b/src/types/matrix/accountData.ts
index 5a0897b2..43a62998 100644
--- a/src/types/matrix/accountData.ts
+++ b/src/types/matrix/accountData.ts
@@ -13,8 +13,8 @@ export enum AccountDataEvent {
   SecretStorageDefaultKey = 'm.secret_storage.default_key',
 
   CrossSigningMaster = 'm.cross_signing.master',
-  CrossSigningSelf = 'm.cross_signing.self',
-  CrossSigningUser = 'm.cross_signing.user',
+  CrossSigningSelf = 'm.cross_signing.self_signing',
+  CrossSigningUser = 'm.cross_signing.user_signing',
   MegolmBackupV1 = 'm.megolm_backup.v1',
 }
 export enum AccountDataType {
@@ -32,8 +32,8 @@ export enum AccountDataType {
   SecretStorageDefaultKey = 'm.secret_storage.default_key',
 
   CrossSigningMaster = 'm.cross_signing.master',
-  CrossSigningSelf = 'm.cross_signing.self',
-  CrossSigningUser = 'm.cross_signing.user',
+  CrossSigningSelf = 'm.cross_signing.self_signing',
+  CrossSigningUser = 'm.cross_signing.user_signing',
   MegolmBackupV1 = 'm.megolm_backup.v1',
 }
 

From 738025253c430add31f0e50e51a8ce0803e89541 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 5 Aug 2026 15:52:35 +0530
Subject: [PATCH 054/158] fix outgoing verification request not starting emoji
 verification

---
 src/app/components/DeviceVerification.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/DeviceVerification.tsx b/src/app/components/DeviceVerification.tsx
index 8e3641fd..ced0ae25 100644
--- a/src/app/components/DeviceVerification.tsx
+++ b/src/app/components/DeviceVerification.tsx
@@ -273,7 +273,7 @@ export function DeviceVerification({ request, onExit }: DeviceVerificationProps)
               {stage instanceof InboundRequestStage && <VerificationAccept stage={stage} />}
               {stage instanceof OutboundRequestStage && <VerificationWaitAccept />}
               {stage instanceof ReadyVerificationStage &&
-                (request instanceof OutboundRequestStage ? (
+                (request instanceof OutboundVerification ? (
                   <AutoVerificationStart stage={stage} />
                 ) : (
                   <VerificationWaitStart />

From 0082a322363f5014bb1c2cc94169ee028bdea911 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 5 Aug 2026 17:47:33 +0530
Subject: [PATCH 055/158] move manual backup to new sdk

---
 .../features/settings/devices/LocalBackup.tsx |  39 +-
 src/app/utils/time.ts                         |  18 +
 src/util/cryptE2ERoomKeys.js                  | 340 ------------------
 3 files changed, 40 insertions(+), 357 deletions(-)
 delete mode 100644 src/util/cryptE2ERoomKeys.js

diff --git a/src/app/features/settings/devices/LocalBackup.tsx b/src/app/features/settings/devices/LocalBackup.tsx
index 00128c8f..782d2435 100644
--- a/src/app/features/settings/devices/LocalBackup.tsx
+++ b/src/app/features/settings/devices/LocalBackup.tsx
@@ -1,36 +1,44 @@
 import React, { FormEventHandler, useCallback, useEffect, useState } from 'react';
 import { Box, Button, color, Icon, Icons, Spinner, Text, toRem } from 'folds';
 import FileSaver from 'file-saver';
+import { RoomKeys } from 'neurone/lib/crypto/machine';
 import { SequenceCard } from '../../../components/sequence-card';
 import { SettingTile } from '../../../components/setting-tile';
 import { SequenceCardStyle } from '../styles.css';
 import { PasswordInput } from '../../../components/password-input';
 import { ConfirmPasswordMatch } from '../../../components/ConfirmPasswordMatch';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { decryptMegolmKeyFile, encryptMegolmKeyFile } from '../../../../util/cryptE2ERoomKeys';
 import { useAlive } from '../../../hooks/useAlive';
 import { useFilePicker } from '../../../hooks/useFilePicker';
+import { useClient } from '../../../hooks/useClient';
+import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
+import { formatFileTimestamp } from '../../../utils/time';
 
 function ExportKeys() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const alive = useAlive();
 
   const [exportState, exportKeys] = useAsyncCallback<void, Error, [string]>(
     useCallback(
       async (password) => {
-        const crypto = mx.getCrypto();
-        if (!crypto) throw new Error('Unexpected Error! Crypto module not found!');
-        const keysJSON = await crypto.exportRoomKeysAsJson();
+        const keysJSON = await ct.machine.roomKeys.exportRoomKeysToJson();
 
-        const encKeys = await encryptMegolmKeyFile(keysJSON, password);
+        const encKeys = RoomKeys.encryptExportedRoomKeys(keysJSON, password, 500000);
 
         const blob = new Blob([encKeys], {
           type: 'text/plain;charset=us-ascii',
         });
-        FileSaver.saveAs(blob, 'cinny-keys.txt');
+
+        const now = new Date();
+
+        const username = getMxIdLocalPart(ct.session.userId);
+        const server = getMxIdServer(ct.session.userId);
+        FileSaver.saveAs(
+          blob,
+          `Keys Bakup - ${username} (${server}) - ${formatFileTimestamp(now)}.txt`
+        );
       },
-      [mx]
+      [ct]
     )
   );
 
@@ -160,21 +168,18 @@ type ImportKeysProps = {
   onDone?: () => void;
 };
 function ImportKeys({ file, onDone }: ImportKeysProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const alive = useAlive();
 
   const [decryptState, decryptFile] = useAsyncCallback<void, Error, [string]>(
     useCallback(
       async (password) => {
-        const crypto = mx.getCrypto();
-        if (!crypto) throw new Error('Unexpected Error! Crypto module not found!');
+        const encKeys = await file.text();
+        const keysJson = RoomKeys.decryptExportedRoomKeys(encKeys, password);
 
-        const arrayBuffer = await file.arrayBuffer();
-        const keys = await decryptMegolmKeyFile(arrayBuffer, password);
-
-        await crypto.importRoomKeysAsJson(keys);
+        await ct.machine.roomKeys.importRoomKeysFromJson(keysJson, () => undefined);
       },
-      [file, mx]
+      [file, ct]
     )
   );
 
diff --git a/src/app/utils/time.ts b/src/app/utils/time.ts
index 8f1e30e9..63b467ed 100644
--- a/src/app/utils/time.ts
+++ b/src/app/utils/time.ts
@@ -84,3 +84,21 @@ export const getYesterday = () => {
   const date = dayjs(nowTs);
   return dateFor(date.year(), date.month() + 1, date.date());
 };
+
+/**
+ * Formats a date as a filename-safe timestamp.
+ *
+ * Output format: `YYYY-MM-DD_HH-mm-ss`
+ *
+ * Example: `2026-08-05_17-34-21`
+ *
+ * @param date - The date to format. Defaults to the current date and time.
+ * @returns A filename-safe timestamp string.
+ */
+export function formatFileTimestamp(date = new Date()) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(
+    date.getDate()
+  ).padStart(2, '0')}_${String(date.getHours()).padStart(2, '0')}-${String(
+    date.getMinutes()
+  ).padStart(2, '0')}-${String(date.getSeconds()).padStart(2, '0')}`;
+}
diff --git a/src/util/cryptE2ERoomKeys.js b/src/util/cryptE2ERoomKeys.js
deleted file mode 100644
index 50254a3c..00000000
--- a/src/util/cryptE2ERoomKeys.js
+++ /dev/null
@@ -1,340 +0,0 @@
-// https://github.com/matrix-org/matrix-react-sdk/blob/e78a1adb6f1af2ea425b0bae9034fb7344a4b2e8/src/utils/MegolmExportEncryption.js
-
-const subtleCrypto = window.crypto.subtle || window.crypto.webkitSubtle;
-
-/**
- * Make an Error object which has a friendlyText property which is already
- * translated and suitable for showing to the user.
- *
- * @param {string} msg   message for the exception
- * @param {string} friendlyText
- * @returns {Error}
- */
-function friendlyError(msg, friendlyText) {
-  const e = new Error(msg);
-  e.friendlyText = friendlyText;
-  return e;
-}
-
-function cryptoFailMsg() {
-  return 'Your browser does not support the required cryptography extensions';
-}
-/**
- * Derive the AES and HMAC-SHA-256 keys for the file
- *
- * @param {Unit8Array} salt  salt for pbkdf
- * @param {Number} iterations number of pbkdf iterations
- * @param {String} password  password
- * @return {Promise<[CryptoKey, CryptoKey]>} promise for [aes key, hmac key]
- */
-async function deriveKeys(salt, iterations, password) {
-  const start = new Date();
-
-  let key;
-  try {
-    key = await subtleCrypto.importKey(
-      'raw',
-      new TextEncoder().encode(password),
-      { name: 'PBKDF2' },
-      false,
-      ['deriveBits'],
-    );
-  } catch (e) {
-    throw friendlyError(`subtleCrypto.importKey failed: ${e}`, cryptoFailMsg());
-  }
-
-  let keybits;
-  try {
-    keybits = await subtleCrypto.deriveBits(
-      {
-        name: 'PBKDF2',
-        salt,
-        iterations,
-        hash: 'SHA-512',
-      },
-      key,
-      512,
-    );
-  } catch (e) {
-    throw friendlyError(`subtleCrypto.deriveBits failed: ${e}`, cryptoFailMsg());
-  }
-
-  const now = new Date();
-  console.log(`E2e import/export: deriveKeys took ${(now - start)}ms`);
-
-  const aesKey = keybits.slice(0, 32);
-  const hmacKey = keybits.slice(32);
-
-  const aesProm = subtleCrypto.importKey(
-    'raw',
-    aesKey,
-    { name: 'AES-CTR' },
-    false,
-    ['encrypt', 'decrypt'],
-  ).catch((e) => {
-    throw friendlyError(`subtleCrypto.importKey failed for AES key: ${e}`, cryptoFailMsg());
-  });
-
-  const hmacProm = subtleCrypto.importKey(
-    'raw',
-    hmacKey,
-    {
-      name: 'HMAC',
-      hash: { name: 'SHA-256' },
-    },
-    false,
-    ['sign', 'verify'],
-  ).catch((e) => {
-    throw friendlyError(`subtleCrypto.importKey failed for HMAC key: ${e}`, cryptoFailMsg());
-  });
-
-  // eslint-disable-next-line no-return-await
-  return await Promise.all([aesProm, hmacProm]);
-}
-
-/**
- * Decode a base64 string to a typed array of uint8.
- * @param {string} base64 The base64 to decode.
- * @return {Uint8Array} The decoded data.
- */
-function decodeBase64(base64) {
-  // window.atob returns a unicode string with codepoints in the range 0-255.
-  const latin1String = window.atob(base64);
-  // Encode the string as a Uint8Array
-  const uint8Array = new Uint8Array(latin1String.length);
-  for (let i = 0; i < latin1String.length; i += 1) {
-    uint8Array[i] = latin1String.charCodeAt(i);
-  }
-  return uint8Array;
-}
-
-/**
- * Encode a typed array of uint8 as base64.
- * @param {Uint8Array} uint8Array The data to encode.
- * @return {string} The base64.
- */
-function encodeBase64(uint8Array) {
-  // Misinterpt the Uint8Array as Latin-1.
-  // window.btoa expects a unicode string with codepoints in the range 0-255.
-  const latin1String = String.fromCharCode.apply(null, uint8Array);
-  // Use the builtin base64 encoder.
-  return window.btoa(latin1String);
-}
-
-const HEADER_LINE = '-----BEGIN MEGOLM SESSION DATA-----';
-const TRAILER_LINE = '-----END MEGOLM SESSION DATA-----';
-
-/**
- * Unbase64 an ascii-armoured megolm key file
- *
- * Strips the header and trailer lines, and unbase64s the content
- *
- * @param {ArrayBuffer} data  input file
- * @return {Uint8Array} unbase64ed content
- */
-function unpackMegolmKeyFile(data) {
-  // parse the file as a great big String. This should be safe, because there
-  // should be no non-ASCII characters, and it means that we can do string
-  // comparisons to find the header and footer, and feed it into window.atob.
-  const fileStr = new TextDecoder().decode(new Uint8Array(data));
-
-  // look for the start line
-  let lineStart = 0;
-  while (1) {
-    const lineEnd = fileStr.indexOf('\n', lineStart);
-    if (lineEnd < 0) {
-      throw new Error('Header line not found');
-    }
-    const line = fileStr.slice(lineStart, lineEnd).trim();
-
-    // start the next line after the newline
-    lineStart = lineEnd + 1;
-
-    if (line === HEADER_LINE) {
-      break;
-    }
-  }
-
-  const dataStart = lineStart;
-
-  // look for the end line
-  while (1) {
-    const lineEnd = fileStr.indexOf('\n', lineStart);
-    const line = fileStr.slice(lineStart, lineEnd < 0 ? undefined : lineEnd).trim();
-    if (line === TRAILER_LINE) {
-      break;
-    }
-
-    if (lineEnd < 0) {
-      throw new Error('Trailer line not found');
-    }
-
-    // start the next line after the newline
-    lineStart = lineEnd + 1;
-  }
-
-  const dataEnd = lineStart;
-  return decodeBase64(fileStr.slice(dataStart, dataEnd));
-}
-
-
-/**
- * ascii-armour a  megolm key file
- *
- * base64s the content, and adds header and trailer lines
- *
- * @param {Uint8Array} data  raw data
- * @return {ArrayBuffer} formatted file
- */
-function packMegolmKeyFile(data) {
-  // we split into lines before base64ing, because encodeBase64 doesn't deal
-  // terribly well with large arrays.
-  const LINE_LENGTH = ((72 * 4) / 3);
-  const nLines = Math.ceil(data.length / LINE_LENGTH);
-  const lines = new Array(nLines + 3);
-  lines[0] = HEADER_LINE;
-  let o = 0;
-  let i;
-  for (i = 1; i <= nLines; i += 1) {
-    lines[i] = encodeBase64(data.subarray(o, o+LINE_LENGTH));
-    o += LINE_LENGTH;
-  }
-  lines[i] = TRAILER_LINE;
-  i += 1;
-  lines[i] = '';
-  return (new TextEncoder().encode(lines.join('\n'))).buffer;
-}
-
-export async function decryptMegolmKeyFile(data, password) {
-  const body = unpackMegolmKeyFile(data);
-
-  // check we have a version byte
-  if (body.length < 1) {
-    throw friendlyError('Invalid file: too short', 'Not a valid keyfile');
-  }
-
-  const version = body[0];
-  if (version !== 1) {
-    throw friendlyError('Unsupported version', 'Not a valid keyfile');
-  }
-
-  const ciphertextLength = body.length - (1 + 16 + 16 + 4 + 32);
-  if (ciphertextLength < 0) {
-    throw friendlyError('Invalid file: too short', 'Not a valid keyfile');
-  }
-
-  const salt = body.subarray(1, 1 + 16);
-  const iv = body.subarray(17, 17 + 16);
-  const iterations = body[33] << 24 | body[34] << 16 | body[35] << 8 | body[36];
-  const ciphertext = body.subarray(37, 37 + ciphertextLength);
-  const hmac = body.subarray(-32);
-
-  const [aesKey, hmacKey] = await deriveKeys(salt, iterations, password);
-  const toVerify = body.subarray(0, -32);
-
-  let isValid;
-  try {
-    isValid = await subtleCrypto.verify(
-      { name: 'HMAC' },
-      hmacKey,
-      hmac,
-      toVerify,
-    );
-  } catch (e) {
-    throw friendlyError(`subtleCrypto.verify failed: ${e}`, cryptoFailMsg());
-  }
-  if (!isValid) {
-    throw friendlyError('hmac mismatch', 'Authentication check failed: Incorrect password?');
-  }
-
-  let plaintext;
-  try {
-    plaintext = await subtleCrypto.decrypt(
-      {
-        name: 'AES-CTR',
-        counter: iv,
-        length: 64,
-      },
-      aesKey,
-      ciphertext,
-    );
-  } catch (e) {
-    throw friendlyError(`subtleCrypto.decrypt failed: ${e}`, cryptoFailMsg());
-  }
-
-  return new TextDecoder().decode(new Uint8Array(plaintext));
-}
-
-/**
- * Encrypt a megolm key file
- *
- * @param {String} data
- * @param {String} password
- * @param {Object=} options
- * @param {Number=} options.kdf_rounds Number of iterations to perform of the
- *    key-derivation function.
- * @return {Promise<ArrayBuffer>} promise for encrypted output
- */
-export async function encryptMegolmKeyFile(data, password, options) {
-  options = options || {};
-  const kdfRounds = options.kdf_rounds || 500000;
-
-  const salt = new Uint8Array(16);
-  window.crypto.getRandomValues(salt);
-
-  const iv = new Uint8Array(16);
-  window.crypto.getRandomValues(iv);
-
-  // clear bit 63 of the IV to stop us hitting the 64-bit counter boundary
-  // (which would mean we wouldn't be able to decrypt on Android). The loss
-  // of a single bit of iv is a price we have to pay.
-  iv[8] &= 0x7f;
-
-  const [aesKey, hmacKey] = await deriveKeys(salt, kdfRounds, password);
-  const encodedData = new TextEncoder().encode(data);
-
-  let ciphertext;
-  try {
-    ciphertext = await subtleCrypto.encrypt(
-      {
-        name: 'AES-CTR',
-        counter: iv,
-        length: 64,
-      },
-      aesKey,
-      encodedData,
-    );
-  } catch (e) {
-    throw friendlyError('subtleCrypto.encrypt failed: ' + e, cryptoFailMsg());
-  }
-
-  const cipherArray = new Uint8Array(ciphertext);
-  const bodyLength = (1+salt.length+iv.length+4+cipherArray.length+32);
-  const resultBuffer = new Uint8Array(bodyLength);
-  let idx = 0;
-  resultBuffer[idx++] = 1; // version
-  resultBuffer.set(salt, idx); idx += salt.length;
-  resultBuffer.set(iv, idx); idx += iv.length;
-  resultBuffer[idx++] = kdfRounds >> 24;
-  resultBuffer[idx++] = (kdfRounds >> 16) & 0xff;
-  resultBuffer[idx++] = (kdfRounds >> 8) & 0xff;
-  resultBuffer[idx++] = kdfRounds & 0xff;
-  resultBuffer.set(cipherArray, idx); idx += cipherArray.length;
-
-  const toSign = resultBuffer.subarray(0, idx);
-
-  let hmac;
-  try {
-    hmac = await subtleCrypto.sign(
-      { name: 'HMAC' },
-      hmacKey,
-      toSign,
-    );
-  } catch (e) {
-    throw friendlyError('subtleCrypto.sign failed: ' + e, cryptoFailMsg());
-  }
-
-  const hmacArray = new Uint8Array(hmac);
-  resultBuffer.set(hmacArray, idx);
-  return packMegolmKeyFile(resultBuffer);
-}

From 8133cac919c30084bae923b70806368f59302b08 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 5 Aug 2026 18:04:13 +0530
Subject: [PATCH 056/158] move device rename input in-place of current name

---
 .../features/settings/devices/DeviceTile.tsx  | 97 +++++++++----------
 1 file changed, 47 insertions(+), 50 deletions(-)

diff --git a/src/app/features/settings/devices/DeviceTile.tsx b/src/app/features/settings/devices/DeviceTile.tsx
index 892dadea..6ddd1165 100644
--- a/src/app/features/settings/devices/DeviceTile.tsx
+++ b/src/app/features/settings/devices/DeviceTile.tsx
@@ -145,7 +145,6 @@ function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceR
 
   return (
     <Box as="form" onSubmit={handleSubmit} direction="Column" gap="100">
-      <Text size="L400">Device Name</Text>
       <Box gap="200">
         <Box grow="Yes" direction="Column">
           <Input
@@ -171,7 +170,7 @@ function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceR
           >
             <Text size="B300">Save</Text>
           </Button>
-          <Button
+          <IconButton
             type="button"
             size="300"
             variant="Secondary"
@@ -179,17 +178,16 @@ function DeviceRename({ device, onCancel, onRename, refreshDeviceList }: DeviceR
             fill="Soft"
             onClick={onCancel}
             disabled={renaming}
+            aria-label="Cancel"
           >
-            <Text size="B300">Cancel</Text>
-          </Button>
+            <Icon size="400" src={Icons.Cross} />
+          </IconButton>
         </Box>
       </Box>
-      {renameState.status === AsyncStatus.Error ? (
+      {renameState.status === AsyncStatus.Error && (
         <Text size="T200" style={{ color: color.Critical.Main }}>
           {renameState.error instanceof Error ? renameState.error.message : 'Unknown Error'}
         </Text>
-      ) : (
-        <Text size="T200">Device names are visible to public.</Text>
       )}
     </Box>
   );
@@ -284,55 +282,54 @@ export function DeviceTile({
   }, []);
 
   return (
-    <>
-      <SettingTile
-        before={
-          <IconButton
-            variant={deleted ? 'Critical' : 'Secondary'}
-            outlined={deleted}
-            radii="300"
-            onClick={() => setDetails(!details)}
-          >
-            <Icon size="50" src={details ? Icons.ChevronBottom : Icons.ChevronRight} />
-          </IconButton>
-        }
-        after={
-          !edit && (
-            <Box shrink="No" alignItems="Center" gap="200">
-              {options}
-              {!deleted && (
-                <Chip
-                  variant="Secondary"
-                  radii="Pill"
-                  onClick={() => setEdit(true)}
-                  disabled={disabled}
-                >
-                  <Text size="B300">Edit</Text>
-                </Chip>
-              )}
-            </Box>
-          )
-        }
-      >
-        <Text size="T300">{device.display_name ?? device.device_id}</Text>
-        <Box direction="Column">
-          {typeof activeTs === 'number' && <DeviceActiveTime ts={activeTs} />}
-          {details && (
-            <>
-              <DeviceDetails device={device} />
-              {children}
-            </>
-          )}
-        </Box>
-      </SettingTile>
-      {edit && (
+    <SettingTile
+      before={
+        <IconButton
+          variant={deleted ? 'Critical' : 'Secondary'}
+          outlined={deleted}
+          radii="300"
+          onClick={() => setDetails(!details)}
+        >
+          <Icon size="50" src={details ? Icons.ChevronBottom : Icons.ChevronRight} />
+        </IconButton>
+      }
+      after={
+        !edit && (
+          <Box shrink="No" alignItems="Center" gap="200">
+            {options}
+            {!deleted && (
+              <Chip
+                variant="Secondary"
+                radii="Pill"
+                onClick={() => setEdit(true)}
+                disabled={disabled}
+              >
+                <Text size="B300">Edit</Text>
+              </Chip>
+            )}
+          </Box>
+        )
+      }
+    >
+      {edit ? (
         <DeviceRename
           device={device}
           onCancel={() => setEdit(false)}
           onRename={handleRename}
           refreshDeviceList={refreshDeviceList}
         />
+      ) : (
+        <Text size="T300">{device.display_name?.trim() || device.device_id}</Text>
       )}
-    </>
+      <Box direction="Column">
+        {typeof activeTs === 'number' && <DeviceActiveTime ts={activeTs} />}
+        {details && (
+          <>
+            <DeviceDetails device={device} />
+            {children}
+          </>
+        )}
+      </Box>
+    </SettingTile>
   );
 }

From 613d6006ca9ad0a20929d116420779a3e2cac189 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 9 Aug 2026 15:15:38 +0530
Subject: [PATCH 057/158] move device verification setup and reset to new sdk
 also fix OAuth UIA

---
 src/app/components/ActionUIA.tsx              |   7 +-
 .../components/DeviceVerificationSetup.tsx    | 411 ++++++++++++------
 src/app/components/SecretStorage.tsx          |   4 +-
 src/app/components/uia-stages/OAuthStage.tsx  |  78 ++++
 src/app/components/uia-stages/index.ts        |   1 +
 src/app/features/settings/devices/Devices.tsx |  13 +-
 .../settings/devices/Verification.tsx         | 100 ++---
 src/app/hooks/useUIAFlows.ts                  |   4 +-
 src/app/utils/matrix-uia.ts                   |  13 +-
 src/client/MegolmBackup.ts                    |  27 +-
 src/client/initMatrix.ts                      |   2 -
 src/client/secretStorageKeys.js               |  37 --
 12 files changed, 438 insertions(+), 259 deletions(-)
 create mode 100644 src/app/components/uia-stages/OAuthStage.tsx
 delete mode 100644 src/client/secretStorageKeys.js

diff --git a/src/app/components/ActionUIA.tsx b/src/app/components/ActionUIA.tsx
index cced4f2f..19cf11cf 100644
--- a/src/app/components/ActionUIA.tsx
+++ b/src/app/components/ActionUIA.tsx
@@ -2,10 +2,10 @@ import React, { ReactNode } from 'react';
 import { AuthResponse, AuthType, UIAFlow } from '../utils/matrix-uia';
 import { useSupportedUIAFlows, useUIACompleted, useUIAFlow } from '../hooks/useUIAFlows';
 import { UIAFlowOverlay } from './UIAFlowOverlay';
-import { PasswordStage, SSOStage } from './uia-stages';
+import { OAuthStage, PasswordStage, SSOStage } from './uia-stages';
 import { useClient } from '../hooks/useClient';
 
-export const SUPPORTED_IN_APP_UIA_STAGES = [AuthType.Password, AuthType.Sso];
+export const SUPPORTED_IN_APP_UIA_STAGES = [AuthType.Password, AuthType.Sso, AuthType.OAuth];
 
 type ActionUIAProps = {
   authData: AuthResponse;
@@ -50,6 +50,9 @@ export function ActionUIA({ authData, ongoingFlow, action, onCancel }: ActionUIA
           submitAuthDict={action}
         />
       )}
+      {stageToComplete.type === AuthType.OAuth && (
+        <OAuthStage stageData={stageToComplete} onCancel={onCancel} submitAuthDict={action} />
+      )}
     </UIAFlowOverlay>
   );
 }
diff --git a/src/app/components/DeviceVerificationSetup.tsx b/src/app/components/DeviceVerificationSetup.tsx
index 433fa6a1..c12eab35 100644
--- a/src/app/components/DeviceVerificationSetup.tsx
+++ b/src/app/components/DeviceVerificationSetup.tsx
@@ -1,4 +1,11 @@
-import React, { FormEventHandler, forwardRef, useCallback, useState } from 'react';
+import React, {
+  FormEventHandler,
+  forwardRef,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 import {
   Dialog,
   Header,
@@ -12,154 +19,236 @@ import {
   Chip,
   color,
   Spinner,
+  ProgressBar,
 } from 'folds';
 import FileSaver from 'file-saver';
-import to from 'await-to-js';
-import { AuthDict, IAuthData, MatrixError, UIAuthCallback } from 'matrix-js-sdk';
+import { BackupManager } from 'neurone/lib/crypto/machine/backup';
+import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
+import {
+  AesHmacSha2,
+  AesHmacSha2KeyDescription,
+  DefaultKey,
+  KeyStorage,
+  Passphrase,
+  RecoveryKey,
+  Secret,
+  SECRET_STORAGE_ALGORITHM_V1_AES_HMAC_SHA2,
+} from 'neurone/lib/crypto/ssss';
+import {
+  MatrixRequestRetrier,
+  MatrixUIAData,
+  MatrixUIAHandler,
+  randomString,
+  sleep,
+} from 'neurone/lib/utils';
+import { postVersion, PostVersionBody } from 'neurone/lib/api/matrix/client/v3/roomKeys';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { postDeviceSigningUpload } from 'neurone/lib/api/matrix/client/v3/keys';
 import { PasswordInput } from './password-input';
 import { ContainerColor } from '../styles/ContainerColor.css';
 import { copyToClipboard } from '../utils/dom';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
-import { clearSecretStorageKeys } from '../../client/secretStorageKeys';
 import { ActionUIA, ActionUIAFlowsLoader } from './ActionUIA';
-import { useMatrixClient } from '../hooks/useMatrixClient';
-import { useAlive } from '../hooks/useAlive';
 import { UseStateProvider } from './UseStateProvider';
+import { useClient } from '../hooks/useClient';
+import { getMxIdLocalPart, getMxIdServer } from '../utils/matrix';
+import { AccountDataType } from '../../types/matrix/accountData';
+import { useAlive } from '../hooks/useAlive';
 
-type UIACallback<T> = (
-  authDict: AuthDict | null
-) => Promise<[IAuthData, undefined] | [undefined, T]>;
-
-type PerformAction<T> = (authDict: AuthDict | null) => Promise<T>;
-
-type UIAAction<T> = {
-  authData: IAuthData;
-  callback: UIACallback<T>;
-  cancelCallback: () => void;
+type SetupProgressChecklist = {
+  bootstrapCrossSinging?: boolean;
+  putMasterAccountData?: boolean;
+  putSelfAccountData?: boolean;
+  putUserAcountData?: boolean;
+  verfiyOwnDevice?: boolean;
+  postBackupVersion?: boolean;
+  putBackupAccountData?: boolean;
+  putRecoveryKeyAccountData?: boolean;
+  putDefaultKeyAccountData?: boolean;
 };
 
-function makeUIAAction<T>(
-  authData: IAuthData,
-  performAction: PerformAction<T>,
-  resolve: (data: T) => void,
-  reject: (error?: any) => void
-): UIAAction<T> {
-  const action: UIAAction<T> = {
-    authData,
-    callback: async (authDict) => {
-      const [error, data] = await to<T, MatrixError | Error>(performAction(authDict));
-
-      if (error instanceof MatrixError && error.httpStatus === 401) {
-        return [error.data as IAuthData, undefined];
-      }
-
-      if (error) {
-        reject(error);
-        throw error;
-      }
-
-      resolve(data);
-      return [undefined, data];
-    },
-    cancelCallback: reject,
-  };
-
-  return action;
-}
-
 type SetupVerificationProps = {
   onComplete: (recoveryKey: string) => void;
 };
 function SetupVerification({ onComplete }: SetupVerificationProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
+  const uia = useMemo(() => new MatrixUIAHandler(), []);
+  const [uiaData, setUIAData] = useState<MatrixUIAData>();
+  const [setupProgress, setSetupProgress] = useState<SetupProgressChecklist>();
   const alive = useAlive();
 
-  const [uiaAction, setUIAAction] = useState<UIAAction<void>>();
-  const [nextAuthData, setNextAuthData] = useState<IAuthData | null>(); // null means no next action.
+  useEffect(() => uia.onUIA.subscribe(setUIAData), [uia]);
 
   const handleAction = useCallback(
-    async (authDict: AuthDict) => {
-      if (!uiaAction) {
-        throw new Error('Unexpected Error! UIA action is perform without data.');
-      }
-      if (alive()) {
-        setNextAuthData(null);
-      }
-      const [authData] = await uiaAction.callback(authDict);
-
-      if (alive() && authData) {
-        setNextAuthData(authData);
-      }
+    (authDict: object) => {
+      setUIAData(undefined);
+      uia.retry(authDict);
     },
-    [uiaAction, alive]
+    [uia]
   );
 
-  const resetUIA = useCallback(() => {
-    if (!alive()) return;
-    setUIAAction(undefined);
-    setNextAuthData(undefined);
-  }, [alive]);
-
-  const authUploadDeviceSigningKeys: UIAuthCallback<void> = useCallback(
-    (makeRequest) =>
-      new Promise<void>((resolve, reject) => {
-        makeRequest(null)
-          .then(() => {
-            resolve();
-            resetUIA();
-          })
-          .catch((error) => {
-            if (error instanceof MatrixError && error.httpStatus === 401) {
-              const authData = error.data as IAuthData;
-              const action = makeUIAAction(
-                authData,
-                makeRequest as PerformAction<void>,
-                resolve,
-                (err) => {
-                  resetUIA();
-                  reject(err);
-                }
-              );
-              if (alive()) {
-                setUIAAction(action);
-              } else {
-                reject(new Error('Authentication failed! Failed to setup device verification.'));
-              }
-              return;
-            }
-            reject(error);
-          });
-      }),
-    [alive, resetUIA]
-  );
+  const handleCancel = useCallback(() => {
+    setUIAData(undefined);
+    uia.clear();
+  }, [uia]);
 
   const [setupState, setup] = useAsyncCallback<void, Error, [string | undefined]>(
     useCallback(
       async (passphrase) => {
-        const crypto = mx.getCrypto();
-        if (!crypto) throw new Error('Unexpected Error! Crypto module not found!');
+        setSetupProgress({});
+        const retrier = new MatrixRequestRetrier(sleep);
 
-        const recoveryKeyData = await crypto.createRecoveryKeyFromPassphrase(passphrase);
-        if (!recoveryKeyData.encodedPrivateKey) {
-          throw new Error('Unexpected Error! Failed to create recovery key.');
+        const defaultKeyId = randomString(16);
+
+        const passData = passphrase ? await Passphrase.create(passphrase) : undefined;
+        const recoveryKey = passData?.key ?? AesHmacSha2.generateRawKey();
+
+        const uploadDeviceSigningKeys = async (bodyStr: string) => {
+          const body = JSON.parse(bodyStr);
+          const resp = await retrier.execute(() =>
+            uia.execute((authData) =>
+              ct.requestAuthJSON(postDeviceSigningUpload({ body: { ...body, auth: authData } }))
+            )
+          );
+          const [err] = await parseMatrixResp(resp);
+          if (err) throw new Error(err.data.error ?? err.data.errcode);
+        };
+
+        await ct.machine.crossSigning.bootstrapCrossSigning(uploadDeviceSigningKeys);
+        const crossSigning = await ct.machine.crossSigning.exportKeys();
+        if (!crossSigning || !crossSigning.master || !crossSigning.self || !crossSigning.user) {
+          throw new Error('Failed to reset cross signing. No cross signing keys available.');
         }
-        clearSecretStorageKeys();
+        if (alive()) setSetupProgress((v) => ({ ...v, bootstrapCrossSinging: true }));
 
-        await crypto.bootstrapSecretStorage({
-          createSecretStorageKey: async () => recoveryKeyData,
-          setupNewSecretStorage: true,
-        });
+        const masterEnc = await AesHmacSha2.encrypt(
+          recoveryKey,
+          AccountDataType.CrossSigningMaster,
+          crossSigning.master
+        );
+        const selfEnc = await AesHmacSha2.encrypt(
+          recoveryKey,
+          AccountDataType.CrossSigningSelf,
+          crossSigning.self
+        );
+        const userEnc = await AesHmacSha2.encrypt(
+          recoveryKey,
+          AccountDataType.CrossSigningUser,
+          crossSigning.user
+        );
 
-        await crypto.bootstrapCrossSigning({
-          authUploadDeviceSigningKeys,
-          setupNewCrossSigning: true,
-        });
+        const { userId } = ct.session;
+        const masterSecret: Secret = { encrypted: { [defaultKeyId]: masterEnc } };
+        const selfSecret: Secret = { encrypted: { [defaultKeyId]: selfEnc } };
+        const userSecret: Secret = { encrypted: { [defaultKeyId]: userEnc } };
+        await retrier.execute(() =>
+          ct.requestAuthJSON(
+            putAccountData({
+              pathParams: { userId, type: AccountDataType.CrossSigningMaster },
+              body: masterSecret,
+            })
+          )
+        );
+        if (alive()) setSetupProgress((v) => ({ ...v, putMasterAccountData: true }));
+        await retrier.execute(() =>
+          ct.requestAuthJSON(
+            putAccountData({
+              pathParams: { userId, type: AccountDataType.CrossSigningSelf },
+              body: selfSecret,
+            })
+          )
+        );
+        if (alive()) setSetupProgress((v) => ({ ...v, putSelfAccountData: true }));
+        await retrier.execute(() =>
+          ct.requestAuthJSON(
+            putAccountData({
+              pathParams: { userId, type: AccountDataType.CrossSigningUser },
+              body: userSecret,
+            })
+          )
+        );
+        if (alive()) setSetupProgress((v) => ({ ...v, putUserAcountData: true }));
 
-        await crypto.resetKeyBackup();
+        const device = await ct.machine.userTracker.getDevice(
+          ct.session.userId,
+          ct.session.deviceId
+        );
+        if (device && !device.crossSigningTrusted) {
+          const resp = await device.verify();
+          const [err] = await parseMatrixResp(resp);
+          if (err) {
+            throw new Error(err.data.error ?? 'Failed to verify. Signature upload request failed.');
+          }
+          await ct.machine.outgoingRequests.queryKeys([ct.session.userId]);
+        }
+        if (alive()) setSetupProgress((v) => ({ ...v, verfiyOwnDevice: true }));
 
-        onComplete(recoveryKeyData.encodedPrivateKey);
+        const backupKey = BackupManager.createBackupKey();
+        await ct.megolmBackup.cacheDecryptionKey(backupKey.privateKey);
+
+        const backupEnc = await AesHmacSha2.encrypt(
+          recoveryKey,
+          AccountDataType.MegolmBackupV1,
+          backupKey.privateKey
+        );
+
+        const backupAuthData = {
+          public_key: backupKey.publicKey,
+        };
+        await ct.machine.sign(backupAuthData);
+
+        const backupVersion: PostVersionBody = {
+          algorithm: backupKey.algorithm,
+          auth_data: backupAuthData,
+        };
+        await retrier.execute(() => ct.requestAuthJSON(postVersion({ body: backupVersion })));
+        if (alive()) setSetupProgress((v) => ({ ...v, postBackupVersion: true }));
+
+        const backupSecret: Secret = { encrypted: { [defaultKeyId]: backupEnc } };
+
+        await retrier.execute(() =>
+          ct.requestAuthJSON(
+            putAccountData({
+              pathParams: { userId, type: AccountDataType.MegolmBackupV1 },
+              body: backupSecret,
+            })
+          )
+        );
+        if (alive()) setSetupProgress((v) => ({ ...v, putBackupAccountData: true }));
+
+        const { iv, mac } = await AesHmacSha2.driveKeyMetaData(recoveryKey);
+
+        const keyDescription: AesHmacSha2KeyDescription = {
+          algorithm: SECRET_STORAGE_ALGORITHM_V1_AES_HMAC_SHA2,
+          passphrase: passData?.passphrase,
+          iv,
+          mac,
+        };
+        await retrier.execute(() =>
+          ct.requestAuthJSON(
+            putAccountData({
+              pathParams: { userId, type: KeyStorage.keyIdentifier(defaultKeyId) },
+              body: keyDescription,
+            })
+          )
+        );
+        if (alive()) setSetupProgress((v) => ({ ...v, putRecoveryKeyAccountData: true }));
+        const defaultKey: DefaultKey = {
+          key: defaultKeyId,
+        };
+        await retrier.execute(() =>
+          ct.requestAuthJSON(
+            putAccountData({
+              pathParams: { userId, type: KeyStorage.defaultKeyIdentifier() },
+              body: defaultKey,
+            })
+          )
+        );
+        if (alive()) setSetupProgress((v) => ({ ...v, putDefaultKeyAccountData: true }));
+
+        onComplete(RecoveryKey.encode(recoveryKey));
       },
-      [mx, onComplete, authUploadDeviceSigningKeys]
+      [ct, uia, onComplete, alive]
     )
   );
 
@@ -179,43 +268,79 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
     setup(passphrase);
   };
 
+  const setupSteps: {
+    key: keyof SetupProgressChecklist;
+    label: string;
+  }[] = useMemo(
+    () => [
+      { key: 'bootstrapCrossSinging', label: 'Setting up cross-signing' },
+      { key: 'putMasterAccountData', label: 'Securing your master signing key' },
+      { key: 'putSelfAccountData', label: 'Securing your self signing key' },
+      { key: 'putUserAcountData', label: 'Securing your user signing key' },
+      { key: 'verfiyOwnDevice', label: 'Verifying this device' },
+      { key: 'postBackupVersion', label: 'Creating your secure backup' },
+      { key: 'putBackupAccountData', label: 'Securing your backup key' },
+      { key: 'putRecoveryKeyAccountData', label: 'Saving your recovery key information' },
+      { key: 'putDefaultKeyAccountData', label: 'Setting up your recovery key' },
+    ],
+    []
+  );
+
+  const completedSteps = setupSteps.filter(({ key }) => setupProgress?.[key] === true).length;
+
   return (
     <Box as="form" onSubmit={handleSubmit} direction="Column" gap="400">
-      <Text size="T300">
-        Generate a <b>Recovery Key</b> for verifying identity if you do not have access to other
-        devices. Additionally, setup a passphrase as a memorable alternative.
-      </Text>
-      <Box direction="Column" gap="100">
-        <Text size="L400">Passphrase (Optional)</Text>
-        <PasswordInput name="passphraseInput" size="400" readOnly={loading} />
-      </Box>
-      <Button
-        type="submit"
-        disabled={loading}
-        before={loading && <Spinner size="200" variant="Primary" fill="Solid" />}
-      >
-        <Text size="B400">Continue</Text>
-      </Button>
+      {setupProgress ? (
+        <Box direction="Column" gap="400">
+          <Text size="L400">Setup progress</Text>
+          <Box style={{ paddingLeft: config.space.S200 }} direction="Column" gap="100">
+            {setupSteps.map(({ key, label }) => (
+              <Text size="T200" key={key}>
+                {setupProgress[key] ? '✅' : '⏳'} {label}
+              </Text>
+            ))}
+          </Box>
+          <ProgressBar variant="Secondary" size="300" min={0} value={completedSteps} />
+        </Box>
+      ) : (
+        <>
+          <Text size="T300">
+            Generate a <b>Recovery Key</b> for verifying identity if you do not have access to other
+            devices. Additionally, setup a passphrase as a memorable alternative.
+          </Text>
+          <Box direction="Column" gap="100">
+            <Text size="L400">Passphrase (Optional)</Text>
+            <PasswordInput name="passphraseInput" size="400" readOnly={loading} />
+          </Box>
+          <Button
+            type="submit"
+            disabled={loading}
+            before={loading && <Spinner size="200" variant="Primary" fill="Solid" />}
+          >
+            <Text size="B400">Continue</Text>
+          </Button>
+        </>
+      )}
       {setupState.status === AsyncStatus.Error && (
         <Text size="T200" style={{ color: color.Critical.Main }}>
           <b>{setupState.error ? setupState.error.message : 'Unexpected Error!'}</b>
         </Text>
       )}
-      {nextAuthData !== null && uiaAction && (
+      {uiaData && (
         <ActionUIAFlowsLoader
-          authData={nextAuthData ?? uiaAction.authData}
+          authData={uiaData}
           unsupported={() => (
-            <Text size="T200">
+            <Text size="T200" style={{ color: color.Critical.Main }}>
               Authentication steps to perform this action are not supported by client.
             </Text>
           )}
         >
           {(ongoingFlow) => (
             <ActionUIA
-              authData={nextAuthData ?? uiaAction.authData}
+              authData={uiaData}
               ongoingFlow={ongoingFlow}
               action={handleAction}
-              onCancel={uiaAction.cancelCallback}
+              onCancel={handleCancel}
             />
           )}
         </ActionUIAFlowsLoader>
@@ -228,6 +353,7 @@ type RecoveryKeyDisplayProps = {
   recoveryKey: string;
 };
 function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
+  const ct = useClient();
   const [show, setShow] = useState(false);
 
   const handleCopy = () => {
@@ -235,10 +361,13 @@ function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
   };
 
   const handleDownload = () => {
+    const username = getMxIdLocalPart(ct.session.userId);
+    const servername = getMxIdServer(ct.session.userId);
+
     const blob = new Blob([recoveryKey], {
       type: 'text/plain;charset=us-ascii',
     });
-    FileSaver.saveAs(blob, 'recovery-key.txt');
+    FileSaver.saveAs(blob, `Recovery Key - ${username} (${servername}).txt`);
   };
 
   const safeToDisplayKey = show ? recoveryKey : recoveryKey.replace(/[^\s]/g, '*');
@@ -270,12 +399,12 @@ function RecoveryKeyDisplay({ recoveryKey }: RecoveryKeyDisplayProps) {
         </Box>
       </Box>
       <Box direction="Column" gap="200">
-        <Button onClick={handleCopy}>
-          <Text size="B400">Copy</Text>
-        </Button>
-        <Button onClick={handleDownload} fill="Soft">
+        <Button onClick={handleDownload}>
           <Text size="B400">Download</Text>
         </Button>
+        <Button onClick={handleCopy} fill="Soft">
+          <Text size="B400">Copy</Text>
+        </Button>
       </Box>
     </Box>
   );
diff --git a/src/app/components/SecretStorage.tsx b/src/app/components/SecretStorage.tsx
index de9a1c6d..7e99647b 100644
--- a/src/app/components/SecretStorage.tsx
+++ b/src/app/components/SecretStorage.tsx
@@ -1,11 +1,11 @@
 import React, { FormEventHandler, useCallback } from 'react';
 import { Box, Text, Button, Spinner, color } from 'folds';
-import { decodeRecoveryKey } from 'matrix-js-sdk/lib/crypto-api';
 import {
   AesHmacSha2,
   AesHmacSha2KeyDescription,
   Passphrase,
   PassphraseInfo,
+  RecoveryKey,
 } from 'neurone/lib/crypto/ssss';
 import { PasswordInput } from './password-input';
 import { AsyncStatus, useAsyncCallback } from '../hooks/useAsyncCallback';
@@ -129,7 +129,7 @@ export function SecretStorageRecoveryKey({
   >(
     useCallback(
       async (recoveryKey) => {
-        const decodedRecoveryKey = decodeRecoveryKey(recoveryKey);
+        const decodedRecoveryKey = RecoveryKey.decode(recoveryKey);
 
         const { mac: regeneratedMac } = await AesHmacSha2.driveKeyMetaData(
           decodedRecoveryKey,
diff --git a/src/app/components/uia-stages/OAuthStage.tsx b/src/app/components/uia-stages/OAuthStage.tsx
new file mode 100644
index 00000000..ead23385
--- /dev/null
+++ b/src/app/components/uia-stages/OAuthStage.tsx
@@ -0,0 +1,78 @@
+import { Box, Button, color, config, Dialog, Header, Icon, IconButton, Icons, Text } from 'folds';
+import React, { useCallback } from 'react';
+import { ObjectReader } from 'neurone/lib/utils';
+import { StageComponentProps } from './types';
+
+export function OAuthStage({ stageData, submitAuthDict, onCancel }: StageComponentProps) {
+  const { errorCode, error, session, info } = stageData;
+  const url = ObjectReader.string(info, 'url');
+
+  const handleSubmit = useCallback(() => {
+    submitAuthDict({
+      session,
+    });
+  }, [submitAuthDict, session]);
+
+  return (
+    <Dialog>
+      <Header
+        style={{
+          padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+        }}
+        variant="Surface"
+        size="500"
+      >
+        <Box grow="Yes">
+          <Text size="H4">Reset encryption identity</Text>
+        </Box>
+        <IconButton size="300" onClick={onCancel} radii="300">
+          <Icon src={Icons.Cross} />
+        </IconButton>
+      </Header>
+
+      <Box
+        style={{ padding: `0 ${config.space.S400} ${config.space.S400}` }}
+        direction="Column"
+        gap="400"
+      >
+        <Text size="T200">
+          To reset your end-to-end encryption cross-signing identity, you need to approve this
+          request from your account dashboard.
+        </Text>
+
+        <Box direction="Column" gap="100">
+          <Text size="T200">
+            <b>1.</b> Open your account dashboard and approve the request.
+          </Text>
+          <Text size="T200">
+            <b>2.</b> Return here after approving and Continue.
+          </Text>
+        </Box>
+
+        {errorCode && (
+          <Box alignItems="Center" gap="100" style={{ color: color.Critical.Main }}>
+            <Icon size="50" src={Icons.Warning} filled />
+            <Text size="T200">
+              <b>{`${errorCode}: ${error}`}</b>
+            </Text>
+          </Box>
+        )}
+        <Box direction="Column" gap="300">
+          <Button
+            variant="Secondary"
+            onClick={() => window.open(url, '_blank', 'noopener,noreferrer')}
+          >
+            <Text as="span" size="B400">
+              Open account dashboard
+            </Text>
+          </Button>
+          <Button variant="Primary" onClick={handleSubmit}>
+            <Text as="span" size="B400">
+              Continue
+            </Text>
+          </Button>
+        </Box>
+      </Box>
+    </Dialog>
+  );
+}
diff --git a/src/app/components/uia-stages/index.ts b/src/app/components/uia-stages/index.ts
index c422d988..1cde0f14 100644
--- a/src/app/components/uia-stages/index.ts
+++ b/src/app/components/uia-stages/index.ts
@@ -6,3 +6,4 @@ export * from './ReCaptchaStage';
 export * from './RegistrationTokenStage';
 export * from './SSOStage';
 export * from './TermsStage';
+export * from './OAuthStage';
diff --git a/src/app/features/settings/devices/Devices.tsx b/src/app/features/settings/devices/Devices.tsx
index 8ebcf361..2976a655 100644
--- a/src/app/features/settings/devices/Devices.tsx
+++ b/src/app/features/settings/devices/Devices.tsx
@@ -9,7 +9,6 @@ import { LocalBackup } from './LocalBackup';
 import { DeviceLogoutBtn, DeviceKeyDetails, DeviceTile, DeviceTilePlaceholder } from './DeviceTile';
 import {
   DeviceVerificationOptions,
-  EnableVerification,
   VerificationStatusBadge,
   VerifyCurrentDeviceTile,
 } from './Verification';
@@ -93,17 +92,15 @@ export function Devices({ requestClose }: DevicesProps) {
                     title="Device Verification"
                     description="To verify device identity and grant access to encrypted messages."
                     after={
-                      crossSigning ? (
-                        <Box gap="200" alignItems="Center">
+                      <Box gap="200" alignItems="Center">
+                        {crossSigning && (
                           <VerificationStatusBadge
                             verificationStatus={verificationStatus}
                             otherUnverifiedCount={unverifiedDeviceCount}
                           />
-                          <DeviceVerificationOptions />
-                        </Box>
-                      ) : (
-                        <EnableVerification />
-                      )
+                        )}
+                        <DeviceVerificationOptions enabled={!!crossSigning} />
+                      </Box>
                     }
                   />
                 </SequenceCard>
diff --git a/src/app/features/settings/devices/Verification.tsx b/src/app/features/settings/devices/Verification.tsx
index 79aacb04..2a30cef4 100644
--- a/src/app/features/settings/devices/Verification.tsx
+++ b/src/app/features/settings/devices/Verification.tsx
@@ -31,9 +31,6 @@ import {
   DeviceVerificationSetup,
 } from '../../../components/DeviceVerificationSetup';
 import { stopPropagation } from '../../../utils/keyboard';
-import { useAuthMetadata } from '../../../hooks/useAuthMetadata';
-import { withSearchParam } from '../../../pages/pathUtils';
-import { useAccountManagementActions } from '../../../hooks/useAccountManagement';
 import { useClient } from '../../../hooks/useClient';
 
 type VerificationStatusBadgeProps = {
@@ -222,46 +219,15 @@ export function VerifyOtherDeviceTile({ deviceId }: VerifyOtherDeviceTileProps)
   );
 }
 
-export function EnableVerification() {
-  const [open, setOpen] = useState(false);
-
-  const handleCancel = useCallback(() => setOpen(false), []);
-
-  return (
-    <>
-      <Button size="300" radii="300" onClick={() => setOpen(true)}>
-        <Text as="span" size="B300">
-          Enable
-        </Text>
-      </Button>
-      {open && (
-        <Overlay open backdrop={<OverlayBackdrop />}>
-          <OverlayCenter>
-            <FocusTrap
-              focusTrapOptions={{
-                initialFocus: false,
-                clickOutsideDeactivates: false,
-                escapeDeactivates: false,
-              }}
-            >
-              <DeviceVerificationSetup onCancel={handleCancel} />
-            </FocusTrap>
-          </OverlayCenter>
-        </Overlay>
-      )}
-    </>
-  );
-}
-
-export function DeviceVerificationOptions() {
+export function DeviceVerificationOptions({ enabled }: { enabled: boolean }) {
   const [menuCords, setMenuCords] = useState<RectCords>();
-  const authMetadata = useAuthMetadata();
-  const accountManagementActions = useAccountManagementActions();
 
   const [reset, setReset] = useState(false);
+  const [setup, setSetup] = useState(false);
 
-  const handleCancelReset = useCallback(() => {
+  const handleCancel = useCallback(() => {
     setReset(false);
+    setSetup(false);
   }, []);
 
   const handleMenu: MouseEventHandler<HTMLButtonElement> = (event) => {
@@ -270,32 +236,31 @@ export function DeviceVerificationOptions() {
 
   const handleReset = () => {
     setMenuCords(undefined);
-
-    if (authMetadata) {
-      const authUrl = authMetadata.account_management_uri ?? authMetadata.issuer;
-      window.open(
-        withSearchParam(authUrl, {
-          action: accountManagementActions.crossSigningReset,
-        }),
-        '_blank'
-      );
-      return;
-    }
-
     setReset(true);
   };
+  const handleEnable = () => {
+    setSetup(true);
+  };
 
   return (
     <>
-      <IconButton
-        aria-pressed={!!menuCords}
-        variant="SurfaceVariant"
-        size="300"
-        radii="300"
-        onClick={handleMenu}
-      >
-        <Icon size="100" src={Icons.VerticalDots} />
-      </IconButton>
+      {enabled ? (
+        <IconButton
+          aria-pressed={!!menuCords}
+          variant="SurfaceVariant"
+          size="300"
+          radii="300"
+          onClick={handleMenu}
+        >
+          <Icon size="100" src={Icons.VerticalDots} />
+        </IconButton>
+      ) : (
+        <Button size="300" radii="300" onClick={handleEnable}>
+          <Text as="span" size="B300">
+            Enable
+          </Text>
+        </Button>
+      )}
       <PopOut
         anchor={menuCords}
         offset={5}
@@ -332,6 +297,21 @@ export function DeviceVerificationOptions() {
           </FocusTrap>
         }
       />
+      {setup && (
+        <Overlay open backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                clickOutsideDeactivates: false,
+                escapeDeactivates: false,
+              }}
+            >
+              <DeviceVerificationSetup onCancel={handleCancel} />
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
       {reset && (
         <Overlay open backdrop={<OverlayBackdrop />}>
           <OverlayCenter>
@@ -342,7 +322,7 @@ export function DeviceVerificationOptions() {
                 escapeDeactivates: false,
               }}
             >
-              <DeviceVerificationReset onCancel={handleCancelReset} />
+              <DeviceVerificationReset onCancel={handleCancel} />
             </FocusTrap>
           </OverlayCenter>
         </Overlay>
diff --git a/src/app/hooks/useUIAFlows.ts b/src/app/hooks/useUIAFlows.ts
index f420936f..ac070502 100644
--- a/src/app/hooks/useUIAFlows.ts
+++ b/src/app/hooks/useUIAFlows.ts
@@ -66,7 +66,7 @@ export const useUIAFlow = (authData: AuthResponse, uiaFlow: UIAFlow): UIAFlowInt
     const nextStage = stages.find((stage) => !completed.includes(stage));
     if (!nextStage) return undefined;
 
-    const info = params[nextStage];
+    const info = params[nextStage] as Record<string, unknown>;
 
     return {
       type: nextStage,
@@ -86,7 +86,7 @@ export const useUIAFlow = (authData: AuthResponse, uiaFlow: UIAFlow): UIAFlowInt
     (stageType: string): StageInfo | undefined => {
       if (!hasStage(stageType)) return undefined;
 
-      return params[stageType];
+      return params[stageType] as Record<string, unknown>;
     },
     [hasStage, params]
   );
diff --git a/src/app/utils/matrix-uia.ts b/src/app/utils/matrix-uia.ts
index b174f678..19f66a71 100644
--- a/src/app/utils/matrix-uia.ts
+++ b/src/app/utils/matrix-uia.ts
@@ -8,17 +8,20 @@ export enum AuthType {
   SsoUnstable = 'org.matrix.login.sso',
   Dummy = 'm.login.dummy',
   RegistrationToken = 'm.login.registration_token',
+  OAuth = 'm.oauth',
 }
 
 export type UIAFlow = {
   stages: Array<string>;
 };
 
+export type UIAParams = Record<string, unknown>;
+
 export type AuthResponse = {
   session?: string;
   completed?: string[];
   flows?: UIAFlow[];
-  params?: Record<string, Record<string, any>>;
+  params?: UIAParams;
 };
 
 export const getSupportedUIAFlows = (uiaFlows: UIAFlow[], supportedStages: string[]): UIAFlow[] => {
@@ -34,7 +37,6 @@ export const getUIACompleted = (authData: AuthResponse): string[] => {
   return completed;
 };
 
-export type UIAParams = Record<string, Record<string, unknown>>;
 export const getUIAParams = (authData: AuthResponse): UIAParams => {
   const params = authData.params ?? {};
   return params;
@@ -89,7 +91,12 @@ export const requiredStageInFlows = (uiaFlows: UIAFlow[], stage: string) =>
 
 export const getLoginTermUrl = (params: UIAParams): string | undefined => {
   const terms = params[AuthType.Terms];
-  if (terms && 'policies' in terms && typeof terms.policies === 'object') {
+  if (
+    typeof terms === 'object' &&
+    terms &&
+    'policies' in terms &&
+    typeof terms.policies === 'object'
+  ) {
     if (terms.policies === null) return undefined;
     if ('privacy_policy' in terms.policies && typeof terms.policies.privacy_policy === 'object') {
       if (terms.policies.privacy_policy === null) return undefined;
diff --git a/src/client/MegolmBackup.ts b/src/client/MegolmBackup.ts
index 813da0eb..5d19c8ba 100644
--- a/src/client/MegolmBackup.ts
+++ b/src/client/MegolmBackup.ts
@@ -51,6 +51,8 @@ export class MegolmBackup implements Disposable {
 
   public readonly backupInProgress: ObservableValue<boolean>;
 
+  private cachedDecryptionKey?: string;
+
   constructor(
     private readonly machine: Machine,
     private readonly request: MatrixRequest,
@@ -93,10 +95,23 @@ export class MegolmBackup implements Disposable {
 
     const versionChanged = prevBackup && prevBackup.version !== backupInfo.version;
     if (versionChanged && this.keyBackup.read) {
-      this.machine.backupManager.disableBackup();
+      await this.machine.backupManager.disableBackup();
+      this.keyBackup.publish(this.publishKey, undefined);
+      await this.start(backupInfo);
+      return;
     }
 
-    this.start(backupInfo);
+    if (this.keyBackup.read) return;
+    await this.start(backupInfo);
+  }
+
+  /**
+   * cache the decryption key when you are expecting a BackupVersionInfo update.
+   *
+   * @param secret backup private key
+   */
+  public async cacheDecryptionKey(secret: string): Promise<void> {
+    this.cachedDecryptionKey = secret;
   }
 
   public async saveDecryptionKey(secret: string): Promise<void> {
@@ -127,6 +142,14 @@ export class MegolmBackup implements Disposable {
 
     this.backup(keyBackup);
 
+    if (this.cachedDecryptionKey) {
+      this.machine.backupManager.saveDecryptionKey(
+        Base64.decode(this.cachedDecryptionKey),
+        backupInfo
+      );
+      this.cachedDecryptionKey = undefined;
+    }
+
     return keyBackup;
   }
 
diff --git a/src/client/initMatrix.ts b/src/client/initMatrix.ts
index 498d4f75..d11dd484 100644
--- a/src/client/initMatrix.ts
+++ b/src/client/initMatrix.ts
@@ -1,6 +1,5 @@
 import { createClient, MatrixClient, IndexedDBStore, IndexedDBCryptoStore } from 'matrix-js-sdk';
 
-import { cryptoCallbacks } from './secretStorageKeys';
 import { clearNavToActivePathStore } from '../app/state/navToActivePath';
 import { pushSessionToSW } from '../sw-session';
 
@@ -28,7 +27,6 @@ export const initClient = async (session: Session): Promise<MatrixClient> => {
     cryptoStore: legacyCryptoStore,
     deviceId: session.deviceId,
     timelineSupport: true,
-    cryptoCallbacks: cryptoCallbacks as any,
     verificationMethods: ['m.sas.v1'],
   });
 
diff --git a/src/client/secretStorageKeys.js b/src/client/secretStorageKeys.js
deleted file mode 100644
index 78c0cb4c..00000000
--- a/src/client/secretStorageKeys.js
+++ /dev/null
@@ -1,37 +0,0 @@
-const secretStorageKeys = new Map();
-
-export function storePrivateKey(keyId, privateKey) {
-  if (privateKey instanceof Uint8Array === false) {
-    throw new Error('Unable to store, privateKey is invalid.');
-  }
-  secretStorageKeys.set(keyId, privateKey);
-}
-
-function hasPrivateKey(keyId) {
-  return secretStorageKeys.get(keyId) instanceof Uint8Array;
-}
-
-function getPrivateKey(keyId) {
-  return secretStorageKeys.get(keyId);
-}
-
-export function clearSecretStorageKeys() {
-  secretStorageKeys.clear();
-}
-
-async function getSecretStorageKey({ keys }) {
-  const keyIds = Object.keys(keys);
-  const keyId = keyIds.find(hasPrivateKey);
-  if (!keyId) return undefined;
-  const privateKey = getPrivateKey(keyId);
-  return [keyId, privateKey];
-}
-
-function cacheSecretStorageKey(keyId, keyInfo, privateKey) {
-  secretStorageKeys.set(keyId, privateKey);
-}
-
-export const cryptoCallbacks = {
-  getSecretStorageKey,
-  cacheSecretStorageKey,
-};

From cbe5c79e249ff42d2b27ad2182d9f7960e3e3f44 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 10 Aug 2026 14:09:56 +0530
Subject: [PATCH 058/158] add dialog to select authentication method for UIA

---
 src/app/components/ActionUIA.tsx              | 100 +++++++++++++++++-
 .../components/DeviceVerificationSetup.tsx    |   1 +
 .../settings/devices/OtherDevices.tsx         |   1 +
 3 files changed, 98 insertions(+), 4 deletions(-)

diff --git a/src/app/components/ActionUIA.tsx b/src/app/components/ActionUIA.tsx
index 19cf11cf..63bd5a69 100644
--- a/src/app/components/ActionUIA.tsx
+++ b/src/app/components/ActionUIA.tsx
@@ -1,5 +1,20 @@
-import React, { ReactNode } from 'react';
-import { AuthResponse, AuthType, UIAFlow } from '../utils/matrix-uia';
+import React, { ReactNode, useState } from 'react';
+import {
+  config,
+  Dialog,
+  Header,
+  Text,
+  IconButton,
+  Box,
+  Icon,
+  Icons,
+  Button,
+  OverlayBackdrop,
+  Overlay,
+  OverlayCenter,
+} from 'folds';
+import FocusTrap from 'focus-trap-react';
+import { AuthResponse, AuthType, getUIAFlowForStages, UIAFlow } from '../utils/matrix-uia';
 import { useSupportedUIAFlows, useUIACompleted, useUIAFlow } from '../hooks/useUIAFlows';
 import { UIAFlowOverlay } from './UIAFlowOverlay';
 import { OAuthStage, PasswordStage, SSOStage } from './uia-stages';
@@ -57,20 +72,97 @@ export function ActionUIA({ authData, ongoingFlow, action, onCancel }: ActionUIA
   );
 }
 
+function UIAFlowPicker({
+  flows,
+  onCancel,
+  onSelect,
+}: {
+  flows: UIAFlow[];
+  onCancel: () => void;
+  onSelect: (flow: UIAFlow) => void;
+}) {
+  const passwordFlow = getUIAFlowForStages(flows, [AuthType.Password]);
+  const ssoFlow = getUIAFlowForStages(flows, [AuthType.Sso]);
+
+  return (
+    <Overlay open backdrop={<OverlayBackdrop />}>
+      <OverlayCenter>
+        <FocusTrap focusTrapOptions={{ initialFocus: false, escapeDeactivates: false }}>
+          <Dialog>
+            <Header
+              style={{
+                padding: `0 ${config.space.S200} 0 ${config.space.S400}`,
+              }}
+              variant="Surface"
+              size="500"
+            >
+              <Box grow="Yes">
+                <Text size="H4">Authentication</Text>
+              </Box>
+              <IconButton size="300" onClick={onCancel} radii="300">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            <Box
+              as="form"
+              style={{ padding: `0 ${config.space.S400} ${config.space.S400}` }}
+              direction="Column"
+              gap="400"
+            >
+              <Box direction="Column" gap="400">
+                <Text size="T200">Choose an authentication method to perform this action.</Text>
+              </Box>
+              <Box direction="Column" gap="200">
+                {passwordFlow && (
+                  <Button variant="Primary" type="button" onClick={() => onSelect(passwordFlow)}>
+                    <Text as="span" size="B400">
+                      Continue with Password
+                    </Text>
+                  </Button>
+                )}
+                {ssoFlow && (
+                  <Button
+                    variant="Secondary"
+                    fill="Soft"
+                    type="button"
+                    onClick={() => onSelect(ssoFlow)}
+                  >
+                    <Text as="span" size="B400">
+                      Continue with SSO
+                    </Text>
+                  </Button>
+                )}
+              </Box>
+            </Box>
+          </Dialog>
+        </FocusTrap>
+      </OverlayCenter>
+    </Overlay>
+  );
+}
+
 type ActionUIAFlowsLoaderProps = {
   authData: AuthResponse;
+  onCancel: () => void;
   unsupported: () => ReactNode;
   children: (ongoingFlow: UIAFlow) => ReactNode;
 };
 export function ActionUIAFlowsLoader({
   authData,
+  onCancel,
   unsupported,
   children,
 }: ActionUIAFlowsLoaderProps) {
   const supportedFlows = useSupportedUIAFlows(authData.flows ?? [], SUPPORTED_IN_APP_UIA_STAGES);
-  const ongoingFlow = supportedFlows.length > 0 ? supportedFlows[0] : undefined;
+  const [ongoingFlow, setOngoingFlow] = useState(
+    supportedFlows.length === 1 ? supportedFlows[0] : undefined
+  );
 
-  if (!ongoingFlow) return unsupported();
+  if (supportedFlows.length === 0) return unsupported();
+
+  if (!ongoingFlow) {
+    return <UIAFlowPicker flows={supportedFlows} onCancel={onCancel} onSelect={setOngoingFlow} />;
+  }
 
   return children(ongoingFlow);
 }
diff --git a/src/app/components/DeviceVerificationSetup.tsx b/src/app/components/DeviceVerificationSetup.tsx
index c12eab35..f482e569 100644
--- a/src/app/components/DeviceVerificationSetup.tsx
+++ b/src/app/components/DeviceVerificationSetup.tsx
@@ -329,6 +329,7 @@ function SetupVerification({ onComplete }: SetupVerificationProps) {
       {uiaData && (
         <ActionUIAFlowsLoader
           authData={uiaData}
+          onCancel={handleCancel}
           unsupported={() => (
             <Text size="T200" style={{ color: color.Critical.Main }}>
               Authentication steps to perform this action are not supported by client.
diff --git a/src/app/features/settings/devices/OtherDevices.tsx b/src/app/features/settings/devices/OtherDevices.tsx
index 8c491a98..68321963 100644
--- a/src/app/features/settings/devices/OtherDevices.tsx
+++ b/src/app/features/settings/devices/OtherDevices.tsx
@@ -219,6 +219,7 @@ export function OtherDevices({ devices, refreshDeviceList, showVerification }: O
               {authData && (
                 <ActionUIAFlowsLoader
                   authData={authData}
+                  onCancel={handleCancelAuth}
                   unsupported={() => (
                     <Text size="T200">
                       Authentication steps to perform this action are not supported by client.

From b5b865986a96ba864bad6fe7a52003c47dd3ee56 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 14 Aug 2026 11:56:02 +0530
Subject: [PATCH 059/158] show root event in thread and imporove timeline and
 divider

---
 src/app/components/message/Time.tsx           |  14 +-
 src/app/features/room/OutboxView.tsx          |  18 +-
 src/app/features/room/RoomInput.tsx           |   6 +-
 src/app/features/room/RoomTimeline.tsx        | 141 ++---
 .../room/components/PlaceholderList.tsx       |  20 +
 .../room/components/TimelineDivider.tsx       | 100 +--
 src/app/features/room/components/index.ts     |   1 +
 .../features/room/components/styles.css.ts    |  14 +-
 src/app/features/room/hooks/useTimeline.ts    |  85 +++
 src/app/features/room/message/Message.tsx     |  17 +-
 .../thread-selector/ThreadSelector.tsx        | 113 +++-
 .../message/thread-selector/styles.css.ts     |  10 +-
 .../features/room/thread-view/ThreadView.tsx  | 576 +-----------------
 .../room/thread-view/TimelineView.tsx         | 554 +++++++++++++++++
 .../features/room/thread-view/styles.css.ts   |  56 +-
 src/app/hooks/useThreadParticipant.ts         |  21 +
 src/app/pages/auth/AuthLayout.tsx             |   2 +-
 src/client/room/ThreadMeta.ts                 |  19 +-
 src/client/room/ThreadTimeline.ts             |  80 ++-
 src/client/room/Timeline.ts                   |  27 +-
 src/client/syncWriter/utils.ts                |   1 +
 21 files changed, 1080 insertions(+), 795 deletions(-)
 create mode 100644 src/app/features/room/components/PlaceholderList.tsx
 create mode 100644 src/app/features/room/thread-view/TimelineView.tsx
 create mode 100644 src/app/hooks/useThreadParticipant.ts

diff --git a/src/app/components/message/Time.tsx b/src/app/components/message/Time.tsx
index 3eab5cc2..3a89f272 100644
--- a/src/app/components/message/Time.tsx
+++ b/src/app/components/message/Time.tsx
@@ -1,6 +1,12 @@
 import React, { ComponentProps } from 'react';
 import { Text, as } from 'folds';
-import { timeDayMonYear, timeHourMinute, today, yesterday } from '../../utils/time';
+import {
+  timeDayMonthYear,
+  timeDayMonYear,
+  timeHourMinute,
+  today,
+  yesterday,
+} from '../../utils/time';
 
 export type TimeProps = {
   compact?: boolean;
@@ -43,3 +49,9 @@ export const Time = as<'span', TimeProps & ComponentProps<typeof Text>>(
     );
   }
 );
+
+export function DividerTime({ ts }: { ts: number }) {
+  if (today(ts)) return 'Today';
+  if (yesterday(ts)) return 'Yesterday';
+  return timeDayMonthYear(ts);
+}
diff --git a/src/app/features/room/OutboxView.tsx b/src/app/features/room/OutboxView.tsx
index 493514cf..a6be39dc 100644
--- a/src/app/features/room/OutboxView.tsx
+++ b/src/app/features/room/OutboxView.tsx
@@ -39,7 +39,7 @@ import { RenderMessageContent } from '../../components/RenderMessageContent';
 import { InfoCard } from '../../components/info-card';
 import { LocalEventOutbox } from '../../../client/room/local-event/LocalEventOutbox';
 import { MessageBatch } from '../../../client/room/messages';
-import { DayDivider } from './components';
+import { ComboDivider } from './components';
 import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 
 function MessageSendingError({
@@ -141,7 +141,6 @@ function MessageSending({
   const ct = useClient();
   const { userId } = ct.session;
   const senderState = useObservableValue(sender.state);
-  const { original } = sender.localEvent;
 
   const senderDisplayName = membersAPI.getName(userId);
   const senderAvatarMxc = membersAPI.getAvatar(userId);
@@ -153,7 +152,7 @@ function MessageSending({
       })}
       tabIndex={0}
       space={messageSpacing}
-      collapse={collapse || (!!getReplyId(original.content) && !fallbackReply(original.content))}
+      collapse={collapse}
     >
       <RenderMessageLayout
         avatar={
@@ -270,15 +269,18 @@ export function OutboxView({
     <>
       {senders.map((sender) => {
         const dayDivider = prevMsg ? !inSameDay(prevMsg.ts, sender.localEvent.ts) : false;
+        const replyEventId = fallbackReply(sender.localEvent.original.content)
+          ? undefined
+          : getReplyId(sender.localEvent.original.content);
 
         const collapse =
           !!prevMsg &&
           !dayDivider &&
           prevMsg.original.type === sender.localEvent.original.type &&
-          minuteDifference(prevMsg.ts, sender.localEvent.ts) < 2;
-        prevMsg = sender.localEvent;
+          minuteDifference(prevMsg.ts, sender.localEvent.ts) < 2 &&
+          !replyEventId;
 
-        const replyEventId = getReplyId(sender.localEvent.original.content);
+        prevMsg = sender.localEvent;
 
         const replyJSX = replyEventId && (
           <Reply
@@ -303,7 +305,9 @@ export function OutboxView({
 
         return (
           <Fragment key={sender.localEvent.txnId}>
-            {dayDivider && <DayDivider ts={sender.localEvent.ts} messageSpacing={messageSpacing} />}
+            {dayDivider && (
+              <ComboDivider ts={sender.localEvent.ts} messageSpacing={messageSpacing} />
+            )}
             {replyJSX}
             <MessageSending
               key={sender.localEvent.txnId}
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index d1b8354a..9e3f3f4b 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -135,7 +135,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     const sendTypingStatus = useTypingStatusUpdater(roomId);
 
-    const [hideStickerBtn, setHideStickerBtn] = useState(document.body.clientWidth < 500);
+    const [hideStickerBtn, setHideStickerBtn] = useState(
+      threadId || document.body.clientWidth < 500
+    );
 
     const isComposing = useComposingCheck();
 
@@ -145,7 +147,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     useElementSizeObserver(
       useCallback(() => fileDropContainerRef.current, [fileDropContainerRef]),
-      useCallback((width) => setHideStickerBtn(width < 500), [])
+      useCallback((width) => setHideStickerBtn(threadId || width < 500), [threadId])
     );
 
     useEffect(
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index dc4d8432..918c7bab 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -1,6 +1,5 @@
 /* eslint-disable react/destructuring-assignment */
 import React, {
-  forwardRef,
   MouseEventHandler,
   RefObject,
   useCallback,
@@ -22,7 +21,6 @@ import { scrollToBottom } from '../../utils/dom';
 import {
   DefaultPlaceholder,
   CompactPlaceholder,
-  MessageBase,
   Reply,
   RedactedContent,
 } from '../../components/message';
@@ -38,7 +36,6 @@ import { useSetting } from '../../state/hooks/settings';
 import { MessageLayout, settingsAtom } from '../../state/settings';
 import { Reactions, Message, ThreadEvents } from './message';
 import { RoomIntro } from '../../components/room-intro';
-import { inSameDay, minuteDifference } from '../../utils/time';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { MessageEvent, StateEvent } from '../../../types/matrix/room';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
@@ -65,6 +62,8 @@ import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
 import {
   useAtBottomToggle,
   useEditorResizeStickBottom,
+  useEventCollapse,
+  useEventDivider,
   useReplyClickHandler,
   useRestoreScrollToBottom,
   useTimelinePaginate,
@@ -75,28 +74,11 @@ import {
 } from './hooks/useTimeline';
 import { RoomViewTyping } from './RoomViewTyping';
 import { rContent } from '../../../client/reader';
-import { ThreadSelector, ThreadSelectorContainer } from './message/thread-selector';
-import { TimelineFloat, JumpToLatestButton, NewMessageDivider, DayDivider } from './components';
+import { ThreadSelector } from './message/thread-selector';
+import { TimelineFloat, JumpToLatestButton, ComboDivider, PlaceholderList } from './components';
 import { OutboxView } from './OutboxView';
 import { EncryptedMessageEvent } from '../../components/encrypted-event';
 
-type PlaceholderListProps = {
-  count: number;
-  Placeholder: React.ComponentType;
-};
-const PlaceholderList = forwardRef<HTMLDivElement, PlaceholderListProps>(
-  ({ count, Placeholder }, ref) => (
-    <div ref={ref}>
-      {Array.from({ length: count }).map((_, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <MessageBase key={i}>
-          <Placeholder />
-        </MessageBase>
-      ))}
-    </div>
-  )
-);
-
 type RoomTimelineProps = {
   eventId?: string;
   roomInputRef: RefObject<HTMLElement>;
@@ -360,6 +342,17 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     timeline.openThread(threadId);
   };
 
+  const handleThreadClick: MouseEventHandler<HTMLButtonElement> = useCallback(
+    (evt) => {
+      const targetId = evt.currentTarget.getAttribute('data-event-id');
+      if (!targetId) return;
+      console.log(targetId);
+
+      timeline.openThread(targetId);
+    },
+    [timeline]
+  );
+
   console.log('========> RoomTimeline');
   console.log(range, events.length);
 
@@ -433,6 +426,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
         onUserClick={handleUserClick}
         onUsernameClick={handleUsernameClick}
         onReplyClick={handleReplyClick}
+        onThreadClick={handleThreadClick}
         onReactionToggle={handleReactionToggle}
         onEditId={handleEdit}
         redacted={redacted.has(event.event_id)}
@@ -487,25 +481,24 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
           ))}
         {reactionJSX}
         {threadTimeline && (
-          <ThreadSelectorContainer>
-            <ThreadSelector
-              thread={threadTimeline}
-              hour24Clock={hour24Clock}
-              dateFormatString={dateFormatString}
-              outlined={messageLayout === MessageLayout.Bubble}
-              getMemberName={membersAPI.getName}
-              onClick={handleOpenThread}
-            />
-          </ThreadSelectorContainer>
+          <ThreadSelector
+            thread={threadTimeline}
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+            outlined={messageLayout === MessageLayout.Bubble}
+            getMemberName={membersAPI.getName}
+            getMemberAvatar={membersAPI.getAvatar}
+            onClick={handleOpenThread}
+          />
         )}
       </Message>
     );
   };
 
-  let prevEvent: MessageEventWithoutRoomId | undefined;
-  let isPrevRendered = false;
-  let newDivider = false;
-  let dayDivider = false;
+  const { getDayDivider, getNewDivider, updateDivider, clearDayDivider, clearNewDivider } =
+    useEventDivider(readUptoEventIdRef.current);
+  const { getCollapsed, updateCollapse } = useEventCollapse();
+
   const eventRenderer = (item: number) => {
     const event = events[item];
 
@@ -518,44 +511,33 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
       return null;
     }
 
-    if (!newDivider && readUptoEventIdRef.current) {
-      newDivider = prevEvent?.event_id === readUptoEventIdRef.current;
-    }
-    if (!dayDivider) {
-      dayDivider = prevEvent
-        ? !inSameDay(prevEvent.origin_server_ts, event.origin_server_ts)
-        : false;
-    }
+    const newDivider = getNewDivider() && event.sender !== ct.session.userId;
+    const dayDivider = getDayDivider(event);
 
-    const collapsed =
-      isPrevRendered &&
-      !dayDivider &&
-      (!newDivider || event.sender === ct.session.userId) &&
-      prevEvent !== undefined &&
-      prevEvent.sender === event.sender &&
-      prevEvent.type === event.type &&
-      minuteDifference(prevEvent.origin_server_ts, event.origin_server_ts) < 2 &&
-      !getThreadId(prevEvent) &&
-      !getReplyId(event.content);
+    const collapsed = getCollapsed(event, newDivider, dayDivider);
 
     const eventJSX = renderMatrixEvent(event, item, collapsed);
-    prevEvent = event;
-    isPrevRendered = !!eventJSX;
+    updateCollapse(event, !!eventJSX);
+    updateDivider(event);
 
-    const newDividerJSX =
-      newDivider && eventJSX && event.sender !== ct.session.userId ? (
-        <NewMessageDivider messageSpacing={messageSpacing} />
+    if (!eventJSX) return null;
+
+    const dividerJSX =
+      dayDivider || newDivider ? (
+        <ComboDivider
+          messageSpacing={messageSpacing}
+          ts={dayDivider ? event.origin_server_ts : undefined}
+          unread={newDivider}
+        />
       ) : null;
 
-    const dayDividerJSX =
-      dayDivider && eventJSX ? (
-        <DayDivider ts={event.origin_server_ts} messageSpacing={messageSpacing} />
-      ) : null;
+    if (newDivider && dividerJSX) clearNewDivider();
+    if (dayDivider && dividerJSX) clearDayDivider();
 
     const replyEventId = getReplyId(event.content);
 
     const replyJSX =
-      replyEventId && !getThreadId(event) ? (
+      !getThreadId(event) && replyEventId ? (
         <Reply
           roomId={roomId}
           eventId={replyEventId}
@@ -576,30 +558,13 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
         />
       ) : null;
 
-    if (eventJSX && (newDividerJSX || dayDividerJSX)) {
-      if (newDividerJSX) newDivider = false;
-      if (dayDividerJSX) dayDivider = false;
-
-      return (
-        <React.Fragment key={event.event_id}>
-          {newDividerJSX}
-          {dayDividerJSX}
-          {replyJSX}
-          {eventJSX}
-        </React.Fragment>
-      );
-    }
-
-    if (replyJSX) {
-      return (
-        <React.Fragment key={event.event_id}>
-          {replyJSX}
-          {eventJSX}
-        </React.Fragment>
-      );
-    }
-
-    return eventJSX;
+    return (
+      <React.Fragment key={event.event_id}>
+        {dividerJSX}
+        {replyJSX}
+        {eventJSX}
+      </React.Fragment>
+    );
   };
 
   return (
diff --git a/src/app/features/room/components/PlaceholderList.tsx b/src/app/features/room/components/PlaceholderList.tsx
new file mode 100644
index 00000000..cce917c1
--- /dev/null
+++ b/src/app/features/room/components/PlaceholderList.tsx
@@ -0,0 +1,20 @@
+import React, { ComponentType, forwardRef } from 'react';
+import { MessageBase } from '../../../components/message';
+
+type PlaceholderListProps = {
+  count: number;
+  Placeholder: ComponentType;
+};
+
+export const PlaceholderList = forwardRef<HTMLDivElement, PlaceholderListProps>(
+  ({ count, Placeholder }, ref) => (
+    <div ref={ref}>
+      {Array.from({ length: count }).map((_, i) => (
+        // eslint-disable-next-line react/no-array-index-key
+        <MessageBase key={i}>
+          <Placeholder />
+        </MessageBase>
+      ))}
+    </div>
+  )
+);
diff --git a/src/app/features/room/components/TimelineDivider.tsx b/src/app/features/room/components/TimelineDivider.tsx
index f2e0c923..8fc2b0ec 100644
--- a/src/app/features/room/components/TimelineDivider.tsx
+++ b/src/app/features/room/components/TimelineDivider.tsx
@@ -1,44 +1,72 @@
-import React from 'react';
-import { as, Badge, Box, color, ContainerColor, Line, Text } from 'folds';
-import { MessageBase } from '../../../components/message';
-import { timeDayMonthYear, today, yesterday } from '../../../utils/time';
+import React, { ReactNode } from 'react';
+import { as, Badge, Box, ContainerColor, Line, Text } from 'folds';
+import classNames from 'classnames';
+import { DividerTime, MessageBase } from '../../../components/message';
 import { MessageSpacing } from '../../../state/settings';
+import * as css from './styles.css';
 
-export const TimelineDivider = as<'div', { variant?: ContainerColor | 'Inherit' }>(
-  ({ variant, children, ...props }, ref) => (
-    <Box gap="100" justifyContent="Center" alignItems="Center" {...props} ref={ref}>
-      <Line style={{ flexGrow: 1 }} variant={variant} size="300" />
-      {children}
-      <Line style={{ flexGrow: 1 }} variant={variant} size="300" />
-    </Box>
-  )
-);
+export const TimelineDivider = as<
+  'div',
+  { variant?: ContainerColor | 'Inherit'; before?: ReactNode; after?: ReactNode }
+>(({ className, variant, before, after, children, ...props }, ref) => (
+  <Box
+    className={classNames(css.TimelineDivider, className)}
+    gap="100"
+    justifyContent="Center"
+    alignItems="Center"
+    {...props}
+    ref={ref}
+  >
+    {before}
+    <Line style={{ flexGrow: 1 }} variant={variant} size="300" />
+    <Box className={css.TimelineDividerCenterChild}>{children}</Box>
+    {after}
+  </Box>
+));
 
-export function DayDivider({ messageSpacing, ts }: { messageSpacing: MessageSpacing; ts: number }) {
+type ComboDividerProps = {
+  messageSpacing: MessageSpacing;
+  ts?: number;
+  replyCount?: number;
+  unread?: boolean;
+};
+export function ComboDivider({ messageSpacing, ts, replyCount, unread }: ComboDividerProps) {
   return (
     <MessageBase space={messageSpacing}>
-      <TimelineDivider variant="Surface">
-        <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
-          <Text size="L400">
-            {(() => {
-              if (today(ts)) return 'Today';
-              if (yesterday(ts)) return 'Yesterday';
-              return timeDayMonthYear(ts);
-            })()}
-          </Text>
-        </Badge>
-      </TimelineDivider>
-    </MessageBase>
-  );
-}
-
-export function NewMessageDivider({ messageSpacing }: { messageSpacing: MessageSpacing }) {
-  return (
-    <MessageBase space={messageSpacing}>
-      <TimelineDivider style={{ color: color.Success.Main }} variant="Inherit">
-        <Badge as="span" size="500" variant="Success" fill="Solid" radii="300">
-          <Text size="L400">New Messages</Text>
-        </Badge>
+      <TimelineDivider
+        variant={unread ? 'Success' : 'Surface'}
+        before={
+          replyCount &&
+          replyCount > 0 && (
+            <Badge
+              style={{ paddingLeft: 0 }}
+              as="span"
+              size="500"
+              variant="Secondary"
+              fill="None"
+              radii="0"
+            >
+              <Text size="L400">
+                {replyCount === 1 ? `${replyCount} Reply` : `${replyCount} Replies`}
+              </Text>
+            </Badge>
+          )
+        }
+        after={
+          unread && (
+            <Badge as="span" size="500" variant="Success" fill="Solid" radii="Pill">
+              <Text size="L400">New</Text>
+            </Badge>
+          )
+        }
+      >
+        {typeof ts === 'number' && (
+          <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
+            <Text size="L400">
+              <DividerTime ts={ts} />
+            </Text>
+          </Badge>
+        )}
       </TimelineDivider>
     </MessageBase>
   );
diff --git a/src/app/features/room/components/index.ts b/src/app/features/room/components/index.ts
index 2d58db04..30ef6206 100644
--- a/src/app/features/room/components/index.ts
+++ b/src/app/features/room/components/index.ts
@@ -1,3 +1,4 @@
 export * from './TimelineDivider';
 export * from './TimelineFloat';
 export * from './JumpToLatestButton';
+export * from './PlaceholderList';
diff --git a/src/app/features/room/components/styles.css.ts b/src/app/features/room/components/styles.css.ts
index 9cd428ed..bdfc4b41 100644
--- a/src/app/features/room/components/styles.css.ts
+++ b/src/app/features/room/components/styles.css.ts
@@ -1,5 +1,17 @@
+import { style } from '@vanilla-extract/css';
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { DefaultReset, config } from 'folds';
+import { DefaultReset, color, config } from 'folds';
+
+export const TimelineDivider = style({
+  position: 'relative',
+});
+export const TimelineDividerCenterChild = style({
+  position: 'absolute',
+  left: '50%',
+  transform: 'translateX(-50%)',
+
+  backgroundColor: color.Surface.Container,
+});
 
 export const TimelineFloat = recipe({
   base: [
diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
index 2c95205a..20b75011 100644
--- a/src/app/features/room/hooks/useTimeline.ts
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -13,6 +13,7 @@ import {
 import { useAtom } from 'jotai';
 import { Editor } from 'slate';
 import { ReactEditor } from 'slate-react';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { scrollToBottom } from '../../../utils/dom';
 import { MessageBatch } from '../../../../client/room/messages';
 import { getResizeObserverEntry, useResizeObserver } from '../../../hooks/useResizeObserver';
@@ -33,6 +34,8 @@ import { useSpaceOptionally } from '../../../hooks/useSpace';
 import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
 import { useClient } from '../../../hooks/useClient';
 import { createMentionElement, moveCursor } from '../../../components/editor';
+import { inSameDay, minuteDifference } from '../../../utils/time';
+import { fallbackReply, getReplyId } from '../../../utils/room';
 
 const TimelineViewContext = createContext<TimelineView | null>(null);
 export const TimelineViewProvider = TimelineViewContext.Provider;
@@ -282,3 +285,85 @@ export const useUsernameClickHandler = (editor: Editor) => {
 
   return handleUsernameClick;
 };
+
+export const useEventDivider = (readUptoEventId?: string) => {
+  let prevEvent: MessageEventWithoutRoomId | undefined;
+
+  let dayDivider = false;
+  let newDivider = false;
+
+  const getDayDivider = (event: MessageEventWithoutRoomId) => {
+    if (!dayDivider) {
+      dayDivider = prevEvent
+        ? !inSameDay(prevEvent.origin_server_ts, event.origin_server_ts)
+        : false;
+    }
+
+    return dayDivider;
+  };
+
+  const getNewDivider = () => {
+    if (!newDivider && readUptoEventId) {
+      newDivider = prevEvent?.event_id === readUptoEventId;
+    }
+
+    return newDivider;
+  };
+
+  const getThreadRootDivider = (rootEvent: MessageEventWithoutRoomId) =>
+    prevEvent?.event_id === rootEvent.event_id;
+
+  const updateDivider = (event: MessageEventWithoutRoomId) => {
+    prevEvent = event;
+  };
+
+  const clearDayDivider = () => {
+    dayDivider = false;
+  };
+
+  const clearNewDivider = () => {
+    newDivider = false;
+  };
+
+  return {
+    getDayDivider,
+    getNewDivider,
+    getThreadRootDivider,
+    updateDivider,
+    clearDayDivider,
+    clearNewDivider,
+  };
+};
+
+export const useEventCollapse = () => {
+  const ct = useClient();
+  let prevEvent: MessageEventWithoutRoomId | undefined;
+  let isPrevRendered = false;
+
+  const getCollapsed = (
+    event: MessageEventWithoutRoomId,
+    newDivider: boolean,
+    dayDivider: boolean
+  ) => {
+    const replyEventId = fallbackReply(event.content) ? undefined : getReplyId(event.content);
+
+    const collapsed =
+      isPrevRendered &&
+      !dayDivider &&
+      (!newDivider || event.sender === ct.session.userId) &&
+      prevEvent !== undefined &&
+      prevEvent.sender === event.sender &&
+      prevEvent.type === event.type &&
+      minuteDifference(prevEvent.origin_server_ts, event.origin_server_ts) < 2 &&
+      !replyEventId;
+
+    return collapsed;
+  };
+
+  const updateCollapse = (prevEvt: MessageEventWithoutRoomId, rendered: boolean) => {
+    prevEvent = prevEvt;
+    isPrevRendered = rendered;
+  };
+
+  return { getCollapsed, updateCollapse };
+};
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index f621d7e4..8a4402a0 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -842,10 +842,8 @@ export type MessageProps = {
   membersAPI: RoomMembersAPI;
   onUserClick: MouseEventHandler<HTMLButtonElement>;
   onUsernameClick: MouseEventHandler<HTMLButtonElement>;
-  onReplyClick: (
-    ev: Parameters<MouseEventHandler<HTMLButtonElement>>[0],
-    startThread?: boolean
-  ) => void;
+  onReplyClick: MouseEventHandler<HTMLButtonElement>;
+  onThreadClick?: MouseEventHandler<HTMLButtonElement>;
   onEditId?: (eventId?: string) => void;
   onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
   reply?: ReactNode;
@@ -878,6 +876,7 @@ export const Message = as<'div', MessageProps>(
       onUserClick,
       onUsernameClick,
       onReplyClick,
+      onThreadClick,
       onReactionToggle,
       onEditId,
       reply,
@@ -963,6 +962,8 @@ export const Message = as<'div', MessageProps>(
       }, 100);
     };
 
+    // hide margin-top space between message and reply
+    const hasReply = !!getReplyId(event.content) && !fallbackReply(event.content);
     return (
       <MessageBase
         className={classNames(css.MessageBase, className, {
@@ -970,7 +971,7 @@ export const Message = as<'div', MessageProps>(
         })}
         tabIndex={0}
         space={messageSpacing}
-        collapse={collapse || (!!getReplyId(event.content) && !fallbackReply(event.content))}
+        collapse={collapse || hasReply}
         highlight={highlight}
         selected={!!selected || !!menuAnchor || !!emojiBoardAnchor}
         {...props}
@@ -1029,7 +1030,7 @@ export const Message = as<'div', MessageProps>(
                 </IconButton>
                 {!getThreadId(event) && (
                   <IconButton
-                    onClick={(ev) => onReplyClick(ev, true)}
+                    onClick={onThreadClick}
                     data-event-id={event.event_id}
                     variant="SurfaceVariant"
                     size="300"
@@ -1123,7 +1124,7 @@ export const Message = as<'div', MessageProps>(
                               radii="300"
                               data-event-id={event.event_id}
                               onClick={(evt: any) => {
-                                onReplyClick(evt, true);
+                                onThreadClick?.(evt);
                                 closeMenu();
                               }}
                             >
@@ -1432,7 +1433,7 @@ export function ThreadEvents({
               onClick={() => onClick?.()}
               style={{ flexShrink: 0 }}
               radii="Pill"
-              variant="Primary"
+              variant="Secondary"
               fill="None"
             >
               <Text as="span" size="L400">
diff --git a/src/app/features/room/message/thread-selector/ThreadSelector.tsx b/src/app/features/room/message/thread-selector/ThreadSelector.tsx
index 693612f2..1652b1de 100644
--- a/src/app/features/room/message/thread-selector/ThreadSelector.tsx
+++ b/src/app/features/room/message/thread-selector/ThreadSelector.tsx
@@ -1,15 +1,20 @@
-import { Box, Icon, Icons, Line, Text } from 'folds';
-import React, { ReactNode } from 'react';
+import React from 'react';
+import { Box, config, Icon, Icons, Line, Text } from 'folds';
 import classNames from 'classnames';
 import * as css from './styles.css';
 import { Time } from '../../../../components/message';
 import { ThreadTimeline } from '../../../../../client/room/ThreadTimeline';
 import { useObservableValue } from '../../../../hooks/useObservableValue';
-import { GetRoomMemberNameCallback } from '../../../../hooks/useRoomMembers';
-
-export function ThreadSelectorContainer({ children }: { children: ReactNode }) {
-  return <Box className={css.ThreadSelectorContainer}>{children}</Box>;
-}
+import {
+  GetRoomMemberAvatarCallback,
+  GetRoomMemberNameCallback,
+} from '../../../../hooks/useRoomMembers';
+import { useThreadParticipants } from '../../../../hooks/useThreadParticipant';
+import { StackedAvatar } from '../../../../components/stacked-avatar';
+import { UserAvatar } from '../../../../components/user-avatar';
+import { useMediaAuthentication } from '../../../../hooks/useMediaAuthentication';
+import { mxcToHttp } from '../../../../../client/mxcToHttp';
+import { useClient } from '../../../../hooks/useClient';
 
 type ThreadSelectorProps = {
   thread: ThreadTimeline;
@@ -17,6 +22,7 @@ type ThreadSelectorProps = {
   hour24Clock: boolean;
   dateFormatString: string;
   getMemberName: GetRoomMemberNameCallback;
+  getMemberAvatar: GetRoomMemberAvatarCallback;
   onClick?: (threadId: string) => void;
 };
 
@@ -26,10 +32,23 @@ export function ThreadSelector({
   hour24Clock,
   dateFormatString,
   getMemberName,
+  getMemberAvatar,
   onClick,
 }: ThreadSelectorProps) {
+  const ct = useClient();
+  const useAuthentication = useMediaAuthentication();
+
   const meta = useObservableValue(thread.meta);
-  const latestEvent = meta?.latestEvent;
+  const latestReplyEvent = meta?.latestReplyEvent;
+  const participants = useThreadParticipants(thread);
+
+  if (!meta || !latestReplyEvent) {
+    return null;
+  }
+
+  const max = 5;
+  const visibleMembers = participants.slice(0, max);
+  const remainingCount = max && participants.length > max ? participants.length - max : 0;
 
   return (
     <Box
@@ -40,35 +59,63 @@ export function ThreadSelector({
       gap="300"
       onClick={() => onClick?.(thread.threadId)}
     >
-      <Box className={css.ThreadRepliesCount} shrink="No" alignItems="Center" gap="200">
-        <Icon size="100" src={Icons.Thread} filled />
+      {visibleMembers.length > 0 && (
+        <Box shrink="No" alignItems="Center">
+          {visibleMembers.map((userId) => {
+            const name = getMemberName(userId);
+            const avatarMxc = getMemberAvatar(userId);
+
+            return (
+              <StackedAvatar
+                key={userId}
+                title={name}
+                variant="SurfaceVariant"
+                size="200"
+                radii="Pill"
+              >
+                <UserAvatar
+                  userId={userId}
+                  src={
+                    avatarMxc
+                      ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+                          width: 48,
+                          height: 48,
+                          method: 'crop',
+                        })
+                      : undefined
+                  }
+                  alt={name}
+                  renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                />
+              </StackedAvatar>
+            );
+          })}
+          {remainingCount > 0 && (
+            <Text size="L400" style={{ paddingLeft: config.space.S100 }}>
+              +{remainingCount}
+            </Text>
+          )}
+        </Box>
+      )}
+      <Box shrink="No" alignItems="Center" gap="200">
         <Text size="L400">
-          {meta?.count ?? `+${thread.liveMessages.read.size || 1}`}{' '}
-          {meta?.count === 1 ? 'Reply' : 'Replies'}
+          {meta.replyCount} {meta.replyCount === 1 ? 'Reply' : 'Replies'}
         </Text>
       </Box>
-      {latestEvent && (
-        <>
-          <Line
-            className={css.ThreadSelectorDivider}
-            direction="Vertical"
-            variant="SurfaceVariant"
+      <Line className={css.ThreadSelectorDivider} direction="Vertical" variant="SurfaceVariant" />
+      <Box gap="200" alignItems="Inherit">
+        <Text size="T200" truncate>
+          <span>Last reply by </span>
+          <b>{getMemberName(latestReplyEvent.sender)}</b>
+          <span> at </span>
+          <Time
+            hour24Clock={hour24Clock}
+            dateFormatString={dateFormatString}
+            ts={latestReplyEvent.origin_server_ts}
           />
-          <Box gap="200" alignItems="Inherit">
-            <Text size="T200" truncate>
-              <span>Last reply by </span>
-              <b>{getMemberName(latestEvent.sender)}</b>
-              <span> — </span>
-              <Time
-                hour24Clock={hour24Clock}
-                dateFormatString={dateFormatString}
-                ts={latestEvent.origin_server_ts}
-              />
-            </Text>
-            <Icon size="100" src={Icons.ChevronRight} />
-          </Box>
-        </>
-      )}
+        </Text>
+        <Icon size="100" src={Icons.ChevronRight} />
+      </Box>
     </Box>
   );
 }
diff --git a/src/app/features/room/message/thread-selector/styles.css.ts b/src/app/features/room/message/thread-selector/styles.css.ts
index e0e3d68c..2056e3e3 100644
--- a/src/app/features/room/message/thread-selector/styles.css.ts
+++ b/src/app/features/room/message/thread-selector/styles.css.ts
@@ -2,16 +2,14 @@ import { style } from '@vanilla-extract/css';
 import { color, config, FocusOutline, toRem } from 'folds';
 import { ContainerColor } from '../../../../styles/ContainerColor.css';
 
-export const ThreadSelectorContainer = style({
-  marginTop: config.space.S200,
-});
-
 export const ThreadSelector = style([
   ContainerColor({ variant: 'SurfaceVariant' }),
   {
     padding: config.space.S200,
     borderRadius: config.radii.R400,
     cursor: 'pointer',
+    marginTop: config.space.S200,
+    alignSelf: 'start',
 
     selectors: {
       '&:hover, &:focus-visible': {
@@ -32,7 +30,3 @@ export const ThreadSectorOutlined = style({
 export const ThreadSelectorDivider = style({
   height: toRem(16),
 });
-
-export const ThreadRepliesCount = style({
-  color: color.Primary.Main,
-});
diff --git a/src/app/features/room/thread-view/ThreadView.tsx b/src/app/features/room/thread-view/ThreadView.tsx
index 69d5f2ef..3f896ea7 100644
--- a/src/app/features/room/thread-view/ThreadView.tsx
+++ b/src/app/features/room/thread-view/ThreadView.tsx
@@ -1,526 +1,27 @@
-import React, {
-  forwardRef,
-  MouseEventHandler,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { HTMLReactParserOptions } from 'html-react-parser';
+import React, { useRef } from 'react';
 import classNames from 'classnames';
-import { ReactEditor } from 'slate-react';
-import {
-  Badge,
-  Box,
-  Icon,
-  IconButton,
-  Icons,
-  Scroll,
-  Text,
-  Tooltip,
-  TooltipProvider,
-  config,
-} from 'folds';
-import { Opts as LinkifyOpts } from 'linkifyjs';
-import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { Box, config, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { useVirtualPaginator } from '../../../hooks/useVirtualPaginator';
-import { useAlive } from '../../../hooks/useAlive';
-import { scrollToBottom } from '../../../utils/dom';
-import {
-  DefaultPlaceholder,
-  CompactPlaceholder,
-  MessageBase,
-  Reply,
-} from '../../../components/message';
-import {
-  factoryRenderLinkifyWithMention,
-  getReactCustomHtmlParser,
-  LINKIFY_OPTS,
-  makeMentionCustomProps,
-  renderMatrixMention,
-} from '../../../plugins/react-custom-html-parser';
-import { fallbackReply, getLatestEditEvent, getReplyId } from '../../../utils/room';
-import { useSetting } from '../../../state/hooks/settings';
-import { MessageLayout, settingsAtom } from '../../../state/settings';
-import { Reactions, Message } from '../message';
 import * as css from './styles.css';
-import { inSameDay, minuteDifference } from '../../../utils/time';
-import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
-import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
-import { RenderMessageContent } from '../../../components/RenderMessageContent';
-import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
-import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
-import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
-import { useImagePackRooms } from '../../../hooks/useImagePackRooms';
-import { useIsDirectRoom, useRoom } from '../../../hooks/useRoom';
-import { useRoomCreators } from '../../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
-import {
-  useAccessiblePowerTagColors,
-  useGetMemberPowerTag,
-} from '../../../hooks/useMemberPowerTag';
-import { useTheme } from '../../../hooks/useTheme';
-import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
-import { usePowerLevelTags, usePowerLevelTagsState } from '../../../hooks/usePowerLevelTags';
 import { ThreadTimeline } from '../../../../client/room/ThreadTimeline';
-import { useObservableValue } from '../../../hooks/useObservableValue';
-import { useClient } from '../../../hooks/useClient';
-import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
-import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
-import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
-import {
-  useAtBottomToggle,
-  useEditorResizeStickBottom,
-  useReplyClickHandler,
-  useRestoreScrollToBottom,
-  useTimelinePaginate,
-  useTimelinePrefetch,
-  useTimelineScrollRestore,
-  useUserClickHandler,
-  useUsernameClickHandler,
-} from '../hooks/useTimeline';
-import { rContent } from '../../../../client/reader';
 import { Page, PageHeader } from '../../../components/page';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useEditor } from '../../../components/editor';
-import { TimelineDivider, TimelineFloat, JumpToLatestButton, DayDivider } from '../components';
 import { RoomInput } from '../RoomInput';
 import { RoomViewFollowingPlaceholder } from '../RoomViewFollowing';
-
-type PlaceholderListProps = {
-  count: number;
-  Placeholder: React.ComponentType;
-};
-
-const PlaceholderList = forwardRef<HTMLDivElement, PlaceholderListProps>(
-  ({ count, Placeholder }, ref) => (
-    <div ref={ref}>
-      {Array.from({ length: count }).map((_, i) => (
-        // eslint-disable-next-line react/no-array-index-key
-        <MessageBase key={i}>
-          <Placeholder />
-        </MessageBase>
-      ))}
-    </div>
-  )
-);
+import { TimelineView } from './TimelineView';
 
 type ThreadViewProps = {
   threadTimeline: ThreadTimeline;
   requestClose: () => void;
 };
 
-const PAGINATION_LIMIT = 80;
-
 export function ThreadView({ threadTimeline, requestClose }: ThreadViewProps) {
-  const ct = useClient();
-  const roomId = useRoom();
-  const useAuthentication = useMediaAuthentication();
-  const encryptedRooms = useObservableValue(ct.encryptedRooms);
   const screenSize = useScreenSizeContext();
   const floating = screenSize !== ScreenSize.Desktop;
   const editor = useEditor();
-  const roomInputRef = useRef<HTMLDivElement>(null);
-  const roomViewRef = useRef<HTMLDivElement>(null);
-
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
-  const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
-  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
-  const direct = useIsDirectRoom();
-  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
-  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
-  const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
-  const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
-  const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
-  const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
-
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
-
-  const ignoredUsersList = useIgnoredUsers();
-  const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
-
-  const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(roomId);
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-
-  const membersAPI = useRoomMembersAPI();
-  const creatorsTag = useRoomCreatorsTag();
-  const powerLevelTagsState = usePowerLevelTagsState(roomId);
-  const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsState.value);
-  const getMemberPowerTag = useGetMemberPowerTag(creators, powerLevels);
-
-  const theme = useTheme();
-  const accessiblePowerTagColors = useAccessiblePowerTagColors(
-    theme.kind,
-    creatorsTag,
-    powerLevelTags
-  );
-
-  const permissions = useRoomPermissions(creators, powerLevels);
-
-  const canRedact = permissions.action('redact', ct.session.userId);
-  const canSendReaction = permissions.event(MessageEvent.Reaction, ct.session.userId);
-  const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, ct.session.userId);
-  const [editId, setEditId] = useState<string>();
-
-  const mentionClickHandler = useMentionClickHandler(roomId);
-  const spoilerClickHandler = useSpoilerClickHandler();
-  const imagePackRooms = useImagePackRooms(roomId);
-
-  const scrollRef = useRef<HTMLDivElement>(null);
-  const scrollToBottomRef = useRef({
-    count: 0,
-    smooth: true,
-  });
-
-  const [focusItem, setFocusItem] = useState<
-    | {
-        index: number;
-        scrollTo: boolean;
-        highlight: boolean;
-      }
-    | undefined
-  >();
-  const alive = useAlive();
-
-  const linkifyOpts = useMemo<LinkifyOpts>(
-    () => ({
-      ...LINKIFY_OPTS,
-      render: factoryRenderLinkifyWithMention((href) =>
-        renderMatrixMention(
-          ct,
-          roomId,
-          href,
-          makeMentionCustomProps(mentionClickHandler),
-          membersAPI.getName,
-          getRoomName
-        )
-      ),
-    }),
-    [ct, roomId, mentionClickHandler, membersAPI.getName, getRoomName]
-  );
-
-  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
-    () =>
-      getReactCustomHtmlParser(ct, roomId, {
-        linkifyOpts,
-        useAuthentication,
-        handleSpoilerClick: spoilerClickHandler,
-        handleMentionClick: mentionClickHandler,
-        getMemberName: membersAPI.getName,
-        getRoomName,
-      }),
-    [
-      ct,
-      roomId,
-      linkifyOpts,
-      spoilerClickHandler,
-      mentionClickHandler,
-      useAuthentication,
-      membersAPI.getName,
-      getRoomName,
-    ]
-  );
-
-  const redacted = useObservableValue(threadTimeline.relations.redacted);
-  const reactions = useObservableValue(threadTimeline.relations.reactions.eventToRelations);
-  const edits = useObservableValue(threadTimeline.relations.edits.eventToRelations);
-  const messageBatch = useObservableValue(threadTimeline.batch);
-  const { events } = messageBatch.messages;
-
-  window.tt = threadTimeline;
-
-  const range = useObservableValue(threadTimeline.range.info);
-  const rangeAtStart = range.start === 0;
-  const rangeAtEnd = range.end === messageBatch.size;
-
-  const getScrollElement = useCallback(() => scrollRef.current, []);
-
-  useTimelinePrefetch(threadTimeline, PAGINATION_LIMIT);
-  const handlePaginate = useTimelinePaginate(threadTimeline, PAGINATION_LIMIT);
-  useTimelineScrollRestore(threadTimeline, scrollRef);
-  useRestoreScrollToBottom(scrollRef, messageBatch);
-
-  const { getItems, scrollToItem, scrollToElement, observeBackAnchor, observeFrontAnchor } =
-    useVirtualPaginator({
-      count: messageBatch.size,
-      limit: PAGINATION_LIMIT,
-      range,
-      onRangeChange: useCallback((r) => threadTimeline.range.setRange(r), [threadTimeline]),
-      getScrollElement,
-      getItemElement: useCallback(
-        (index: number) =>
-          (scrollRef.current?.querySelector(`[data-message-item="${index}"]`) as HTMLElement) ??
-          undefined,
-        []
-      ),
-      onEnd: handlePaginate,
-    });
-
-  const tryAutoMarkAsRead = useCallback(() => {
-    console.log('mark thread as read.');
-  }, []);
-
-  const [atBottom, atBottomAnchorRef] = useAtBottomToggle(
-    getScrollElement,
-    messageBatch.next.end ?? false,
-    useCallback(
-      (bottom: boolean) => {
-        if (bottom && document.hasFocus()) {
-          tryAutoMarkAsRead();
-        }
-      },
-      [tryAutoMarkAsRead]
-    )
-  );
-
-  useEditorResizeStickBottom(
-    getScrollElement,
-    useCallback(() => roomInputRef?.current ?? null, [roomInputRef]),
-    atBottom
-  );
-
-  // scroll to focused message
-  useLayoutEffect(() => {
-    if (focusItem && focusItem.scrollTo) {
-      scrollToItem(focusItem.index, {
-        behavior: 'instant',
-        align: 'center',
-        stopInView: true,
-      });
-    }
-
-    setTimeout(() => {
-      if (!alive()) return;
-      setFocusItem((currentItem) => {
-        if (currentItem === focusItem) return undefined;
-        return currentItem;
-      });
-    }, 2000);
-  }, [alive, focusItem, scrollToItem]);
-
-  // scroll to bottom of timeline
-  const scrollToBottomCount = scrollToBottomRef.current.count;
-  useLayoutEffect(() => {
-    if (scrollToBottomCount > 0) {
-      const scrollEl = scrollRef.current;
-      if (scrollEl)
-        scrollToBottom(scrollEl, scrollToBottomRef.current.smooth ? 'smooth' : 'instant');
-    }
-  }, [scrollToBottomCount]);
-
-  // scroll out of view msg editor in view.
-  useEffect(() => {
-    if (editId) {
-      const editMsgElement =
-        (scrollRef.current?.querySelector(`[data-message-id="${editId}"]`) as HTMLElement) ??
-        undefined;
-      if (editMsgElement) {
-        scrollToElement(editMsgElement, {
-          align: 'center',
-          behavior: 'smooth',
-          stopInView: true,
-        });
-      }
-    }
-  }, [scrollToElement, editId]);
-
-  const handleOpenReply: MouseEventHandler = useCallback(async (evt) => {
-    const targetId = evt.currentTarget.getAttribute('data-event-id');
-    if (!targetId) return;
-    console.log(targetId);
-  }, []);
-
-  const handleUserClick = useUserClickHandler();
-  const handleUsernameClick = useUsernameClickHandler(editor);
-  const [replyDraft, handleReplyClick] = useReplyClickHandler(
-    threadTimeline,
-    editor,
-    threadTimeline.threadId
-  );
-
-  const handleReactionToggle = useCallback((targetEventId: string) => {
-    console.log(targetEventId);
-  }, []);
-
-  const handleEdit = useCallback(
-    (editEvtId?: string) => {
-      if (editEvtId) {
-        setEditId(editEvtId);
-        return;
-      }
-      setEditId(undefined);
-      if (editor) {
-        ReactEditor.focus(editor);
-      }
-    },
-    [editor]
-  );
-
-  const renderMatrixEvent = (event: MessageEventWithoutRoomId, item: number, collapse: boolean) => {
-    const reactionEvents = reactions.get(event.event_id)?.filter((r) => !redacted.has(r.event_id));
-    const editEvents = edits.get(event.event_id);
-    const editedEvent = editEvents && getLatestEditEvent(event.sender, editEvents, redacted);
-    const highlighted = focusItem?.index === item && focusItem.highlight;
-
-    const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
-      <Reactions
-        style={{ marginTop: config.space.S200 }}
-        reactions={reactionEvents}
-        eventId={event.event_id}
-        canSendReaction={canSendReaction}
-        onReactionToggle={handleReactionToggle}
-      />
-    );
-
-    const content = editedEvent
-      ? rContent.newContent(editedEvent.content) ?? event.content
-      : event.content;
-
-    return (
-      <Message
-        key={event.event_id}
-        data-message-item={item}
-        data-message-id={event.event_id}
-        data-sender-id={event.sender}
-        event={event}
-        membersAPI={membersAPI}
-        messageSpacing={messageSpacing}
-        messageLayout={messageLayout}
-        collapse={collapse}
-        highlight={highlighted}
-        selected={replyDraft?.eventId === event.event_id}
-        edit={editId === event.event_id}
-        canDelete={canRedact || event.sender === ct.session.userId}
-        canSendReaction={canSendReaction}
-        canPinEvent={canPinEvent}
-        imagePackRooms={imagePackRooms}
-        reactionEvents={reactionEvents && reactionEvents.length > 0 ? reactionEvents : undefined}
-        onUserClick={handleUserClick}
-        onUsernameClick={handleUsernameClick}
-        onReplyClick={handleReplyClick}
-        onReactionToggle={handleReactionToggle}
-        onEditId={handleEdit}
-        redacted={redacted.has(event.event_id)}
-        hideReadReceipts={hideActivity}
-        showDeveloperTools={showDeveloperTools}
-        memberPowerTag={getMemberPowerTag(event.sender)}
-        accessibleTagColors={accessiblePowerTagColors}
-        legacyUsernameColor={legacyUsernameColor || direct}
-        hour24Clock={hour24Clock}
-        dateFormatString={dateFormatString}
-      >
-        <RenderMessageContent
-          displayName={membersAPI.getName(event.sender)}
-          eventType={event.type}
-          ts={event.origin_server_ts}
-          edited={!!editedEvent}
-          content={content}
-          mediaAutoLoad={mediaAutoLoad}
-          urlPreview={showUrlPreview}
-          htmlReactParserOptions={htmlReactParserOptions}
-          linkifyOpts={linkifyOpts}
-          outlineAttachment={messageLayout === MessageLayout.Bubble}
-          redacted={redacted.has(event.event_id)}
-        />
-        {reactionJSX}
-      </Message>
-    );
-  };
-
-  let prevEvent: MessageEventWithoutRoomId | undefined;
-  let isPrevRendered = false;
-  let dayDivider = false;
-
-  const eventRenderer = (item: number) => {
-    const event = events[item];
-
-    if (!event) return null;
-
-    if (event.sender && ignoredUsersSet.has(event.sender)) {
-      return null;
-    }
-    if (redacted.has(event.event_id) && !showHiddenEvents) {
-      return null;
-    }
-
-    if (!dayDivider) {
-      dayDivider = prevEvent
-        ? !inSameDay(prevEvent.origin_server_ts, event.origin_server_ts)
-        : false;
-    }
-
-    const collapsed =
-      isPrevRendered &&
-      !dayDivider &&
-      prevEvent !== undefined &&
-      prevEvent.sender === event.sender &&
-      prevEvent.type === event.type &&
-      minuteDifference(prevEvent.origin_server_ts, event.origin_server_ts) < 2 &&
-      !getReplyId(event.content);
-
-    const eventJSX = renderMatrixEvent(event, item, collapsed);
-    prevEvent = event;
-    isPrevRendered = !!eventJSX;
-
-    const dayDividerJSX =
-      dayDivider && eventJSX ? (
-        <DayDivider ts={event.origin_server_ts} messageSpacing={messageSpacing} />
-      ) : null;
-
-    const replyEventId = getReplyId(event.content);
-
-    const replyJSX =
-      !fallbackReply(event.content) && replyEventId ? (
-        <Reply
-          roomId={roomId}
-          eventId={replyEventId}
-          onClick={handleOpenReply}
-          getMemberPowerTag={getMemberPowerTag}
-          accessibleTagColors={accessiblePowerTagColors}
-          legacyUsernameColor={legacyUsernameColor || direct}
-          redacted={redacted.has(replyEventId)}
-          getMemberName={membersAPI.getName}
-          timeline={threadTimeline}
-          htmlReactParserOptions={htmlReactParserOptions}
-          linkifyOpts={linkifyOpts}
-          hour24Clock={hour24Clock}
-          dateFormatString={dateFormatString}
-          messageLayout={messageLayout}
-          messageSpacing={messageSpacing}
-        />
-      ) : null;
-
-    if (eventJSX && dayDividerJSX) {
-      dayDivider = false;
-
-      return (
-        <React.Fragment key={event.event_id}>
-          {dayDividerJSX}
-          {replyJSX}
-          {eventJSX}
-        </React.Fragment>
-      );
-    }
-
-    if (replyJSX) {
-      return (
-        <React.Fragment key={event.event_id}>
-          {replyJSX}
-          {eventJSX}
-        </React.Fragment>
-      );
-    }
-
-    return eventJSX;
-  };
+  const threadInputRef = useRef<HTMLDivElement>(null);
+  const threadViewRef = useRef<HTMLDivElement>(null);
 
   return (
     <FocusTrap
@@ -532,6 +33,7 @@ export function ThreadView({ threadTimeline, requestClose }: ThreadViewProps) {
       }}
     >
       <Page
+        ref={threadViewRef}
         className={classNames(css.ThreadView, {
           [css.ThreadViewFloating]: floating,
         })}
@@ -564,61 +66,17 @@ export function ThreadView({ threadTimeline, requestClose }: ThreadViewProps) {
           </Box>
         </PageHeader>
 
-        <Box grow="Yes" style={{ position: 'relative' }}>
-          <Scroll ref={scrollRef} visibility="Hover">
-            <Box
-              direction="Column"
-              justifyContent="End"
-              style={{ minHeight: '100%', padding: `${config.space.S600} 0` }}
-            >
-              {!messageBatch.prev.end || !rangeAtStart ? (
-                <PlaceholderList
-                  ref={observeBackAnchor}
-                  count={5}
-                  Placeholder={
-                    messageLayout === MessageLayout.Compact
-                      ? CompactPlaceholder
-                      : DefaultPlaceholder
-                  }
-                />
-              ) : (
-                <MessageBase space={messageSpacing}>
-                  <TimelineDivider variant="Surface">
-                    <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
-                      <Text size="L400">Replies</Text>
-                    </Badge>
-                  </TimelineDivider>
-                </MessageBase>
-              )}
-              {getItems().map(eventRenderer)}
-              {(!messageBatch.next.end || !rangeAtEnd) && (
-                <PlaceholderList
-                  ref={observeFrontAnchor}
-                  count={5}
-                  Placeholder={
-                    messageLayout === MessageLayout.Compact
-                      ? CompactPlaceholder
-                      : DefaultPlaceholder
-                  }
-                />
-              )}
-              <span ref={atBottomAnchorRef} />
-            </Box>
-            <Box shrink="No" direction="Column" style={{ padding: `0 ${config.space.S400}` }}>
-              <RoomInput
-                editor={editor}
-                fileDropContainerRef={roomViewRef}
-                ref={roomInputRef}
-                threadId={threadTimeline.threadId}
-              />
-              <RoomViewFollowingPlaceholder />
-            </Box>
-          </Scroll>
-          {!atBottom && (
-            <TimelineFloat position="Bottom">
-              <JumpToLatestButton getScrollElement={getScrollElement} />
-            </TimelineFloat>
-          )}
+        <TimelineView threadTimeline={threadTimeline} />
+        <Box shrink="No" direction="Column">
+          <div style={{ padding: `0 ${config.space.S400}` }}>
+            <RoomInput
+              editor={editor}
+              fileDropContainerRef={threadViewRef}
+              ref={threadInputRef}
+              threadId={threadTimeline.threadId}
+            />
+          </div>
+          <RoomViewFollowingPlaceholder />
         </Box>
       </Page>
     </FocusTrap>
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
new file mode 100644
index 00000000..babf5751
--- /dev/null
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -0,0 +1,554 @@
+import React, {
+  MouseEventHandler,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { ReactEditor } from 'slate-react';
+import { Box, Scroll, Text, config } from 'folds';
+import { Opts as LinkifyOpts } from 'linkifyjs';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { useVirtualPaginator } from '../../../hooks/useVirtualPaginator';
+import { useAlive } from '../../../hooks/useAlive';
+import { scrollToBottom } from '../../../utils/dom';
+import {
+  DefaultPlaceholder,
+  CompactPlaceholder,
+  Reply,
+  DividerTime,
+} from '../../../components/message';
+import {
+  factoryRenderLinkifyWithMention,
+  getReactCustomHtmlParser,
+  LINKIFY_OPTS,
+  makeMentionCustomProps,
+  renderMatrixMention,
+} from '../../../plugins/react-custom-html-parser';
+import { fallbackReply, getLatestEditEvent, getReplyId } from '../../../utils/room';
+import { useSetting } from '../../../state/hooks/settings';
+import { MessageLayout, settingsAtom } from '../../../state/settings';
+import { Reactions, Message } from '../message';
+import * as css from './styles.css';
+import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
+import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
+import { RenderMessageContent } from '../../../components/RenderMessageContent';
+import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
+import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
+import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
+import { useImagePackRooms } from '../../../hooks/useImagePackRooms';
+import { useIsDirectRoom, useRoom } from '../../../hooks/useRoom';
+import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
+import {
+  useAccessiblePowerTagColors,
+  useGetMemberPowerTag,
+} from '../../../hooks/useMemberPowerTag';
+import { useTheme } from '../../../hooks/useTheme';
+import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
+import { usePowerLevelTags, usePowerLevelTagsState } from '../../../hooks/usePowerLevelTags';
+import { ThreadTimeline } from '../../../../client/room/ThreadTimeline';
+import { useObservableValue } from '../../../hooks/useObservableValue';
+import { useClient } from '../../../hooks/useClient';
+import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
+import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
+import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
+import {
+  useAtBottomToggle,
+  useEditorResizeStickBottom,
+  useEventCollapse,
+  useEventDivider,
+  useReplyClickHandler,
+  useRestoreScrollToBottom,
+  useTimelinePaginate,
+  useTimelinePrefetch,
+  useTimelineScrollRestore,
+  useUserClickHandler,
+  useUsernameClickHandler,
+} from '../hooks/useTimeline';
+import { rContent } from '../../../../client/reader';
+import { useEditor } from '../../../components/editor';
+import { TimelineFloat, JumpToLatestButton, ComboDivider, PlaceholderList } from '../components';
+import { OutboxView } from '../OutboxView';
+
+type TimelineViewProps = {
+  threadTimeline: ThreadTimeline;
+};
+
+const PAGINATION_LIMIT = 80;
+
+export function TimelineView({ threadTimeline }: TimelineViewProps) {
+  const ct = useClient();
+  const roomId = useRoom();
+  const useAuthentication = useMediaAuthentication();
+  const encryptedRooms = useObservableValue(ct.encryptedRooms);
+  const editor = useEditor();
+  const roomInputRef = useRef<HTMLDivElement>(null);
+
+  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
+  const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
+  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+  const direct = useIsDirectRoom();
+  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
+  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
+  const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
+  const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+
+  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+
+  const ignoredUsersList = useIgnoredUsers();
+  const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
+
+  const powerLevels = usePowerLevelsContext();
+  const creators = useRoomCreators(roomId);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const membersAPI = useRoomMembersAPI();
+  const creatorsTag = useRoomCreatorsTag();
+  const powerLevelTagsState = usePowerLevelTagsState(roomId);
+  const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsState.value);
+  const getMemberPowerTag = useGetMemberPowerTag(creators, powerLevels);
+
+  const theme = useTheme();
+  const accessiblePowerTagColors = useAccessiblePowerTagColors(
+    theme.kind,
+    creatorsTag,
+    powerLevelTags
+  );
+
+  const permissions = useRoomPermissions(creators, powerLevels);
+
+  const canRedact = permissions.action('redact', ct.session.userId);
+  const canSendReaction = permissions.event(MessageEvent.Reaction, ct.session.userId);
+  const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, ct.session.userId);
+  const [editId, setEditId] = useState<string>();
+
+  const mentionClickHandler = useMentionClickHandler(roomId);
+  const spoilerClickHandler = useSpoilerClickHandler();
+  const imagePackRooms = useImagePackRooms(roomId);
+
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const scrollToBottomRef = useRef({
+    count: 0,
+    smooth: true,
+  });
+
+  const [focusItem, setFocusItem] = useState<
+    | {
+        index: number;
+        scrollTo: boolean;
+        highlight: boolean;
+      }
+    | undefined
+  >();
+  const alive = useAlive();
+
+  const linkifyOpts = useMemo<LinkifyOpts>(
+    () => ({
+      ...LINKIFY_OPTS,
+      render: factoryRenderLinkifyWithMention((href) =>
+        renderMatrixMention(
+          ct,
+          roomId,
+          href,
+          makeMentionCustomProps(mentionClickHandler),
+          membersAPI.getName,
+          getRoomName
+        )
+      ),
+    }),
+    [ct, roomId, mentionClickHandler, membersAPI.getName, getRoomName]
+  );
+
+  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
+    () =>
+      getReactCustomHtmlParser(ct, roomId, {
+        linkifyOpts,
+        useAuthentication,
+        handleSpoilerClick: spoilerClickHandler,
+        handleMentionClick: mentionClickHandler,
+        getMemberName: membersAPI.getName,
+        getRoomName,
+      }),
+    [
+      ct,
+      roomId,
+      linkifyOpts,
+      spoilerClickHandler,
+      mentionClickHandler,
+      useAuthentication,
+      membersAPI.getName,
+      getRoomName,
+    ]
+  );
+
+  const redacted = useObservableValue(threadTimeline.relations.redacted);
+  const reactions = useObservableValue(threadTimeline.relations.reactions.eventToRelations);
+  const edits = useObservableValue(threadTimeline.relations.edits.eventToRelations);
+  const messageBatch = useObservableValue(threadTimeline.batch);
+  const localEventSenders = useObservableValue(threadTimeline.outbox.senders);
+  const threadMeta = useObservableValue(threadTimeline.meta);
+  const { events } = messageBatch.messages;
+
+  const range = useObservableValue(threadTimeline.range.info);
+  const rangeAtStart = range.start === 0;
+  const rangeAtEnd = range.end === messageBatch.size;
+
+  const getScrollElement = useCallback(() => scrollRef.current, []);
+
+  useTimelinePrefetch(threadTimeline, PAGINATION_LIMIT);
+  const handlePaginate = useTimelinePaginate(threadTimeline, PAGINATION_LIMIT);
+  useTimelineScrollRestore(threadTimeline, scrollRef);
+  useRestoreScrollToBottom(scrollRef, messageBatch);
+
+  const { getItems, scrollToItem, scrollToElement, observeBackAnchor, observeFrontAnchor } =
+    useVirtualPaginator({
+      count: messageBatch.size,
+      limit: PAGINATION_LIMIT,
+      range,
+      onRangeChange: useCallback((r) => threadTimeline.range.setRange(r), [threadTimeline]),
+      getScrollElement,
+      getItemElement: useCallback(
+        (index: number) =>
+          (scrollRef.current?.querySelector(`[data-message-item="${index}"]`) as HTMLElement) ??
+          undefined,
+        []
+      ),
+      onEnd: handlePaginate,
+    });
+
+  const tryAutoMarkAsRead = useCallback(() => {
+    console.log('mark thread as read.');
+  }, []);
+
+  const [atBottom, atBottomAnchorRef] = useAtBottomToggle(
+    getScrollElement,
+    messageBatch.next.end ?? false,
+    useCallback(
+      (bottom: boolean) => {
+        if (bottom && document.hasFocus()) {
+          tryAutoMarkAsRead();
+        }
+      },
+      [tryAutoMarkAsRead]
+    )
+  );
+
+  useEditorResizeStickBottom(
+    getScrollElement,
+    useCallback(() => roomInputRef?.current ?? null, [roomInputRef]),
+    atBottom
+  );
+
+  // scroll to focused message
+  useLayoutEffect(() => {
+    if (focusItem && focusItem.scrollTo) {
+      scrollToItem(focusItem.index, {
+        behavior: 'instant',
+        align: 'center',
+        stopInView: true,
+      });
+    }
+
+    setTimeout(() => {
+      if (!alive()) return;
+      setFocusItem((currentItem) => {
+        if (currentItem === focusItem) return undefined;
+        return currentItem;
+      });
+    }, 2000);
+  }, [alive, focusItem, scrollToItem]);
+
+  // scroll to bottom of timeline
+  const scrollToBottomCount = scrollToBottomRef.current.count;
+  useLayoutEffect(() => {
+    if (scrollToBottomCount > 0) {
+      const scrollEl = scrollRef.current;
+      if (scrollEl)
+        scrollToBottom(scrollEl, scrollToBottomRef.current.smooth ? 'smooth' : 'instant');
+    }
+  }, [scrollToBottomCount]);
+
+  // scroll out of view msg editor in view.
+  useEffect(() => {
+    if (editId) {
+      const editMsgElement =
+        (scrollRef.current?.querySelector(`[data-message-id="${editId}"]`) as HTMLElement) ??
+        undefined;
+      if (editMsgElement) {
+        scrollToElement(editMsgElement, {
+          align: 'center',
+          behavior: 'smooth',
+          stopInView: true,
+        });
+      }
+    }
+  }, [scrollToElement, editId]);
+
+  const handleOpenReply: MouseEventHandler = useCallback(async (evt) => {
+    const targetId = evt.currentTarget.getAttribute('data-event-id');
+    if (!targetId) return;
+    console.log(targetId);
+  }, []);
+
+  const handleUserClick = useUserClickHandler();
+  const handleUsernameClick = useUsernameClickHandler(editor);
+  const [replyDraft, handleReplyClick] = useReplyClickHandler(
+    threadTimeline,
+    editor,
+    threadTimeline.threadId
+  );
+
+  const handleReactionToggle = useCallback((targetEventId: string) => {
+    console.log(targetEventId);
+  }, []);
+
+  const handleEdit = useCallback(
+    (editEvtId?: string) => {
+      if (editEvtId) {
+        setEditId(editEvtId);
+        return;
+      }
+      setEditId(undefined);
+      if (editor) {
+        ReactEditor.focus(editor);
+      }
+    },
+    [editor]
+  );
+
+  const renderMatrixEvent = (event: MessageEventWithoutRoomId, item: number, collapse: boolean) => {
+    const reactionEvents = reactions.get(event.event_id)?.filter((r) => !redacted.has(r.event_id));
+    const editEvents = edits.get(event.event_id);
+    const editedEvent = editEvents && getLatestEditEvent(event.sender, editEvents, redacted);
+    const highlighted = focusItem?.index === item && focusItem.highlight;
+
+    const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
+      <Reactions
+        style={{ marginTop: config.space.S200 }}
+        reactions={reactionEvents}
+        eventId={event.event_id}
+        canSendReaction={canSendReaction}
+        onReactionToggle={handleReactionToggle}
+      />
+    );
+
+    const content = editedEvent
+      ? rContent.newContent(editedEvent.content) ?? event.content
+      : event.content;
+
+    // FIXME: Redacted message
+    return (
+      <Message
+        key={event.event_id}
+        data-message-item={item}
+        data-message-id={event.event_id}
+        data-sender-id={event.sender}
+        event={event}
+        membersAPI={membersAPI}
+        messageSpacing={messageSpacing}
+        messageLayout={messageLayout}
+        collapse={collapse}
+        highlight={highlighted}
+        selected={replyDraft?.eventId === event.event_id}
+        edit={editId === event.event_id}
+        canDelete={canRedact || event.sender === ct.session.userId}
+        canSendReaction={canSendReaction}
+        canPinEvent={canPinEvent}
+        imagePackRooms={imagePackRooms}
+        reactionEvents={reactionEvents && reactionEvents.length > 0 ? reactionEvents : undefined}
+        onUserClick={handleUserClick}
+        onUsernameClick={handleUsernameClick}
+        onReplyClick={handleReplyClick}
+        onReactionToggle={handleReactionToggle}
+        onEditId={handleEdit}
+        redacted={redacted.has(event.event_id)}
+        hideReadReceipts={hideActivity}
+        showDeveloperTools={showDeveloperTools}
+        memberPowerTag={getMemberPowerTag(event.sender)}
+        accessibleTagColors={accessiblePowerTagColors}
+        legacyUsernameColor={legacyUsernameColor || direct}
+        hour24Clock={hour24Clock}
+        dateFormatString={dateFormatString}
+      >
+        <RenderMessageContent
+          displayName={membersAPI.getName(event.sender)}
+          eventType={event.type}
+          ts={event.origin_server_ts}
+          edited={!!editedEvent}
+          content={content}
+          mediaAutoLoad={mediaAutoLoad}
+          urlPreview={showUrlPreview}
+          htmlReactParserOptions={htmlReactParserOptions}
+          linkifyOpts={linkifyOpts}
+          outlineAttachment={messageLayout === MessageLayout.Bubble}
+        />
+        {reactionJSX}
+      </Message>
+    );
+  };
+
+  const { getDayDivider, getThreadRootDivider, updateDivider, clearDayDivider } = useEventDivider();
+  const { getCollapsed, updateCollapse } = useEventCollapse();
+  const eventRenderer = (event: MessageEventWithoutRoomId, item: number) => {
+    if (event.sender && ignoredUsersSet.has(event.sender)) {
+      return null;
+    }
+    // FIXME: dont hide redacted event for threads
+    if (redacted.has(event.event_id) && !showHiddenEvents) {
+      return null;
+    }
+
+    const dayDivider = getDayDivider(event);
+    const replyCount =
+      threadMeta && getThreadRootDivider(threadMeta.rootEvent) ? threadMeta.replyCount : undefined;
+    const collapsed = getCollapsed(event, false, dayDivider);
+
+    const eventJSX = renderMatrixEvent(event, item, collapsed);
+    updateCollapse(event, !!eventJSX);
+    updateDivider(event);
+
+    if (!eventJSX) return null;
+
+    const dividerJSX =
+      dayDivider || replyCount ? (
+        <ComboDivider
+          messageSpacing={messageSpacing}
+          ts={dayDivider ? event.origin_server_ts : undefined}
+          replyCount={replyCount}
+        />
+      ) : null;
+    if (dayDivider && dividerJSX) clearDayDivider();
+
+    const replyEventId = fallbackReply(event.content) ? undefined : getReplyId(event.content);
+    const replyJSX = replyEventId ? (
+      <Reply
+        roomId={roomId}
+        eventId={replyEventId}
+        onClick={handleOpenReply}
+        getMemberPowerTag={getMemberPowerTag}
+        accessibleTagColors={accessiblePowerTagColors}
+        legacyUsernameColor={legacyUsernameColor || direct}
+        redacted={redacted.has(replyEventId)}
+        getMemberName={membersAPI.getName}
+        timeline={threadTimeline}
+        htmlReactParserOptions={htmlReactParserOptions}
+        linkifyOpts={linkifyOpts}
+        hour24Clock={hour24Clock}
+        dateFormatString={dateFormatString}
+        messageLayout={messageLayout}
+        messageSpacing={messageSpacing}
+      />
+    ) : null;
+
+    return (
+      <React.Fragment key={event.event_id}>
+        {dividerJSX}
+        {replyJSX}
+        {eventJSX}
+      </React.Fragment>
+    );
+  };
+
+  return (
+    <Box grow="Yes" style={{ position: 'relative' }}>
+      <Scroll ref={scrollRef} size="0" visibility="Hover" hideTrack>
+        <Box direction="Column" style={{ minHeight: '100%' }}>
+          <Box
+            grow="Yes"
+            alignItems="Center"
+            justifyContent="Center"
+            direction="Column"
+            className={css.ZigZagLine}
+            style={{ padding: config.space.S700 }}
+            gap="700"
+          >
+            <Box
+              grow="Yes"
+              alignItems="Center"
+              justifyContent="Center"
+              direction="Column"
+              gap="300"
+            >
+              <Text size="H1">✦</Text>
+              <Text size="L400">A Thread Begins</Text>
+            </Box>
+            <Text size="T200">
+              <DividerTime ts={threadMeta?.rootEvent.origin_server_ts ?? Date.now()} />
+            </Text>
+          </Box>
+          <Box
+            grow="No"
+            direction="Column"
+            justifyContent="Start"
+            style={{
+              padding: `${config.space.S600} ${config.space.S400} ${config.space.S600} 0`,
+            }}
+          >
+            {!messageBatch.prev.end || !rangeAtStart || !threadMeta ? (
+              <PlaceholderList
+                ref={observeBackAnchor}
+                count={5}
+                Placeholder={
+                  messageLayout === MessageLayout.Compact ? CompactPlaceholder : DefaultPlaceholder
+                }
+              />
+            ) : (
+              <>{eventRenderer(threadMeta.rootEvent, -1)}</>
+            )}
+            {getItems().map((item) => {
+              const event = events[item];
+              if (!event) return null;
+              return eventRenderer(event, item);
+            })}
+            {(!messageBatch.next.end || !rangeAtEnd) && (
+              <PlaceholderList
+                ref={observeFrontAnchor}
+                count={5}
+                Placeholder={
+                  messageLayout === MessageLayout.Compact ? CompactPlaceholder : DefaultPlaceholder
+                }
+              />
+            )}
+            {rangeAtEnd && messageBatch.next.end && (
+              <OutboxView
+                senders={localEventSenders}
+                messageBatch={messageBatch}
+                membersAPI={membersAPI}
+                redacted={redacted}
+                messageLayout={messageLayout}
+                messageSpacing={messageSpacing}
+                onUserClick={handleUserClick}
+                onUsernameClick={handleUsernameClick}
+                getMemberPowerTag={getMemberPowerTag}
+                accessibleTagColors={accessiblePowerTagColors}
+                legacyUsernameColor={legacyUsernameColor || direct}
+                mediaAutoLoad={mediaAutoLoad}
+                urlPreview={showUrlPreview}
+                hour24Clock={hour24Clock}
+                dateFormatString={dateFormatString}
+                htmlReactParserOptions={htmlReactParserOptions}
+                linkifyOpts={linkifyOpts}
+              />
+            )}
+            <span ref={atBottomAnchorRef} />
+          </Box>
+        </Box>
+      </Scroll>
+      {!atBottom && (
+        <TimelineFloat position="Bottom">
+          <JumpToLatestButton getScrollElement={getScrollElement} />
+        </TimelineFloat>
+      )}
+    </Box>
+  );
+}
diff --git a/src/app/features/room/thread-view/styles.css.ts b/src/app/features/room/thread-view/styles.css.ts
index 5709c58f..9a0867e9 100644
--- a/src/app/features/room/thread-view/styles.css.ts
+++ b/src/app/features/room/thread-view/styles.css.ts
@@ -1,5 +1,6 @@
-import { style } from '@vanilla-extract/css';
+import { keyframes, style } from '@vanilla-extract/css';
 import { config, toRem } from 'folds';
+import { ContainerColor } from '../../../styles/ContainerColor.css';
 
 export const ThreadView = style({
   // width: toRem(456),
@@ -20,3 +21,56 @@ export const ThreadViewFloating = style({
   width: '100vw',
   boxShadow: config.shadow.E400,
 });
+
+export const ZigZagLine = style([
+  ContainerColor({ variant: 'Background' }),
+  {
+    minHeight: '20px',
+    overflow: 'hidden',
+
+    mask: `50% / 20px repeat-x conic-gradient(
+      from -45deg at bottom,
+      #0000,
+      #000 1deg 89deg,
+      #0000 90deg
+    )`,
+  },
+]);
+
+export const rainbowUpAnime = keyframes({
+  '0%': {
+    height: 0,
+  },
+  '100%': {
+    height: '100%',
+  },
+});
+
+export const ZigZagRainbow = style({
+  '::before': {
+    content: '""',
+    position: 'absolute',
+    height: '100%',
+    bottom: 0,
+    left: 0,
+    right: 0,
+
+    background: `
+      linear-gradient(
+        to top,
+        rgba(255, 100, 120, 0.18),
+        rgba(255, 190, 120, 0.18),
+        rgba(255, 255, 140, 0.18),
+        rgba(120, 255, 170, 0.18),
+        rgba(120, 240, 240, 0.18),
+        rgba(120, 180, 255, 0.18),
+        rgba(180, 140, 255, 0.18),
+        rgba(255, 140, 210, 0.18),
+        rgba(255, 120, 140, 0.18),
+        transparent
+      )
+      `,
+
+    animation: `${rainbowUpAnime} 1000ms ease-out`,
+  },
+});
diff --git a/src/app/hooks/useThreadParticipant.ts b/src/app/hooks/useThreadParticipant.ts
new file mode 100644
index 00000000..ac205e87
--- /dev/null
+++ b/src/app/hooks/useThreadParticipant.ts
@@ -0,0 +1,21 @@
+import { useMemo } from 'react';
+import { ThreadTimeline } from '../../client/room/ThreadTimeline';
+import { useObservableValue } from './useObservableValue';
+
+export const useThreadParticipants = (timeline: ThreadTimeline): string[] => {
+  const meta = useObservableValue(timeline.meta);
+  const messageBatch = useObservableValue(timeline.batch);
+  const users: string[] = useMemo(() => {
+    const u = new Set<string>();
+    messageBatch.messages.events.forEach((m) => {
+      u.add(m.sender);
+    });
+
+    if (meta?.latestReplyEvent) {
+      u.add(meta.latestReplyEvent?.sender);
+    }
+    return Array.from(u);
+  }, [meta, messageBatch]);
+
+  return users;
+};
diff --git a/src/app/pages/auth/AuthLayout.tsx b/src/app/pages/auth/AuthLayout.tsx
index 3943f42d..1b37360d 100644
--- a/src/app/pages/auth/AuthLayout.tsx
+++ b/src/app/pages/auth/AuthLayout.tsx
@@ -123,7 +123,7 @@ export function AuthLayout() {
     discoveryState.status === AsyncStatus.Success ? discoveryState.data.response : [];
 
   return (
-    <Scroll variant="Background" visibility="Hover" size="300" hideTrack>
+    <Scroll variant="Background" visibility="Hover" size="0" hideTrack>
       <Box
         className={classNames(css.AuthLayout, PatternsCss.BackgroundDotPattern)}
         direction="Column"
diff --git a/src/client/room/ThreadMeta.ts b/src/client/room/ThreadMeta.ts
index 54213f8d..9ee56711 100644
--- a/src/client/room/ThreadMeta.ts
+++ b/src/client/room/ThreadMeta.ts
@@ -1,19 +1,10 @@
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 
 export class ThreadMeta {
-  public readonly latestEvent: MessageEventWithoutRoomId;
-
-  public readonly count: number;
-
-  public readonly currentUserParticipated: boolean;
-
   constructor(
-    latestEvent: MessageEventWithoutRoomId,
-    count: number,
-    currentUserParticipated: boolean
-  ) {
-    this.latestEvent = latestEvent;
-    this.count = count;
-    this.currentUserParticipated = currentUserParticipated;
-  }
+    public readonly rootEvent: MessageEventWithoutRoomId,
+    public readonly latestReplyEvent: MessageEventWithoutRoomId | undefined,
+    public readonly replyCount: number,
+    public readonly currentUserParticipated: boolean
+  ) {}
 }
diff --git a/src/client/room/ThreadTimeline.ts b/src/client/room/ThreadTimeline.ts
index 87226670..3b9c25a5 100644
--- a/src/client/room/ThreadTimeline.ts
+++ b/src/client/room/ThreadTimeline.ts
@@ -43,6 +43,8 @@ export class ThreadTimeline implements TimelineView, Disposable {
 
   public readonly onSync: Observable<ThreadSyncData>;
 
+  public readonly meta: ObservableValue<ThreadMeta | undefined>;
+
   public readonly relations: RelationsProcessor;
 
   public readonly batch: ObservableValue<MessageBatch>;
@@ -53,10 +55,6 @@ export class ThreadTimeline implements TimelineView, Disposable {
 
   public readonly outbox = new LocalEventOutbox();
 
-  public meta: ObservableValue<ThreadMeta | undefined>;
-
-  public rootEvent: ObservableValue<MessageEventWithoutRoomId | undefined>;
-
   private utils: TimelineUtils;
 
   private paginatingBackward = false;
@@ -75,7 +73,7 @@ export class ThreadTimeline implements TimelineView, Disposable {
     this.threadId = threadId;
     this.request = request;
     // NOTE: we don't have dedicated set of relations,
-    //  because we do not want to recurse relations to put them in thread.
+    // because we do not want to recurse relations to put them in thread.
     this.relations = relations;
 
     this.batch = new ObservableValue(MessageBatch.emptyAtForwardEnd(), this.publishKey);
@@ -83,7 +81,6 @@ export class ThreadTimeline implements TimelineView, Disposable {
     this.range = new MessageRange(this.batch);
 
     this.meta = new ObservableValue(undefined, this.publishKey);
-    this.rootEvent = new ObservableValue(undefined, this.publishKey);
     this.onSync = new Observable(publishKey);
     this.utils = new TimelineUtils(roomId, request);
 
@@ -96,40 +93,60 @@ export class ThreadTimeline implements TimelineView, Disposable {
     );
 
     if (rootEvent) {
-      this.processRootEvent(rootEvent);
+      this.processTheadMeta(rootEvent);
     } else {
-      this.fetchRootEvent();
+      this.refreshThreadMeta();
     }
   }
 
-  private processRootEvent(event: MessageEventWithoutRoomId): void {
-    const relations = rUnsigned.relations(event.unsigned);
+  private processTheadMeta(rootEvent: MessageEventWithoutRoomId): void {
+    const relations = rUnsigned.relations(rootEvent.unsigned);
     const threadRelation = rRelations.thread(relations);
-    const latestEvent = rThread.latestEvent(threadRelation);
-    const count = rThread.count(threadRelation) ?? 0;
+    const latestReply = rThread.latestEvent(threadRelation) as
+      | MessageEventWithoutRoomId
+      | undefined;
+    const replyCount = rThread.count(threadRelation) ?? 0;
     const currentUserParticipated = rThread.currentUserParticipated(threadRelation) ?? false;
 
-    if (latestEvent) {
-      this.meta.publish(
-        this.publishKey,
-        new ThreadMeta(latestEvent as MessageEventWithoutRoomId, count, currentUserParticipated)
-      );
+    this.meta.publish(
+      this.publishKey,
+      new ThreadMeta(rootEvent, latestReply, replyCount, currentUserParticipated)
+    );
+
+    if (!latestReply) {
+      this.batchManager.markTimelineStart();
     }
-    this.rootEvent.publish(this.publishKey, event);
   }
 
-  private async fetchRootEvent(): Promise<void> {
-    const resp = await this.request(
-      getEvent({
-        pathParams: { roomId: this.roomId, eventId: this.threadId },
-      })
-    );
-    const [err, event] = await parseMatrixResp<GetEventOK>(resp);
-    if (err) {
-      console.error(printMatrixError(err));
-      return;
+  private async refreshThreadMeta(): Promise<void> {
+    try {
+      const resp = await this.request(
+        getEvent({ pathParams: { roomId: this.roomId, eventId: this.threadId } })
+      );
+      const [err, event] = await parseMatrixResp<GetEventOK>(resp);
+      if (err) {
+        console.error(printMatrixError(err));
+        return;
+      }
+      this.processTheadMeta(event);
+    } catch (err) {
+      console.error(err);
     }
-    this.processRootEvent(event);
+  }
+
+  private syncThreadMeta(events: MessageEventWithoutRoomId[]) {
+    const meta = this.meta.read;
+    const latestEvent = events.at(-1);
+    if (!meta || !latestEvent) return;
+
+    // TODO: need session userId to find current user participation;
+    const newMeta = new ThreadMeta(
+      meta.rootEvent,
+      latestEvent,
+      meta.replyCount + events.length,
+      meta.currentUserParticipated
+    );
+    this.meta.publish(this.publishKey, newMeta);
   }
 
   private onSyncListener(data: ThreadSyncData): void {
@@ -137,6 +154,11 @@ export class ThreadTimeline implements TimelineView, Disposable {
 
     // NOTE: relations are already picked & filtered in main timeline.
     this.batchManager.handleSync(events, limited, prevToken);
+    if (limited) {
+      this.refreshThreadMeta();
+    } else {
+      this.syncThreadMeta(events);
+    }
 
     const eventsWithRemoteEcho = this.outbox.getSentEventIds().filter((e) => this.findEvent(e));
     this.outbox.removeByEventIds(eventsWithRemoteEcho);
diff --git a/src/client/room/Timeline.ts b/src/client/room/Timeline.ts
index 68a36d32..9b9ae165 100644
--- a/src/client/room/Timeline.ts
+++ b/src/client/room/Timeline.ts
@@ -20,8 +20,7 @@ import { TimelineBatchManager } from './TimelineBatchManager';
 import { RelationsProcessor } from './relations';
 import { ThreadTimeline } from './ThreadTimeline';
 import { getMessagesFilter } from '../filter';
-import { rContent, rRelatesTo, rRelations, rUnsigned } from '../reader';
-import { RelationType } from '../../types/matrix/common';
+import { rRelations, rUnsigned } from '../reader';
 import { getThreadId } from '../../app/utils/room';
 import { TimelineUtils } from './TimelineUtils';
 import { EventSenderIdle, LocalEvent, LocalEventSender, LocalMessage } from './local-event';
@@ -115,11 +114,7 @@ export class Timeline implements TimelineView, Disposable {
     const threadIdToEvents = new Map<string, MessageEventWithoutRoomId[]>();
 
     messageEvents.forEach((event) => {
-      const relatesTo = rContent.relatesTo(event.content);
-      const threadId =
-        rRelatesTo.relType(relatesTo) === RelationType.Thread
-          ? rRelatesTo.eventId(relatesTo)
-          : undefined;
+      const threadId = getThreadId(event);
 
       if (threadId) {
         const threadEvents = threadIdToEvents.get(threadId) ?? [];
@@ -134,6 +129,7 @@ export class Timeline implements TimelineView, Disposable {
         new ThreadTimeline(this.roomId, threadId, this.publishKey, this.request, this.relations);
 
       thread.onSync.publish(this.publishKey, { events, limited, prevToken });
+      thread.paginateBackward(20);
 
       if (!this.threads.read.has(threadId)) {
         this.addThread(thread);
@@ -175,6 +171,7 @@ export class Timeline implements TimelineView, Disposable {
         this.relations,
         event
       );
+      thread.paginateBackward(20);
       this.addThread(thread);
     });
   }
@@ -292,6 +289,8 @@ export class Timeline implements TimelineView, Disposable {
 
     const { end: prevToken, start: endToken, chunk } = result;
     const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(chunk);
+
+    this.pickThreads(messageEvents);
     this.batchManager.loadEvents(messageEvents, prevToken, endToken);
   }
 
@@ -336,6 +335,20 @@ export class Timeline implements TimelineView, Disposable {
   }
 
   public openThread(threadId: string): void {
+    const threadRoot = this.findEvent(threadId);
+    if (!this.threads.read.has(threadId) && threadRoot) {
+      this.addThread(
+        new ThreadTimeline(
+          this.roomId,
+          threadId,
+          this.publishKey,
+          this.request,
+          this.relations,
+          threadRoot
+        )
+      );
+    }
+
     this.activeThread.publish(this.publishKey, threadId);
   }
 
diff --git a/src/client/syncWriter/utils.ts b/src/client/syncWriter/utils.ts
index ee0b0102..767f2b18 100644
--- a/src/client/syncWriter/utils.ts
+++ b/src/client/syncWriter/utils.ts
@@ -172,6 +172,7 @@ export const writeJoinRoomLatestEvent = async (
     const { events } = joinRoom.timeline ?? {};
     if (!events) return;
 
+    // TODO: filter events that are supported by timeline.
     for (let i = events.length - 1; i >= 0; i -= 1) {
       const event = events[i];
       if (!('state_key' in event)) {

From 447058d0b9d3223c2f69dbd47e4628b63e2c91af Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 14 Aug 2026 12:19:44 +0530
Subject: [PATCH 060/158] change loading screen message to sparking

---
 src/app/pages/client/ClientRoot.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index 4f528eb3..17917c34 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -82,7 +82,7 @@ export function ClientRoot({ children }: ClientRootProps) {
                 gap="200"
               >
                 <Text size="T200" align="Center">
-                  Initializing...
+                  Sparking...
                 </Text>
                 <ProgressBar
                   style={{ width: '100%' }}

From f6cada048b7aca3f1a54ae9bd0e85ffbe7aef92d Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 14 Aug 2026 14:13:10 +0530
Subject: [PATCH 061/158] fix reply not working with thread root

---
 src/app/features/room/RoomTimeline.tsx           |  3 ++-
 src/app/features/room/hooks/useTimeline.ts       | 10 ++++------
 src/app/features/room/message/Message.tsx        | 16 +++++++---------
 .../features/room/thread-view/TimelineView.tsx   |  6 +-----
 4 files changed, 14 insertions(+), 21 deletions(-)

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 918c7bab..50e8ca17 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -321,7 +321,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
 
   const handleUserClick = useUserClickHandler();
   const handleUsernameClick = useUsernameClickHandler(editor);
-  const [replyDraft, handleReplyClick] = useReplyClickHandler(timeline, editor);
+  const [replyDraft, handleReplyClick] = useReplyClickHandler(editor);
 
   const handleReactionToggle = useCallback((targetEventId: string) => {
     console.log(targetEventId);
@@ -421,6 +421,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
         canDelete={canRedact || (canDeleteOwn && event.sender === ct.session.userId)}
         canSendReaction={canSendReaction}
         canPinEvent={canPinEvent}
+        canThread
         imagePackRooms={imagePackRooms}
         reactionEvents={reactionEvents && reactionEvents.length > 0 ? reactionEvents : undefined}
         onUserClick={handleUserClick}
diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
index 20b75011..26ad81ab 100644
--- a/src/app/features/room/hooks/useTimeline.ts
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -201,7 +201,6 @@ export const useAtBottomToggle = (
 };
 
 export const useReplyClickHandler = (
-  timeline: TimelineView,
   editor: Editor,
   threadId?: string
 ): [ReplyDraft | undefined, MouseEventHandler<HTMLButtonElement>] => {
@@ -213,12 +212,11 @@ export const useReplyClickHandler = (
   const handleReplyClick: MouseEventHandler<HTMLButtonElement> = useCallback(
     (evt) => {
       const replyId = evt.currentTarget.getAttribute('data-event-id');
-      if (!replyId) {
-        console.warn('Button should have "data-event-id" attribute!');
+      const senderId = evt.currentTarget.getAttribute('data-sender-id');
+      if (!replyId || !senderId) {
+        console.warn('Button should have "data-event-id" or "data-sender-id" attribute!');
         return;
       }
-      const senderId = timeline.batch.read.messages.get(replyId)?.sender;
-      if (!senderId) return;
 
       if (senderId) {
         setReplyDraft({
@@ -228,7 +226,7 @@ export const useReplyClickHandler = (
         setTimeout(() => ReactEditor.focus(editor), 100);
       }
     },
-    [setReplyDraft, editor, timeline]
+    [setReplyDraft, editor]
   );
 
   return [replyDraft, handleReplyClick];
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 8a4402a0..9a95fe23 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -52,13 +52,7 @@ import {
   Username,
   UsernameBold,
 } from '../../../components/message';
-import {
-  canEditEvent,
-  fallbackReply,
-  getReactionGroups,
-  getReplyId,
-  getThreadId,
-} from '../../../utils/room';
+import { canEditEvent, fallbackReply, getReactionGroups, getReplyId } from '../../../utils/room';
 import { MessageLayout, MessageSpacing } from '../../../state/settings';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
 import * as css from './styles.css';
@@ -835,6 +829,7 @@ export type MessageProps = {
   canDelete?: boolean;
   canSendReaction?: boolean;
   canPinEvent?: boolean;
+  canThread?: boolean;
   imagePackRooms?: string[];
   reactionEvents?: MessageEventWithoutRoomId<ReactionContent>[];
   messageLayout: MessageLayout;
@@ -868,6 +863,7 @@ export const Message = as<'div', MessageProps>(
       canDelete,
       canSendReaction,
       canPinEvent,
+      canThread,
       imagePackRooms,
       reactionEvents,
       messageLayout,
@@ -1022,13 +1018,14 @@ export const Message = as<'div', MessageProps>(
                 <IconButton
                   onClick={onReplyClick}
                   data-event-id={event.event_id}
+                  data-sender-id={event.sender}
                   variant="SurfaceVariant"
                   size="300"
                   radii="300"
                 >
                   <Icon src={Icons.BlockQuote} size="100" />
                 </IconButton>
-                {!getThreadId(event) && (
+                {canThread && (
                   <IconButton
                     onClick={onThreadClick}
                     data-event-id={event.event_id}
@@ -1103,6 +1100,7 @@ export const Message = as<'div', MessageProps>(
                             after={<Icon size="100" src={Icons.BlockQuote} />}
                             radii="300"
                             data-event-id={event.event_id}
+                            data-sender-id={event.sender}
                             onClick={(evt: any) => {
                               onReplyClick(evt);
                               closeMenu();
@@ -1117,7 +1115,7 @@ export const Message = as<'div', MessageProps>(
                               Quote
                             </Text>
                           </MenuItem>
-                          {!getThreadId(event) && (
+                          {canThread && (
                             <MenuItem
                               size="300"
                               after={<Icon src={Icons.ThreadPlus} size="100" />}
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index babf5751..d3f11f5f 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -302,11 +302,7 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
 
   const handleUserClick = useUserClickHandler();
   const handleUsernameClick = useUsernameClickHandler(editor);
-  const [replyDraft, handleReplyClick] = useReplyClickHandler(
-    threadTimeline,
-    editor,
-    threadTimeline.threadId
-  );
+  const [replyDraft, handleReplyClick] = useReplyClickHandler(editor, threadTimeline.threadId);
 
   const handleReactionToggle = useCallback((targetEventId: string) => {
     console.log(targetEventId);

From e510ba619e7da52bea44dc281ce3f569d343b331 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 15 Aug 2026 07:51:28 +0530
Subject: [PATCH 062/158] add flickering animation on splash screen initial
 text

---
 src/app/pages/client/ClientRoot.tsx |  3 ++-
 src/app/styles/Animations.css.ts    | 16 ++++++++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index 17917c34..a63a98fb 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -15,6 +15,7 @@ import { ClientContextProvider } from '../../hooks/useClient';
 import { InitialSyncSplashScreen } from './InitialSyncSplashScreen';
 import { AutoDiscovery } from './AutoDiscovery';
 import { ClientRootOptions } from './ClientRootOptions';
+import { FlickerText } from '../../styles/Animations.css';
 
 type ClientRootProps = {
   children: ReactNode;
@@ -81,7 +82,7 @@ export function ClientRoot({ children }: ClientRootProps) {
                 alignItems="Center"
                 gap="200"
               >
-                <Text size="T200" align="Center">
+                <Text className={FlickerText} size="T200" align="Center">
                   Sparking...
                 </Text>
                 <ProgressBar
diff --git a/src/app/styles/Animations.css.ts b/src/app/styles/Animations.css.ts
index c6bdc565..a0644e63 100644
--- a/src/app/styles/Animations.css.ts
+++ b/src/app/styles/Animations.css.ts
@@ -45,3 +45,19 @@ export const CallAvatarAnimation = style({
   animation: `${wobble} 2000ms ease-in-out, ${glowPulse} 2000ms ease-out`,
   animationIterationCount: 'infinite',
 });
+
+const flicker = keyframes({
+  '0%, 90%, 100%': {
+    opacity: 1,
+  },
+  '92%, 94%, 96%': {
+    opacity: 0,
+  },
+  '93%, 95%, 97%': {
+    opacity: 1,
+  },
+});
+
+export const FlickerText = style({
+  animation: `${flicker} 2s infinite`,
+});

From ce54cf4317479c42dd79a25fe1363734a96c71c3 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 15 Aug 2026 09:36:34 +0530
Subject: [PATCH 063/158] imporve thread icon and permission

---
 src/app/features/room/message/Message.tsx          | 4 ++--
 src/app/features/room/thread-view/TimelineView.tsx | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 9a95fe23..736a66f4 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -1033,7 +1033,7 @@ export const Message = as<'div', MessageProps>(
                     size="300"
                     radii="300"
                   >
-                    <Icon src={Icons.ThreadPlus} size="100" />
+                    <Icon src={Icons.Thread} size="100" />
                   </IconButton>
                 )}
                 {canEditEvent(ct, event) && onEditId && (
@@ -1118,7 +1118,7 @@ export const Message = as<'div', MessageProps>(
                           {canThread && (
                             <MenuItem
                               size="300"
-                              after={<Icon src={Icons.ThreadPlus} size="100" />}
+                              after={<Icon src={Icons.Thread} size="100" />}
                               radii="300"
                               data-event-id={event.event_id}
                               onClick={(evt: any) => {
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index d3f11f5f..e3cf4d14 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -128,6 +128,7 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
   const permissions = useRoomPermissions(creators, powerLevels);
 
   const canRedact = permissions.action('redact', ct.session.userId);
+  const canDeleteOwn = permissions.event(MessageEvent.RoomRedaction, ct.session.userId);
   const canSendReaction = permissions.event(MessageEvent.Reaction, ct.session.userId);
   const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, ct.session.userId);
   const [editId, setEditId] = useState<string>();
@@ -357,7 +358,7 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
         highlight={highlighted}
         selected={replyDraft?.eventId === event.event_id}
         edit={editId === event.event_id}
-        canDelete={canRedact || event.sender === ct.session.userId}
+        canDelete={canRedact || (canDeleteOwn && event.sender === ct.session.userId)}
         canSendReaction={canSendReaction}
         canPinEvent={canPinEvent}
         imagePackRooms={imagePackRooms}
@@ -478,7 +479,7 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
               <Text size="H1">✦</Text>
               <Text size="L400">A Thread Begins</Text>
             </Box>
-            <Text size="T200">
+            <Text size="T200" align="Center">
               <DividerTime ts={threadMeta?.rootEvent.origin_server_ts ?? Date.now()} />
             </Text>
           </Box>

From 188dce0e301c12c8a9330027565605e0c0846b6f Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 15 Aug 2026 09:41:21 +0530
Subject: [PATCH 064/158] show unread badge in nav items and improve logic

---
 src/app/pages/client/direct/Direct.tsx        |  4 ++
 src/app/pages/client/home/Home.tsx            |  3 +-
 src/app/pages/client/inbox/Notifications.tsx  |  4 +-
 src/app/pages/client/space/Space.tsx          |  4 ++
 src/app/state/hooks/unread.ts                 | 26 ++++++++----
 src/app/state/room/roomToNotifications.ts     |  1 -
 src/app/state/room/roomToUnread.ts            | 42 +++++++------------
 src/client/context.ts                         | 17 ++++++++
 src/client/initialize.ts                      |  3 ++
 src/client/storage/collections/ReadReceipt.ts | 22 ++++++++--
 src/client/storage/index.ts                   |  6 +--
 src/client/syncWriter/utils.ts                |  7 +++-
 12 files changed, 89 insertions(+), 50 deletions(-)

diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 498faa7f..c9a27cfa 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -59,6 +59,8 @@ import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
 import { useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
 import { useObservableValue } from '../../../hooks/useObservableValue';
 import { useClient } from '../../../hooks/useClient';
+import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
+import { useRoomsUnread } from '../../../state/hooks/unread';
 
 type DirectMenuProps = {
   requestClose: () => void;
@@ -187,6 +189,7 @@ export function Direct() {
   const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
   const roomToNotifications = useRoomsNotifications(directs, roomToNotificationsAtom);
+  const unreadRooms = useRoomsUnread(directs, unreadRoomsAtom);
 
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const navigate = useNavigate();
@@ -288,6 +291,7 @@ export function Direct() {
                         linkPath={getDirectRoomPath(ct.roomToAlias.read.get(roomId) ?? roomId)}
                         notificationMode={getRoomNotificationMode(notificationPreferences, roomId)}
                         notifications={notifications}
+                        unread={unreadRooms.has(roomId)}
                       />
                     </VirtualTile>
                   );
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index ca5119c9..2a849eb8 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -72,6 +72,7 @@ import {
 import { roomToNotificationsAtom } from '../../../state/room/roomToNotifications';
 import { useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
 import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
+import { useRoomsUnread } from '../../../state/hooks/unread';
 
 type HomeMenuProps = {
   requestClose: () => void;
@@ -212,7 +213,7 @@ export function Home() {
   const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
   const roomToNotifications = useRoomsNotifications(rooms, roomToNotificationsAtom);
-  const unreadRooms = useAtomValue(unreadRoomsAtom);
+  const unreadRooms = useRoomsUnread(rooms, unreadRoomsAtom);
 
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const navigate = useNavigate();
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index 9592224f..77ebe3d1 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -71,8 +71,6 @@ import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/
 import { useMatrixEventRenderer } from '../../../hooks/useMatrixEventRenderer';
 import * as customHtmlCss from '../../../styles/CustomHtml.css';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
-import { useRoomUnread } from '../../../state/hooks/unread';
-import { roomToUnreadAtom } from '../../../state/room/roomToUnread';
 import { markAsRead } from '../../../utils/notifications';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { VirtualTile } from '../../../components/virtualizer';
@@ -224,7 +222,7 @@ function RoomNotificationsGroupComp({
 }: RoomNotificationsGroupProps) {
   const mx = useMatrixClient();
   const useAuthentication = useMediaAuthentication();
-  const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
+  // const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
 
   const powerLevels = usePowerLevels(room);
   const creators = useRoomCreators(room);
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 59a9e383..e20d1246 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -91,6 +91,8 @@ import {
 } from '../../../state/hooks/roomNotifications';
 import { getJoinRoomStateId } from '../../../../client/storage/collections';
 import { useAllJoinedRoomsSet } from '../../../hooks/useGetRoom';
+import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
+import { useRoomsUnread } from '../../../state/hooks/unread';
 
 type SpaceMenuProps = {
   requestClose: () => void;
@@ -405,6 +407,7 @@ export function Space() {
   const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
   const roomToNotifications = useRoomsNotifications(rooms, roomToNotificationsAtom);
+  const unreadRooms = useRoomsUnread(rooms, unreadRoomsAtom);
 
   const virtualizer = useVirtualizer({
     count: hierarchy.length,
@@ -512,6 +515,7 @@ export function Space() {
                     linkPath={getToLink(roomId)}
                     notificationMode={getRoomNotificationMode(notificationPreferences, roomId)}
                     notifications={notifications}
+                    unread={unreadRooms.has(roomId)}
                   />
                 </VirtualTile>
               );
diff --git a/src/app/state/hooks/unread.ts b/src/app/state/hooks/unread.ts
index bcd42693..3ccef378 100644
--- a/src/app/state/hooks/unread.ts
+++ b/src/app/state/hooks/unread.ts
@@ -1,12 +1,22 @@
-import { Unread } from '../../../types/matrix/room';
-import { roomToUnreadAtom } from '../room/roomToUnread';
+import { useCallback } from 'react';
+import { useAtomValue } from 'jotai';
+import { selectAtom } from 'jotai/utils';
+import { unreadRoomsAtom } from '../room/roomToUnread';
 
 export const useRoomsUnread = (
   rooms: string[],
-  roomToUnreadAtm: typeof roomToUnreadAtom
-): Unread | undefined => undefined;
+  unreadRooms: typeof unreadRoomsAtom
+): Set<string> => {
+  const selector = useCallback(
+    (unreads: Set<string>) => new Set<string>(rooms.filter((roomId) => unreads.has(roomId))),
+    [rooms]
+  );
 
-export const useRoomUnread = (
-  roomId: string,
-  roomToUnreadAtm: typeof roomToUnreadAtom
-): Unread | undefined => undefined;
+  return useAtomValue(selectAtom(unreadRooms, selector));
+};
+
+export const useRoomUnread = (roomId: string, unreadRooms: typeof unreadRoomsAtom): boolean => {
+  const selector = useCallback((unreads: Set<string>) => unreads.has(roomId), [roomId]);
+
+  return useAtomValue(selectAtom(unreadRooms, selector));
+};
diff --git a/src/app/state/room/roomToNotifications.ts b/src/app/state/room/roomToNotifications.ts
index 8da2c82d..199a1d9a 100644
--- a/src/app/state/room/roomToNotifications.ts
+++ b/src/app/state/room/roomToNotifications.ts
@@ -35,7 +35,6 @@ export const useBindRoomToNotificationsAtom = (
   const unread = unreadState.status === AsyncStatus.Success ? unreadState.data : undefined;
 
   const processNotifications = useCallback(() => {
-    console.log('roomToNotifications');
     const notifications = unread?.notifications.read ?? [];
     const threadNotifications = unread?.threadNotifications.read ?? [];
     const { mute } = roomsNotificationPreferences;
diff --git a/src/app/state/room/roomToUnread.ts b/src/app/state/room/roomToUnread.ts
index e500caf8..6706c8ab 100644
--- a/src/app/state/room/roomToUnread.ts
+++ b/src/app/state/room/roomToUnread.ts
@@ -1,42 +1,28 @@
 import { atom, useSetAtom } from 'jotai';
-import { useEffect, useMemo } from 'react';
+import { useEffect } from 'react';
 import { ThreadId } from '../../../types/matrix/room';
-import { useObservableValue, useObservableValuePromise } from '../../hooks/useObservableValue';
+import { useObservableValue } from '../../hooks/useObservableValue';
 import { getReadReceiptId } from '../../../client/storage/collections';
 import { ClientContext } from '../../../client/context';
 
-export const roomToUnreadAtom = atom(new Map());
-
 export const unreadRoomsAtom = atom<Set<string>>(new Set<string>());
 
 export const useBindUnreadRoomsAtom = (ct: ClientContext, unreadRooms: typeof unreadRoomsAtom) => {
   const setUnreadRooms = useSetAtom(unreadRooms);
   const roomToLatestEvent = useObservableValue(ct.roomToLatestEvent);
-
-  const receiptKeys: string[] = useMemo(() => {
-    const keys: string[] = [];
-    roomToLatestEvent.forEach((_, roomId) => {
-      keys.push(getReadReceiptId(roomId, ct.session.userId, ThreadId.Main));
-    });
-
-    return keys;
-  }, [roomToLatestEvent, ct]);
-
-  const receiptsResult = useObservableValuePromise(
-    useMemo(() => ct.storage.readReceipt.observableRead.getMultiple(receiptKeys), [ct, receiptKeys])
-  );
+  const userReadReceipts = useObservableValue(ct.userReadReceipt);
 
   useEffect(() => {
-    const receipts = receiptsResult.value;
-    if (receipts) {
-      const rooms: string[] = [];
-      Array.from(roomToLatestEvent.entries()).forEach(([roomId, event], index) => {
-        const receipt = receipts[index];
-        if (!receipt || receipt.ts > event.origin_server_ts) return;
-        rooms.push(roomId);
-      });
+    const unreads = new Set<string>();
 
-      setUnreadRooms(new Set(rooms));
-    }
-  }, [setUnreadRooms, receiptsResult, roomToLatestEvent]);
+    Array.from(roomToLatestEvent.entries()).forEach(([roomId, event]) => {
+      const receipt = userReadReceipts.find(
+        (r) => getReadReceiptId(roomId, ct.session.userId, ThreadId.Main) === r.id
+      );
+      if (!receipt || receipt.ts > event.origin_server_ts) return;
+      unreads.add(roomId);
+    });
+
+    setUnreadRooms(unreads);
+  }, [ct, setUnreadRooms, userReadReceipts, roomToLatestEvent]);
 };
diff --git a/src/client/context.ts b/src/client/context.ts
index aa66f9a1..0507e1a0 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -18,6 +18,7 @@ import {
   JoinRoomStateObject,
   KnockRoomStateObject,
   LeaveRoomStateObject,
+  ReadReceiptObject,
   sessionValue,
 } from './storage/collections';
 import { Storage } from './storage';
@@ -117,6 +118,7 @@ export type ClientContext = {
   roomToCreators: ObservableValue<Map<string, Set<string>>>;
   roomToVersion: ObservableValue<Map<string, string>>;
   roomToLatestEvent: ObservableValue<Map<string, MessageEventWithoutRoomId>>;
+  userReadReceipt: ObservableValue<ReadReceiptObject[]>;
   roomToTimeline: ObservableValue<Map<string, Timeline>>;
 
   pendingMemberRooms: ObservableValue<string[]>;
@@ -836,6 +838,21 @@ export const createRoomToLatestEventObservable = async (
   return roomToLatestEventObservable;
 };
 
+export const createUserReceiptObservable = async (
+  session: Session,
+  storage: Storage,
+  disposer: Disposer
+): Promise<ObservableValue<ReadReceiptObject[]>> => {
+  const receiptObservable = await storage.readReceipt.observableRead.queryIndex(
+    'userId',
+    session.userId
+  );
+
+  disposer.collect(receiptObservable);
+
+  return receiptObservable;
+};
+
 export const createLogoutObservable = (
   syncObservable: ObservableValue<SyncValue>,
   disposer: Disposer
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index a638ddab..d857f4c6 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -25,6 +25,7 @@ import {
   createSyncTokenObservable,
   createVerificationRequestObservable,
   createBackupInfoObservable,
+  createUserReceiptObservable,
 } from './context';
 import { createStorage } from './storage';
 import { getAuthJSONRequest } from './request';
@@ -69,6 +70,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
   const roomToType = createRoomToTypeObservable(state, disposer);
   const roomToReplacement = createRoomToReplacementObservable(state, disposer);
   const roomToLatestEvent = await createRoomToLatestEventObservable(storage, disposer);
+  const userReadReceipt = await createUserReceiptObservable(session, storage, disposer);
 
   const syncTokenObservable = await createSyncTokenObservable(storage, disposer);
   const pendingMemberRooms = await createPendingMemberRoomObservable(storage, disposer);
@@ -129,6 +131,7 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     roomToType,
     roomToReplacement,
     roomToLatestEvent,
+    userReadReceipt,
     roomToCreators,
     roomToVersion,
     roomToTimeline,
diff --git a/src/client/storage/collections/ReadReceipt.ts b/src/client/storage/collections/ReadReceipt.ts
index 0ce4a87b..aa797751 100644
--- a/src/client/storage/collections/ReadReceipt.ts
+++ b/src/client/storage/collections/ReadReceipt.ts
@@ -1,4 +1,4 @@
-import { IDBPDatabase } from 'idb';
+import { IDBPDatabase, IDBPTransaction } from 'idb';
 import { StorageDriver } from 'neurone/lib/storage';
 import { Collection, Entry } from 'neurone/lib/storage/collection';
 import { ReceiptType } from 'neurone/lib/api/types';
@@ -13,7 +13,11 @@ export const getReadReceiptId = (
   threadId: string | ThreadId
 ): string => encodeKey(roomId, userId, threadId);
 
-export const prepareReadReceiptStore = (idb: IDBPDatabase, oldVersion: number) => {
+export const prepareReadReceiptStore = (
+  idb: IDBPDatabase,
+  oldVersion: number,
+  transaction: IDBPTransaction<any, any, 'versionchange'>
+) => {
   if (oldVersion < 1) {
     const store = idb.createObjectStore(READ_RECEIPT_STORE_NAME, {
       keyPath: 'id',
@@ -22,11 +26,17 @@ export const prepareReadReceiptStore = (idb: IDBPDatabase, oldVersion: number) =
     store.createIndex('roomId', 'roomId', { unique: false });
     store.createIndex('eventId', 'eventId', { unique: false });
   }
+
+  if (oldVersion < 2) {
+    const store = transaction.objectStore(READ_RECEIPT_STORE_NAME);
+
+    store.createIndex('userId', 'userId', { unique: false });
+  }
 };
 
 export type ReadReceiptObject = Entry<
   'id',
-  'eventId' | 'roomId',
+  'userId' | 'eventId' | 'roomId',
   {
     id: string;
     roomId: string;
@@ -38,7 +48,11 @@ export type ReadReceiptObject = Entry<
   }
 >;
 
-export type ReadReceiptCollection = Collection<'id', 'eventId' | 'roomId', ReadReceiptObject>;
+export type ReadReceiptCollection = Collection<
+  'id',
+  'eventId' | 'roomId' | 'userId',
+  ReadReceiptObject
+>;
 
 export const createReadReceiptCollection = (driver: StorageDriver): ReadReceiptCollection =>
   new Collection(READ_RECEIPT_STORE_NAME, 'id', driver);
diff --git a/src/client/storage/index.ts b/src/client/storage/index.ts
index 7de45222..e79d3e63 100644
--- a/src/client/storage/index.ts
+++ b/src/client/storage/index.ts
@@ -50,7 +50,7 @@ import {
 
 export * from './utils';
 
-const DATABASE_VERSION = 1;
+const DATABASE_VERSION = 2;
 
 export interface Storage {
   sessionValue: SessionValueCollection;
@@ -95,7 +95,7 @@ export const createStorage = async (
 
   // TODO: handle all openDB callbacks.
   const idb = await openDB(dbName, DATABASE_VERSION, {
-    upgrade(db, oldVersion) {
+    upgrade(db, oldVersion, newVersion, transaction) {
       prepareSessionValueStore(db, oldVersion);
 
       prepareAccountDataStore(db, oldVersion);
@@ -109,7 +109,7 @@ export const createStorage = async (
       prepareUnreadNotificationsStore(db, oldVersion);
       prepareUnreadThreadNotificationsStore(db, oldVersion);
 
-      prepareReadReceiptStore(db, oldVersion);
+      prepareReadReceiptStore(db, oldVersion, transaction);
 
       prepareInviteRoomStateStore(db, oldVersion);
 
diff --git a/src/client/syncWriter/utils.ts b/src/client/syncWriter/utils.ts
index 767f2b18..37014a9f 100644
--- a/src/client/syncWriter/utils.ts
+++ b/src/client/syncWriter/utils.ts
@@ -39,6 +39,7 @@ import {
   UnreadThreadNotificationsObject,
 } from '../storage/collections';
 import { ThreadId } from '../../types/matrix/room';
+import { getLatestEventSyncFilter } from '../filter';
 
 export const writeAccountData = async (
   ct: ClientContext,
@@ -167,15 +168,17 @@ export const writeJoinRoomLatestEvent = async (
 ): Promise<void> => {
   const roomLatestEventObjects: JoinRoomLatestEventObject[] = [];
 
+  const latestEventFilter = getLatestEventSyncFilter();
+  const supportedTypes = latestEventFilter.room?.timeline?.types ?? [];
+
   joinRooms.forEach((roomId) => {
     const joinRoom = join[roomId];
     const { events } = joinRoom.timeline ?? {};
     if (!events) return;
 
-    // TODO: filter events that are supported by timeline.
     for (let i = events.length - 1; i >= 0; i -= 1) {
       const event = events[i];
-      if (!('state_key' in event)) {
+      if (!('state_key' in event) && supportedTypes.includes(event.type)) {
         roomLatestEventObjects.push({
           id: roomId,
           event,

From a94acadbd8895a9fa03f4eac99dfbba7b1ee7f19 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 15 Aug 2026 21:06:03 +0530
Subject: [PATCH 065/158] show unread badge on sidebar

---
 src/app/pages/client/sidebar/DirectTab.tsx |  7 ++++++-
 src/app/pages/client/sidebar/HomeTab.tsx   |  7 ++++++-
 src/app/pages/client/sidebar/SpaceTabs.tsx | 10 ++++++++--
 src/app/state/hooks/unread.ts              | 12 +++++++++---
 4 files changed, 29 insertions(+), 7 deletions(-)

diff --git a/src/app/pages/client/sidebar/DirectTab.tsx b/src/app/pages/client/sidebar/DirectTab.tsx
index c39a77f1..b5249917 100644
--- a/src/app/pages/client/sidebar/DirectTab.tsx
+++ b/src/app/pages/client/sidebar/DirectTab.tsx
@@ -28,6 +28,8 @@ import {
   RoomToNotifications,
   roomToNotificationsAtom,
 } from '../../../state/room/roomToNotifications';
+import { useRoomsUnread } from '../../../state/hooks/unread';
+import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
 
 type DirectMenuProps = {
   directRooms: string[];
@@ -77,6 +79,9 @@ export function DirectTab() {
   const directRooms = useDirectRooms();
   const roomsNotifications = useRoomsNotifications(directRooms, roomToNotificationsAtom);
   const notifications = useRoomsTotalNotifications(roomsNotifications);
+  const unreadRooms = useRoomsUnread(directRooms, unreadRoomsAtom);
+  const unreadOrNotification = (notifications && notifications.count > 0) || unreadRooms.size > 0;
+
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
   const directSelected = useDirectSelected();
@@ -114,7 +119,7 @@ export function DirectTab() {
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
-      {notifications.count > 0 && (
+      {unreadOrNotification && (
         <SidebarItemBadge hasCount={notifications.count > 0}>
           <UnreadBadge highlight={notifications.highlight} count={notifications.count} />
         </SidebarItemBadge>
diff --git a/src/app/pages/client/sidebar/HomeTab.tsx b/src/app/pages/client/sidebar/HomeTab.tsx
index 5b7b1a46..2ba53ceb 100644
--- a/src/app/pages/client/sidebar/HomeTab.tsx
+++ b/src/app/pages/client/sidebar/HomeTab.tsx
@@ -28,6 +28,8 @@ import {
   RoomToNotifications,
   roomToNotificationsAtom,
 } from '../../../state/room/roomToNotifications';
+import { useRoomsUnread } from '../../../state/hooks/unread';
+import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
 
 type HomeMenuProps = {
   homeRooms: string[];
@@ -77,6 +79,9 @@ export function HomeTab() {
   const homeRooms = useHomeRooms();
   const roomsNotifications = useRoomsNotifications(homeRooms, roomToNotificationsAtom);
   const notifications = useRoomsTotalNotifications(roomsNotifications);
+  const unreadRooms = useRoomsUnread(homeRooms, unreadRoomsAtom);
+  const unreadOrNotification = (notifications && notifications.count > 0) || unreadRooms.size > 0;
+
   const homeSelected = useHomeSelected();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
@@ -114,7 +119,7 @@ export function HomeTab() {
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
-      {notifications.count > 0 && (
+      {unreadOrNotification && (
         <SidebarItemBadge hasCount={notifications.count > 0}>
           <UnreadBadge highlight={notifications.highlight} count={notifications.count} />
         </SidebarItemBadge>
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index 18736eb5..f7d343d0 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -103,6 +103,8 @@ import { roomToNotificationsAtom } from '../../../state/room/roomToNotifications
 import { mxcToHttp } from '../../../../client/mxcToHttp';
 import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
 import { GetRoomAvatarCallback, useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
+import { useRoomsUnread } from '../../../state/hooks/unread';
+import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
 
 type SpaceMenuProps = {
   spaceId: string;
@@ -419,6 +421,8 @@ function SpaceTab({
   );
   const roomsNotifications = useRoomsNotifications(childRooms, roomToNotificationsAtom);
   const notifications = useRoomsTotalNotifications(roomsNotifications);
+  const unreadRooms = useRoomsUnread(childRooms, unreadRoomsAtom);
+  const unreadOrNotification = (notifications && notifications.count > 0) || unreadRooms.size > 0;
 
   const spaceName = getName(spaceId) ?? spaceId;
   const avatarMxc = getAvatar(spaceId);
@@ -487,7 +491,7 @@ function SpaceTab({
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
-      {notifications.count > 0 && (
+      {unreadOrNotification && (
         <SidebarItemBadge hasCount={notifications.count > 0}>
           <UnreadBadge highlight={notifications.highlight} count={notifications.count} />
         </SidebarItemBadge>
@@ -584,6 +588,8 @@ function ClosedSpaceFolder({
   );
   const roomsNotifications = useRoomsNotifications(childRooms, roomToNotificationsAtom);
   const notifications = useRoomsTotalNotifications(roomsNotifications);
+  const unreadRooms = useRoomsUnread(childRooms, unreadRoomsAtom);
+  const unreadOrNotification = (notifications && notifications.count > 0) || unreadRooms.size > 0;
 
   const handlerRef = useRef<HTMLDivElement>(null);
 
@@ -634,7 +640,7 @@ function ClosedSpaceFolder({
           </SidebarFolder>
         )}
       </SidebarItemTooltip>
-      {notifications.count > 0 && (
+      {unreadOrNotification && (
         <SidebarItemBadge hasCount={notifications.count > 0}>
           <UnreadBadge highlight={notifications.highlight} count={notifications.count} />
         </SidebarItemBadge>
diff --git a/src/app/state/hooks/unread.ts b/src/app/state/hooks/unread.ts
index 3ccef378..d493022c 100644
--- a/src/app/state/hooks/unread.ts
+++ b/src/app/state/hooks/unread.ts
@@ -2,21 +2,27 @@ import { useCallback } from 'react';
 import { useAtomValue } from 'jotai';
 import { selectAtom } from 'jotai/utils';
 import { unreadRoomsAtom } from '../room/roomToUnread';
+import { useClient } from '../../hooks/useClient';
 
 export const useRoomsUnread = (
   rooms: string[],
   unreadRooms: typeof unreadRoomsAtom
 ): Set<string> => {
+  const ct = useClient();
+
   const selector = useCallback(
-    (unreads: Set<string>) => new Set<string>(rooms.filter((roomId) => unreads.has(roomId))),
-    [rooms]
+    (unread: Set<string>) =>
+      new Set<string>(
+        rooms.filter((roomId) => unread.has(roomId) && !ct.spaceRooms.read.has(roomId))
+      ),
+    [rooms, ct]
   );
 
   return useAtomValue(selectAtom(unreadRooms, selector));
 };
 
 export const useRoomUnread = (roomId: string, unreadRooms: typeof unreadRoomsAtom): boolean => {
-  const selector = useCallback((unreads: Set<string>) => unreads.has(roomId), [roomId]);
+  const selector = useCallback((unread: Set<string>) => unread.has(roomId), [roomId]);
 
   return useAtomValue(selectAtom(unreadRooms, selector));
 };

From f8bcb5f9dbf4627fa61e02097d2f80d1209c33c0 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 15 Aug 2026 21:14:37 +0530
Subject: [PATCH 066/158] render new message divider in timeline

---
 src/app/features/room/RoomTimeline.tsx        |  7 ++++--
 .../room/components/TimelineDivider.tsx       | 14 +++++++----
 src/app/features/room/hooks/useTimeline.ts    |  8 +++----
 .../room/thread-view/TimelineView.tsx         | 14 ++++++++++-
 src/app/hooks/useReadReceipt.ts               | 23 +++++++++++++++++++
 src/app/state/room/roomToUnread.ts            |  4 +++-
 6 files changed, 58 insertions(+), 12 deletions(-)
 create mode 100644 src/app/hooks/useReadReceipt.ts

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 50e8ca17..09acf673 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -78,6 +78,7 @@ import { ThreadSelector } from './message/thread-selector';
 import { TimelineFloat, JumpToLatestButton, ComboDivider, PlaceholderList } from './components';
 import { OutboxView } from './OutboxView';
 import { EncryptedMessageEvent } from '../../components/encrypted-event';
+import { useUserReadReceipt } from '../../hooks/useReadReceipt';
 
 type RoomTimelineProps = {
   eventId?: string;
@@ -496,8 +497,10 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     );
   };
 
+  const readReceipt = useUserReadReceipt();
+  console.log(readReceipt, ct.roomToLatestEvent.read.get(roomId));
   const { getDayDivider, getNewDivider, updateDivider, clearDayDivider, clearNewDivider } =
-    useEventDivider(readUptoEventIdRef.current);
+    useEventDivider(readReceipt?.ts);
   const { getCollapsed, updateCollapse } = useEventCollapse();
 
   const eventRenderer = (item: number) => {
@@ -512,7 +515,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
       return null;
     }
 
-    const newDivider = getNewDivider() && event.sender !== ct.session.userId;
+    const newDivider = getNewDivider(event) && event.sender !== ct.session.userId;
     const dayDivider = getDayDivider(event);
 
     const collapsed = getCollapsed(event, newDivider, dayDivider);
diff --git a/src/app/features/room/components/TimelineDivider.tsx b/src/app/features/room/components/TimelineDivider.tsx
index 8fc2b0ec..2ff1008e 100644
--- a/src/app/features/room/components/TimelineDivider.tsx
+++ b/src/app/features/room/components/TimelineDivider.tsx
@@ -11,7 +11,7 @@ export const TimelineDivider = as<
 >(({ className, variant, before, after, children, ...props }, ref) => (
   <Box
     className={classNames(css.TimelineDivider, className)}
-    gap="100"
+    gap="0"
     justifyContent="Center"
     alignItems="Center"
     {...props}
@@ -34,7 +34,7 @@ export function ComboDivider({ messageSpacing, ts, replyCount, unread }: ComboDi
   return (
     <MessageBase space={messageSpacing}>
       <TimelineDivider
-        variant={unread ? 'Success' : 'Surface'}
+        variant={unread ? 'Critical' : 'Surface'}
         before={
           replyCount &&
           replyCount > 0 && (
@@ -54,14 +54,20 @@ export function ComboDivider({ messageSpacing, ts, replyCount, unread }: ComboDi
         }
         after={
           unread && (
-            <Badge as="span" size="500" variant="Success" fill="Solid" radii="Pill">
+            <Badge as="span" size="500" variant="Critical" fill="Solid" radii="Pill">
               <Text size="L400">New</Text>
             </Badge>
           )
         }
       >
         {typeof ts === 'number' && (
-          <Badge as="span" size="500" variant="Secondary" fill="None" radii="300">
+          <Badge
+            as="span"
+            size="500"
+            variant={unread ? 'Critical' : 'Secondary'}
+            fill="None"
+            radii="300"
+          >
             <Text size="L400">
               <DividerTime ts={ts} />
             </Text>
diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
index 26ad81ab..0da0a2c0 100644
--- a/src/app/features/room/hooks/useTimeline.ts
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -284,7 +284,7 @@ export const useUsernameClickHandler = (editor: Editor) => {
   return handleUsernameClick;
 };
 
-export const useEventDivider = (readUptoEventId?: string) => {
+export const useEventDivider = (readUptoTs?: number) => {
   let prevEvent: MessageEventWithoutRoomId | undefined;
 
   let dayDivider = false;
@@ -300,9 +300,9 @@ export const useEventDivider = (readUptoEventId?: string) => {
     return dayDivider;
   };
 
-  const getNewDivider = () => {
-    if (!newDivider && readUptoEventId) {
-      newDivider = prevEvent?.event_id === readUptoEventId;
+  const getNewDivider = (event: MessageEventWithoutRoomId) => {
+    if (!newDivider && readUptoTs && prevEvent) {
+      newDivider = prevEvent.origin_server_ts < readUptoTs && readUptoTs <= event.origin_server_ts;
     }
 
     return newDivider;
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index e3cf4d14..90e35fa3 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -74,6 +74,7 @@ import { rContent } from '../../../../client/reader';
 import { useEditor } from '../../../components/editor';
 import { TimelineFloat, JumpToLatestButton, ComboDivider, PlaceholderList } from '../components';
 import { OutboxView } from '../OutboxView';
+import { useUserReadReceipt } from '../../../hooks/useReadReceipt';
 
 type TimelineViewProps = {
   threadTimeline: ThreadTimeline;
@@ -394,7 +395,15 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
     );
   };
 
-  const { getDayDivider, getThreadRootDivider, updateDivider, clearDayDivider } = useEventDivider();
+  const readReceipt = useUserReadReceipt(threadTimeline.threadId);
+  const {
+    getDayDivider,
+    getThreadRootDivider,
+    getNewDivider,
+    updateDivider,
+    clearDayDivider,
+    clearNewDivider,
+  } = useEventDivider(readReceipt?.ts);
   const { getCollapsed, updateCollapse } = useEventCollapse();
   const eventRenderer = (event: MessageEventWithoutRoomId, item: number) => {
     if (event.sender && ignoredUsersSet.has(event.sender)) {
@@ -405,6 +414,7 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
       return null;
     }
 
+    const newDivider = getNewDivider(event) && event.sender !== ct.session.userId;
     const dayDivider = getDayDivider(event);
     const replyCount =
       threadMeta && getThreadRootDivider(threadMeta.rootEvent) ? threadMeta.replyCount : undefined;
@@ -424,6 +434,8 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
           replyCount={replyCount}
         />
       ) : null;
+
+    if (newDivider && dividerJSX) clearNewDivider();
     if (dayDivider && dividerJSX) clearDayDivider();
 
     const replyEventId = fallbackReply(event.content) ? undefined : getReplyId(event.content);
diff --git a/src/app/hooks/useReadReceipt.ts b/src/app/hooks/useReadReceipt.ts
new file mode 100644
index 00000000..48e15a04
--- /dev/null
+++ b/src/app/hooks/useReadReceipt.ts
@@ -0,0 +1,23 @@
+import { useCallback, useSyncExternalStore } from 'react';
+import { useClient } from './useClient';
+import { useRoom } from './useRoom';
+import { getReadReceiptId } from '../../client/storage/collections';
+import { ThreadId } from '../../types/matrix/room';
+
+export const useUserReadReceipt = (threadId?: string) => {
+  const ct = useClient();
+  const roomId = useRoom();
+
+  const receipt = useSyncExternalStore(
+    useCallback((c) => ct.userReadReceipt.subscribe(c), [ct]),
+    useCallback(
+      () =>
+        ct.userReadReceipt.read.find(
+          (r) => getReadReceiptId(roomId, ct.session.userId, threadId ?? ThreadId.Main) === r.id
+        ),
+      [ct, roomId, threadId]
+    )
+  );
+
+  return receipt;
+};
diff --git a/src/app/state/room/roomToUnread.ts b/src/app/state/room/roomToUnread.ts
index 6706c8ab..c8c5c155 100644
--- a/src/app/state/room/roomToUnread.ts
+++ b/src/app/state/room/roomToUnread.ts
@@ -19,7 +19,9 @@ export const useBindUnreadRoomsAtom = (ct: ClientContext, unreadRooms: typeof un
       const receipt = userReadReceipts.find(
         (r) => getReadReceiptId(roomId, ct.session.userId, ThreadId.Main) === r.id
       );
-      if (!receipt || receipt.ts > event.origin_server_ts) return;
+      if (!receipt || receipt.ts > event.origin_server_ts || event.sender === ct.session.userId) {
+        return;
+      }
       unreads.add(roomId);
     });
 

From de91c6ed76d0a7e2f517704bd7f90c683ca7e137 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 15 Aug 2026 21:26:01 +0530
Subject: [PATCH 067/158] fix thread timeline reload on fist message

---
 src/client/room/ThreadTimeline.ts       | 1 +
 src/client/room/TimelineBatchManager.ts | 4 +++-
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/client/room/ThreadTimeline.ts b/src/client/room/ThreadTimeline.ts
index 3b9c25a5..582247be 100644
--- a/src/client/room/ThreadTimeline.ts
+++ b/src/client/room/ThreadTimeline.ts
@@ -140,6 +140,7 @@ export class ThreadTimeline implements TimelineView, Disposable {
     if (!meta || !latestEvent) return;
 
     // TODO: need session userId to find current user participation;
+    // we do not use that flag yet.
     const newMeta = new ThreadMeta(
       meta.rootEvent,
       latestEvent,
diff --git a/src/client/room/TimelineBatchManager.ts b/src/client/room/TimelineBatchManager.ts
index 413ec57f..61203c00 100644
--- a/src/client/room/TimelineBatchManager.ts
+++ b/src/client/room/TimelineBatchManager.ts
@@ -41,7 +41,9 @@ export class TimelineBatchManager {
     }
 
     const newPrev =
-      !prev.token && messages.events.length === 0 ? new BatchInfo(prevToken, !prevToken) : prev;
+      !prev.end && !prev.token && messages.events.length === 0
+        ? new BatchInfo(prevToken, !prevToken)
+        : prev;
 
     const newBatch = new MessageBatch(
       id,

From 0647cf1ccb1a6aa1c4fdcd3d93b27b86ab9cf8d8 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 15 Aug 2026 21:34:21 +0530
Subject: [PATCH 068/158] fix event collapse around thread replies

---
 src/app/features/room/hooks/useTimeline.ts         | 5 +++--
 src/app/features/room/thread-view/TimelineView.tsx | 4 ++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
index 0da0a2c0..a9a63d1d 100644
--- a/src/app/features/room/hooks/useTimeline.ts
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -35,7 +35,7 @@ import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
 import { useClient } from '../../../hooks/useClient';
 import { createMentionElement, moveCursor } from '../../../components/editor';
 import { inSameDay, minuteDifference } from '../../../utils/time';
-import { fallbackReply, getReplyId } from '../../../utils/room';
+import { fallbackReply, getReplyId, getThreadId } from '../../../utils/room';
 
 const TimelineViewContext = createContext<TimelineView | null>(null);
 export const TimelineViewProvider = TimelineViewContext.Provider;
@@ -333,7 +333,7 @@ export const useEventDivider = (readUptoTs?: number) => {
   };
 };
 
-export const useEventCollapse = () => {
+export const useEventCollapse = (threadId?: string) => {
   const ct = useClient();
   let prevEvent: MessageEventWithoutRoomId | undefined;
   let isPrevRendered = false;
@@ -352,6 +352,7 @@ export const useEventCollapse = () => {
       prevEvent !== undefined &&
       prevEvent.sender === event.sender &&
       prevEvent.type === event.type &&
+      (threadId ? prevEvent.event_id !== threadId : !getThreadId(prevEvent)) &&
       minuteDifference(prevEvent.origin_server_ts, event.origin_server_ts) < 2 &&
       !replyEventId;
 
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index 90e35fa3..01275943 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -404,7 +404,7 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
     clearDayDivider,
     clearNewDivider,
   } = useEventDivider(readReceipt?.ts);
-  const { getCollapsed, updateCollapse } = useEventCollapse();
+  const { getCollapsed, updateCollapse } = useEventCollapse(threadTimeline.threadId);
   const eventRenderer = (event: MessageEventWithoutRoomId, item: number) => {
     if (event.sender && ignoredUsersSet.has(event.sender)) {
       return null;
@@ -418,7 +418,7 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
     const dayDivider = getDayDivider(event);
     const replyCount =
       threadMeta && getThreadRootDivider(threadMeta.rootEvent) ? threadMeta.replyCount : undefined;
-    const collapsed = getCollapsed(event, false, dayDivider);
+    const collapsed = getCollapsed(event, newDivider, dayDivider);
 
     const eventJSX = renderMatrixEvent(event, item, collapsed);
     updateCollapse(event, !!eventJSX);

From bad6cdcd8a8c18fe017c9b35e04f62d38dc59c87 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 16 Aug 2026 11:33:04 +0530
Subject: [PATCH 069/158] auto focus thread input on type

---
 src/app/features/room/Room.tsx                |  11 +-
 src/app/features/room/RoomTimeline.tsx        |   1 -
 src/app/features/room/RoomView.tsx            |  60 ++---------
 .../features/room/hooks/useEditorAutoFocus.ts | 100 ++++++++++++++++++
 .../features/room/thread-view/ThreadView.tsx  |   9 +-
 5 files changed, 124 insertions(+), 57 deletions(-)
 create mode 100644 src/app/features/room/hooks/useEditorAutoFocus.ts

diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index fa66e8c8..6c5b046c 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback } from 'react';
+import React, { useCallback, useRef } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
@@ -37,6 +37,7 @@ export function Room() {
   const activeThreadId = useObservableValueOptionally(timeline?.activeThread);
   const threads = useObservableValueOptionally(timeline?.threads);
   const threadTimeline = activeThreadId ? threads?.get(activeThreadId) : undefined;
+  const threadFocusRef = useRef<boolean>(false);
 
   const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
@@ -71,7 +72,12 @@ export function Room() {
                 <Box grow="Yes" direction="Column">
                   <RoomViewHeader />
                   <Box grow="Yes">
-                    <RoomView key={roomId} timeline={timeline} eventId={eventId} />
+                    <RoomView
+                      key={roomId}
+                      threadFocusRef={threadFocusRef}
+                      timeline={timeline}
+                      eventId={eventId}
+                    />
                   </Box>
                 </Box>
               </TimelineViewProvider>
@@ -81,6 +87,7 @@ export function Room() {
                   <Line variant="Surface" direction="Vertical" size="300" />
                   <ThreadView
                     threadTimeline={threadTimeline}
+                    threadFocusRef={threadFocusRef}
                     requestClose={() => timeline.closeThread()}
                   />
                 </TimelineViewProvider>
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 09acf673..237c9021 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -498,7 +498,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   };
 
   const readReceipt = useUserReadReceipt();
-  console.log(readReceipt, ct.roomToLatestEvent.read.get(roomId));
   const { getDayDivider, getNewDivider, updateDivider, clearDayDivider, clearNewDivider } =
     useEventDivider(readReceipt?.ts);
   const { getCollapsed, updateCollapse } = useEventCollapse();
diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index 74e58816..b688b6c3 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -1,7 +1,5 @@
-import React, { useCallback, useRef } from 'react';
+import React, { MutableRefObject, useRef } from 'react';
 import { Box, Text, config } from 'folds';
-import { ReactEditor } from 'slate-react';
-import { isKeyHotkey } from 'is-hotkey';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { useEditor } from '../../components/editor';
 import { RoomInputPlaceholder } from './RoomInputPlaceholder';
@@ -10,8 +8,6 @@ import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
 import { Page } from '../../components/page';
-import { useKeyDown } from '../../hooks/useKeyDown';
-import { editableActiveElement } from '../../utils/dom';
 import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
@@ -21,39 +17,14 @@ import { useObservableValue } from '../../hooks/useObservableValue';
 import { useClient } from '../../hooks/useClient';
 import { MessageEvent } from '../../../types/matrix/room';
 import { Timeline } from '../../../client/room';
+import { useEditorAutoFocus } from './hooks/useEditorAutoFocus';
 
-const FN_KEYS_REGEX = /^F\d+$/;
-const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
-  const { code } = evt;
-  if (evt.metaKey || evt.altKey || evt.ctrlKey) {
-    return false;
-  }
-
-  if (FN_KEYS_REGEX.test(code)) return false;
-
-  if (
-    code.startsWith('OS') ||
-    code.startsWith('Meta') ||
-    code.startsWith('Shift') ||
-    code.startsWith('Alt') ||
-    code.startsWith('Control') ||
-    code.startsWith('Arrow') ||
-    code.startsWith('Page') ||
-    code.startsWith('End') ||
-    code.startsWith('Home') ||
-    code === 'Tab' ||
-    code === 'Space' ||
-    code === 'Enter' ||
-    code === 'NumLock' ||
-    code === 'ScrollLock'
-  ) {
-    return false;
-  }
-
-  return true;
+type RoomViewProps = {
+  eventId?: string;
+  threadFocusRef: MutableRefObject<boolean>;
+  timeline: Timeline;
 };
-
-export function RoomView({ eventId, timeline }: { eventId?: string; timeline: Timeline }) {
+export function RoomView({ eventId, timeline, threadFocusRef }: RoomViewProps) {
   const roomInputRef = useRef<HTMLDivElement>(null);
   const roomViewRef = useRef<HTMLDivElement>(null);
 
@@ -72,22 +43,7 @@ export function RoomView({ eventId, timeline }: { eventId?: string; timeline: Ti
   const permissions = useRoomPermissions(creators, powerLevels);
   const canMessage = permissions.event(MessageEvent.RoomMessage, ct.session.userId);
 
-  useKeyDown(
-    window,
-    useCallback(
-      (evt) => {
-        if (editableActiveElement()) return;
-        const portalContainer = document.getElementById('portalContainer');
-        if (portalContainer && portalContainer.children.length > 0) {
-          return;
-        }
-        if (shouldFocusMessageField(evt) || isKeyHotkey('mod+v', evt)) {
-          ReactEditor.focus(editor);
-        }
-      },
-      [editor]
-    )
-  );
+  useEditorAutoFocus(editor, threadFocusRef, false);
 
   return (
     <Page ref={roomViewRef}>
diff --git a/src/app/features/room/hooks/useEditorAutoFocus.ts b/src/app/features/room/hooks/useEditorAutoFocus.ts
new file mode 100644
index 00000000..312f0d32
--- /dev/null
+++ b/src/app/features/room/hooks/useEditorAutoFocus.ts
@@ -0,0 +1,100 @@
+import { MutableRefObject, RefObject, useCallback, useEffect } from 'react';
+import { isKeyHotkey } from 'is-hotkey';
+import { ReactEditor } from 'slate-react';
+import { Editor } from 'slate';
+import { useKeyDown } from '../../../hooks/useKeyDown';
+import { editableActiveElement } from '../../../utils/dom';
+
+const FN_KEYS_REGEX = /^F\d+$/;
+
+const shouldFocusMessageField = (evt: KeyboardEvent): boolean => {
+  const { code } = evt;
+
+  if (evt.metaKey || evt.altKey || evt.ctrlKey) {
+    return false;
+  }
+
+  if (FN_KEYS_REGEX.test(code)) return false;
+
+  if (
+    code.startsWith('OS') ||
+    code.startsWith('Meta') ||
+    code.startsWith('Shift') ||
+    code.startsWith('Alt') ||
+    code.startsWith('Control') ||
+    code.startsWith('Arrow') ||
+    code.startsWith('Page') ||
+    code.startsWith('End') ||
+    code.startsWith('Home') ||
+    code === 'Tab' ||
+    code === 'Space' ||
+    code === 'Enter' ||
+    code === 'NumLock' ||
+    code === 'ScrollLock'
+  ) {
+    return false;
+  }
+
+  return true;
+};
+
+export const useEditorAutoFocus = (
+  editor: Editor,
+  threadFocusRef: RefObject<boolean>,
+  thread: boolean
+) => {
+  useKeyDown(
+    window,
+    useCallback(
+      (evt) => {
+        if (editableActiveElement()) return;
+
+        const portalContainer = document.getElementById('portalContainer');
+        if (portalContainer && portalContainer.children.length > 0) {
+          return;
+        }
+
+        if (!shouldFocusMessageField(evt) && !isKeyHotkey('mod+v', evt)) {
+          return;
+        }
+
+        if (threadFocusRef.current && !thread) {
+          return;
+        }
+
+        ReactEditor.focus(editor);
+      },
+      [editor, threadFocusRef, thread]
+    )
+  );
+};
+
+export const useThreadFocus = (
+  threadFocusRef: MutableRefObject<boolean>,
+  viewElementRef: RefObject<HTMLElement>
+) => {
+  useEffect(() => {
+    const handlePointerDown = (evt: PointerEvent) => {
+      const viewElement = viewElementRef.current;
+      if (!viewElement) return;
+
+      const lastTarget = evt.target;
+
+      const clickedInsideView = lastTarget instanceof Node && viewElement.contains(lastTarget);
+      // eslint-disable-next-line no-param-reassign
+      threadFocusRef.current = clickedInsideView;
+    };
+
+    // eslint-disable-next-line no-param-reassign
+    threadFocusRef.current = true;
+    window.addEventListener('pointerdown', handlePointerDown);
+
+    return () => {
+      // eslint-disable-next-line no-param-reassign
+      threadFocusRef.current = true;
+      window.removeEventListener('pointerdown', handlePointerDown);
+    };
+  }, [threadFocusRef, viewElementRef]);
+
+  return threadFocusRef;
+};
diff --git a/src/app/features/room/thread-view/ThreadView.tsx b/src/app/features/room/thread-view/ThreadView.tsx
index 3f896ea7..dc4969ef 100644
--- a/src/app/features/room/thread-view/ThreadView.tsx
+++ b/src/app/features/room/thread-view/ThreadView.tsx
@@ -1,4 +1,4 @@
-import React, { useRef } from 'react';
+import React, { MutableRefObject, useRef } from 'react';
 import classNames from 'classnames';
 import { Box, config, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } from 'folds';
 import FocusTrap from 'focus-trap-react';
@@ -10,19 +10,24 @@ import { useEditor } from '../../../components/editor';
 import { RoomInput } from '../RoomInput';
 import { RoomViewFollowingPlaceholder } from '../RoomViewFollowing';
 import { TimelineView } from './TimelineView';
+import { useEditorAutoFocus, useThreadFocus } from '../hooks/useEditorAutoFocus';
 
 type ThreadViewProps = {
   threadTimeline: ThreadTimeline;
+  threadFocusRef: MutableRefObject<boolean>;
   requestClose: () => void;
 };
 
-export function ThreadView({ threadTimeline, requestClose }: ThreadViewProps) {
+export function ThreadView({ threadTimeline, threadFocusRef, requestClose }: ThreadViewProps) {
   const screenSize = useScreenSizeContext();
   const floating = screenSize !== ScreenSize.Desktop;
   const editor = useEditor();
   const threadInputRef = useRef<HTMLDivElement>(null);
   const threadViewRef = useRef<HTMLDivElement>(null);
 
+  useThreadFocus(threadFocusRef, threadViewRef);
+  useEditorAutoFocus(editor, threadFocusRef, true);
+
   return (
     <FocusTrap
       paused={!floating}

From e95305c1a0c7816b43e5fb6b1915cde48ff97e19 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 16 Aug 2026 12:15:49 +0530
Subject: [PATCH 070/158] show draft message in thread selector

---
 src/app/features/room/RoomTimeline.tsx        |  2 +
 .../thread-selector/ThreadSelector.tsx        | 37 +++++++++++++------
 2 files changed, 28 insertions(+), 11 deletions(-)

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 237c9021..315638af 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -204,6 +204,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     ]
   );
 
+  const activeThread = useObservableValue(timeline.activeThread);
   const threads = useObservableValue(timeline.threads);
   const redacted = useObservableValue(timeline.relations.redacted);
   const reactions = useObservableValue(timeline.relations.reactions.eventToRelations);
@@ -484,6 +485,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
         {reactionJSX}
         {threadTimeline && (
           <ThreadSelector
+            active={threadTimeline.threadId === activeThread}
             thread={threadTimeline}
             hour24Clock={hour24Clock}
             dateFormatString={dateFormatString}
diff --git a/src/app/features/room/message/thread-selector/ThreadSelector.tsx b/src/app/features/room/message/thread-selector/ThreadSelector.tsx
index 1652b1de..c78c399c 100644
--- a/src/app/features/room/message/thread-selector/ThreadSelector.tsx
+++ b/src/app/features/room/message/thread-selector/ThreadSelector.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
-import { Box, config, Icon, Icons, Line, Text } from 'folds';
+import { Box, color, config, Icon, Icons, Line, Text } from 'folds';
 import classNames from 'classnames';
+import { useAtomValue } from 'jotai';
 import * as css from './styles.css';
 import { Time } from '../../../../components/message';
 import { ThreadTimeline } from '../../../../../client/room/ThreadTimeline';
@@ -15,8 +16,11 @@ import { UserAvatar } from '../../../../components/user-avatar';
 import { useMediaAuthentication } from '../../../../hooks/useMediaAuthentication';
 import { mxcToHttp } from '../../../../../client/mxcToHttp';
 import { useClient } from '../../../../hooks/useClient';
+import { composerToDraftAtom, getComposerId } from '../../../../state/room/roomInputDrafts';
+import { toPlainText } from '../../../../components/editor';
 
 type ThreadSelectorProps = {
+  active?: boolean;
   thread: ThreadTimeline;
   outlined?: boolean;
   hour24Clock: boolean;
@@ -27,6 +31,7 @@ type ThreadSelectorProps = {
 };
 
 export function ThreadSelector({
+  active,
   thread,
   outlined,
   hour24Clock,
@@ -38,6 +43,9 @@ export function ThreadSelector({
   const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
+  const composerId = getComposerId(thread.roomId, thread.threadId);
+  const draft = useAtomValue(composerToDraftAtom(composerId));
+
   const meta = useObservableValue(thread.meta);
   const latestReplyEvent = meta?.latestReplyEvent;
   const participants = useThreadParticipants(thread);
@@ -104,16 +112,23 @@ export function ThreadSelector({
       </Box>
       <Line className={css.ThreadSelectorDivider} direction="Vertical" variant="SurfaceVariant" />
       <Box gap="200" alignItems="Inherit">
-        <Text size="T200" truncate>
-          <span>Last reply by </span>
-          <b>{getMemberName(latestReplyEvent.sender)}</b>
-          <span> at </span>
-          <Time
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-            ts={latestReplyEvent.origin_server_ts}
-          />
-        </Text>
+        {draft && !active ? (
+          <Text size="T200" truncate>
+            <strong style={{ color: color.Success.Main }}>Draft: </strong>
+            <span>{toPlainText(draft, false).trim()}</span>
+          </Text>
+        ) : (
+          <Text size="T200" truncate>
+            <span>Last reply by </span>
+            <b>{getMemberName(latestReplyEvent.sender)}</b>
+            <span> at </span>
+            <Time
+              hour24Clock={hour24Clock}
+              dateFormatString={dateFormatString}
+              ts={latestReplyEvent.origin_server_ts}
+            />
+          </Text>
+        )}
         <Icon size="100" src={Icons.ChevronRight} />
       </Box>
     </Box>

From c3e508a8f95dcf7b704fc5eb5d0ca835fd6ca17e Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 16 Aug 2026 12:22:29 +0530
Subject: [PATCH 071/158] keep the focus at end on initial load

---
 src/app/components/editor/Editor.tsx | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/app/components/editor/Editor.tsx b/src/app/components/editor/Editor.tsx
index b869f247..1cadbc58 100644
--- a/src/app/components/editor/Editor.tsx
+++ b/src/app/components/editor/Editor.tsx
@@ -5,10 +5,11 @@ import React, {
   ReactNode,
   forwardRef,
   useCallback,
+  useEffect,
   useState,
 } from 'react';
 import { Box, Scroll, Text } from 'folds';
-import { Descendant, Editor, createEditor } from 'slate';
+import { Descendant, Editor, Transforms, createEditor } from 'slate';
 import {
   Slate,
   Editable,
@@ -89,6 +90,12 @@ export const CustomEditor = forwardRef<HTMLDivElement, CustomEditorProps>(
       },
     ]);
 
+    useEffect(() => {
+      if (!initialValue?.length) return;
+
+      Transforms.select(editor, Editor.end(editor, []));
+    }, [editor, initialValue]);
+
     const renderElement = useCallback(
       (props: RenderElementProps) => <RenderElement {...props} />,
       []

From 802949c0938e3b675605400156beffb2c16a28e4 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 16 Aug 2026 12:33:17 +0530
Subject: [PATCH 072/158] fix thread input focus on thread switch

---
 src/app/features/room/Room.tsx                    | 2 +-
 src/app/features/room/hooks/useEditorAutoFocus.ts | 5 +++--
 src/app/features/room/thread-view/ThreadView.tsx  | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 6c5b046c..b171d7eb 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -83,7 +83,7 @@ export function Room() {
               </TimelineViewProvider>
 
               {threadTimeline ? (
-                <TimelineViewProvider value={threadTimeline}>
+                <TimelineViewProvider key={threadTimeline.threadId} value={threadTimeline}>
                   <Line variant="Surface" direction="Vertical" size="300" />
                   <ThreadView
                     threadTimeline={threadTimeline}
diff --git a/src/app/features/room/hooks/useEditorAutoFocus.ts b/src/app/features/room/hooks/useEditorAutoFocus.ts
index 312f0d32..03eb828d 100644
--- a/src/app/features/room/hooks/useEditorAutoFocus.ts
+++ b/src/app/features/room/hooks/useEditorAutoFocus.ts
@@ -70,6 +70,7 @@ export const useEditorAutoFocus = (
 };
 
 export const useThreadFocus = (
+  threadId: string,
   threadFocusRef: MutableRefObject<boolean>,
   viewElementRef: RefObject<HTMLElement>
 ) => {
@@ -86,7 +87,7 @@ export const useThreadFocus = (
     };
 
     // eslint-disable-next-line no-param-reassign
-    threadFocusRef.current = true;
+    threadFocusRef.current = !!threadId; // detect thread-change
     window.addEventListener('pointerdown', handlePointerDown);
 
     return () => {
@@ -94,7 +95,7 @@ export const useThreadFocus = (
       threadFocusRef.current = true;
       window.removeEventListener('pointerdown', handlePointerDown);
     };
-  }, [threadFocusRef, viewElementRef]);
+  }, [threadFocusRef, viewElementRef, threadId]);
 
   return threadFocusRef;
 };
diff --git a/src/app/features/room/thread-view/ThreadView.tsx b/src/app/features/room/thread-view/ThreadView.tsx
index dc4969ef..89014f11 100644
--- a/src/app/features/room/thread-view/ThreadView.tsx
+++ b/src/app/features/room/thread-view/ThreadView.tsx
@@ -25,7 +25,7 @@ export function ThreadView({ threadTimeline, threadFocusRef, requestClose }: Thr
   const threadInputRef = useRef<HTMLDivElement>(null);
   const threadViewRef = useRef<HTMLDivElement>(null);
 
-  useThreadFocus(threadFocusRef, threadViewRef);
+  useThreadFocus(threadTimeline.threadId, threadFocusRef, threadViewRef);
   useEditorAutoFocus(editor, threadFocusRef, true);
 
   return (

From f82cb15b6cde0d5a3e1a0282c0fb79625c9e826c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 16 Aug 2026 12:36:10 +0530
Subject: [PATCH 073/158] fix typo

---
 src/app/features/room/hooks/useEditorAutoFocus.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/hooks/useEditorAutoFocus.ts b/src/app/features/room/hooks/useEditorAutoFocus.ts
index 03eb828d..eceb0497 100644
--- a/src/app/features/room/hooks/useEditorAutoFocus.ts
+++ b/src/app/features/room/hooks/useEditorAutoFocus.ts
@@ -92,7 +92,7 @@ export const useThreadFocus = (
 
     return () => {
       // eslint-disable-next-line no-param-reassign
-      threadFocusRef.current = true;
+      threadFocusRef.current = false;
       window.removeEventListener('pointerdown', handlePointerDown);
     };
   }, [threadFocusRef, viewElementRef, threadId]);

From 50b6180796a7c1bacb136896b20fa63ea24629b9 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 16 Aug 2026 12:39:57 +0530
Subject: [PATCH 074/158] fix room input focus on mod+a (select all)

---
 src/app/features/room/hooks/useEditorAutoFocus.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room/hooks/useEditorAutoFocus.ts b/src/app/features/room/hooks/useEditorAutoFocus.ts
index eceb0497..3dbf1897 100644
--- a/src/app/features/room/hooks/useEditorAutoFocus.ts
+++ b/src/app/features/room/hooks/useEditorAutoFocus.ts
@@ -54,7 +54,11 @@ export const useEditorAutoFocus = (
           return;
         }
 
-        if (!shouldFocusMessageField(evt) && !isKeyHotkey('mod+v', evt)) {
+        if (
+          !shouldFocusMessageField(evt) &&
+          !isKeyHotkey('mod+v', evt) &&
+          !isKeyHotkey('mod+a', evt)
+        ) {
           return;
         }
 

From 682d5be11d61700f0d1beb5691d96f4d1f7f8c1c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 16 Aug 2026 13:09:56 +0530
Subject: [PATCH 075/158] show following members in thread

---
 src/app/features/room/RoomView.tsx            |   5 +-
 .../features/room/RoomViewFollowing.css.ts    |  39 -----
 src/app/features/room/RoomViewFollowing.tsx   | 148 +-----------------
 .../room/components/FollowingMembers.tsx      | 142 +++++++++++++++++
 src/app/features/room/components/index.ts     |   1 +
 .../features/room/components/styles.css.ts    |  38 ++++-
 .../features/room/thread-view/ThreadView.tsx  |  12 +-
 .../room/thread-view/ThreadViewFollowing.tsx  |  10 ++
 8 files changed, 209 insertions(+), 186 deletions(-)
 delete mode 100644 src/app/features/room/RoomViewFollowing.css.ts
 create mode 100644 src/app/features/room/components/FollowingMembers.tsx
 create mode 100644 src/app/features/room/thread-view/ThreadViewFollowing.tsx

diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index b688b6c3..d7b25737 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -6,7 +6,7 @@ import { RoomInputPlaceholder } from './RoomInputPlaceholder';
 import { RoomTimeline } from './RoomTimeline';
 import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
-import { RoomViewFollowing, RoomViewFollowingPlaceholder } from './RoomViewFollowing';
+import { RoomViewFollowing } from './RoomViewFollowing';
 import { Page } from '../../components/page';
 import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
@@ -18,6 +18,7 @@ import { useClient } from '../../hooks/useClient';
 import { MessageEvent } from '../../../types/matrix/room';
 import { Timeline } from '../../../client/room';
 import { useEditorAutoFocus } from './hooks/useEditorAutoFocus';
+import { FollowingMembersPlaceholder } from './components';
 
 type RoomViewProps = {
   eventId?: string;
@@ -79,7 +80,7 @@ export function RoomView({ eventId, timeline, threadFocusRef }: RoomViewProps) {
             </>
           )}
         </div>
-        {hideActivity ? <RoomViewFollowingPlaceholder /> : <RoomViewFollowing />}
+        {hideActivity ? <FollowingMembersPlaceholder /> : <RoomViewFollowing />}
       </Box>
     </Page>
   );
diff --git a/src/app/features/room/RoomViewFollowing.css.ts b/src/app/features/room/RoomViewFollowing.css.ts
deleted file mode 100644
index 18b53ac9..00000000
--- a/src/app/features/room/RoomViewFollowing.css.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { recipe } from '@vanilla-extract/recipes';
-import { DefaultReset, color, config, toRem } from 'folds';
-
-export const RoomViewFollowingPlaceholder = style([
-  DefaultReset,
-  {
-    height: toRem(28),
-  },
-]);
-
-export const RoomViewFollowing = recipe({
-  base: [
-    DefaultReset,
-    {
-      minHeight: toRem(28),
-      padding: `0 ${config.space.S400}`,
-      width: '100%',
-      backgroundColor: color.Surface.Container,
-      color: color.Surface.OnContainer,
-      outline: 'none',
-    },
-  ],
-  variants: {
-    clickable: {
-      true: {
-        cursor: 'pointer',
-        selectors: {
-          '&:hover, &:focus-visible': {
-            color: color.Primary.Main,
-          },
-          '&:active': {
-            color: color.Primary.Main,
-          },
-        },
-      },
-    },
-  },
-});
diff --git a/src/app/features/room/RoomViewFollowing.tsx b/src/app/features/room/RoomViewFollowing.tsx
index 8a5b17ca..4aa59617 100644
--- a/src/app/features/room/RoomViewFollowing.tsx
+++ b/src/app/features/room/RoomViewFollowing.tsx
@@ -1,152 +1,16 @@
-import React, { useMemo, useState } from 'react';
-import {
-  Box,
-  Icon,
-  Icons,
-  Modal,
-  Overlay,
-  OverlayBackdrop,
-  OverlayCenter,
-  Text,
-  as,
-  config,
-} from 'folds';
-import { ObservableValue } from 'neurone/lib/utils/observable';
-import classNames from 'classnames';
-import FocusTrap from 'focus-trap-react';
-import * as css from './RoomViewFollowing.css';
-import { EventReaders } from '../../components/event-readers';
-import { stopPropagation } from '../../utils/keyboard';
+import React from 'react';
 import { useClient } from '../../hooks/useClient';
-import { useObservableValue, useObservableValuePromise } from '../../hooks/useObservableValue';
+import { useObservableValue } from '../../hooks/useObservableValue';
 import { useRoom } from '../../hooks/useRoom';
-import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { FollowingMembers } from './components';
 
-export function RoomViewFollowingPlaceholder() {
-  return <div className={css.RoomViewFollowingPlaceholder} />;
-}
-
-export const RoomViewFollowing = as<'div'>(({ className, ...props }, ref) => {
-  const [open, setOpen] = useState(false);
+export function RoomViewFollowing() {
   const ct = useClient();
   const roomId = useRoom();
-  const membersAPI = useRoomMembersAPI();
 
   const roomToLatestEvent = useObservableValue(ct.roomToLatestEvent);
   const latestEvent = roomToLatestEvent.get(roomId);
   const eventId = latestEvent?.event_id;
 
-  const receiptsResult = useObservableValuePromise(
-    useMemo(() => {
-      if (!eventId) return Promise.resolve(new ObservableValue(undefined, ''));
-      return ct.storage.readReceipt.observableRead.queryIndex('eventId', eventId);
-    }, [ct, eventId])
-  );
-  const receipts = receiptsResult.value;
-
-  const names = useMemo(
-    () =>
-      receipts
-        ?.map((receipt) => receipt.userId)
-        .filter((readerId) => readerId !== ct.session.userId)
-        .map((readerId) => membersAPI.getName(readerId)) ?? [],
-    [ct, receipts, membersAPI]
-  );
-
-  return (
-    <>
-      {eventId && (
-        <Overlay open={open} backdrop={<OverlayBackdrop />}>
-          <OverlayCenter>
-            <FocusTrap
-              focusTrapOptions={{
-                initialFocus: false,
-                onDeactivate: () => setOpen(false),
-                clickOutsideDeactivates: true,
-                escapeDeactivates: stopPropagation,
-              }}
-            >
-              <Modal variant="Surface" size="300">
-                <EventReaders eventId={eventId} requestClose={() => setOpen(false)} />
-              </Modal>
-            </FocusTrap>
-          </OverlayCenter>
-        </Overlay>
-      )}
-      <Box
-        as={names.length > 0 ? 'button' : 'div'}
-        onClick={names.length > 0 ? () => setOpen(true) : undefined}
-        className={classNames(css.RoomViewFollowing({ clickable: names.length > 0 }), className)}
-        alignItems="Center"
-        justifyContent="End"
-        gap="200"
-        {...props}
-        ref={ref}
-      >
-        {names.length > 0 && (
-          <>
-            <Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.CheckTwice} />
-            <Text size="T300" truncate>
-              {names.length === 1 && (
-                <>
-                  <b>{names[0]}</b>
-                  <Text as="span" size="Inherit" priority="300">
-                    {' is following the conversation.'}
-                  </Text>
-                </>
-              )}
-              {names.length === 2 && (
-                <>
-                  <b>{names[0]}</b>
-                  <Text as="span" size="Inherit" priority="300">
-                    {' and '}
-                  </Text>
-                  <b>{names[1]}</b>
-                  <Text as="span" size="Inherit" priority="300">
-                    {' are following the conversation.'}
-                  </Text>
-                </>
-              )}
-              {names.length === 3 && (
-                <>
-                  <b>{names[0]}</b>
-                  <Text as="span" size="Inherit" priority="300">
-                    {', '}
-                  </Text>
-                  <b>{names[1]}</b>
-                  <Text as="span" size="Inherit" priority="300">
-                    {' and '}
-                  </Text>
-                  <b>{names[2]}</b>
-                  <Text as="span" size="Inherit" priority="300">
-                    {' are following the conversation.'}
-                  </Text>
-                </>
-              )}
-              {names.length > 3 && (
-                <>
-                  <b>{names[0]}</b>
-                  <Text as="span" size="Inherit" priority="300">
-                    {', '}
-                  </Text>
-                  <b>{names[1]}</b>
-                  <Text as="span" size="Inherit" priority="300">
-                    {', '}
-                  </Text>
-                  <b>{names[2]}</b>
-                  <Text as="span" size="Inherit" priority="300">
-                    {' and '}
-                  </Text>
-                  <b>{names.length - 3} others</b>
-                  <Text as="span" size="Inherit" priority="300">
-                    {' are following the conversation.'}
-                  </Text>
-                </>
-              )}
-            </Text>
-          </>
-        )}
-      </Box>
-    </>
-  );
-});
+  return <FollowingMembers eventId={eventId} />;
+}
diff --git a/src/app/features/room/components/FollowingMembers.tsx b/src/app/features/room/components/FollowingMembers.tsx
new file mode 100644
index 00000000..137bdde0
--- /dev/null
+++ b/src/app/features/room/components/FollowingMembers.tsx
@@ -0,0 +1,142 @@
+import React, { useMemo, useState } from 'react';
+import {
+  Box,
+  Icon,
+  Icons,
+  Modal,
+  Overlay,
+  OverlayBackdrop,
+  OverlayCenter,
+  Text,
+  config,
+} from 'folds';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import FocusTrap from 'focus-trap-react';
+import * as css from './styles.css';
+import { EventReaders } from '../../../components/event-readers';
+import { stopPropagation } from '../../../utils/keyboard';
+import { useClient } from '../../../hooks/useClient';
+import { useObservableValuePromise } from '../../../hooks/useObservableValue';
+import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
+
+export function FollowingMembersPlaceholder() {
+  return <div className={css.FollowingMembersPlaceholder} />;
+}
+
+export function FollowingMembers({ eventId }: { eventId?: string }) {
+  const ct = useClient();
+  const [open, setOpen] = useState(false);
+  const membersAPI = useRoomMembersAPI();
+
+  const receiptsResult = useObservableValuePromise(
+    useMemo(() => {
+      if (!eventId) return Promise.resolve(new ObservableValue(undefined, ''));
+      return ct.storage.readReceipt.observableRead.queryIndex('eventId', eventId);
+    }, [ct, eventId])
+  );
+  const receipts = receiptsResult.value;
+
+  const names = useMemo(
+    () =>
+      receipts
+        ?.map((receipt) => receipt.userId)
+        .filter((readerId) => readerId !== ct.session.userId)
+        .map((readerId) => membersAPI.getName(readerId)) ?? [],
+    [ct, receipts, membersAPI]
+  );
+
+  return (
+    <>
+      {eventId && (
+        <Overlay open={open} backdrop={<OverlayBackdrop />}>
+          <OverlayCenter>
+            <FocusTrap
+              focusTrapOptions={{
+                initialFocus: false,
+                onDeactivate: () => setOpen(false),
+                clickOutsideDeactivates: true,
+                escapeDeactivates: stopPropagation,
+              }}
+            >
+              <Modal variant="Surface" size="300">
+                <EventReaders eventId={eventId} requestClose={() => setOpen(false)} />
+              </Modal>
+            </FocusTrap>
+          </OverlayCenter>
+        </Overlay>
+      )}
+      <Box
+        as={names.length > 0 ? 'button' : 'div'}
+        onClick={names.length > 0 ? () => setOpen(true) : undefined}
+        className={css.FollowingMembers({ clickable: names.length > 0 })}
+        alignItems="Center"
+        justifyContent="End"
+        gap="200"
+      >
+        {names.length > 0 && (
+          <>
+            <Icon style={{ opacity: config.opacity.P300 }} size="100" src={Icons.CheckTwice} />
+            <Text size="T300" truncate>
+              {names.length === 1 && (
+                <>
+                  <b>{names[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' is following the conversation.'}
+                  </Text>
+                </>
+              )}
+              {names.length === 2 && (
+                <>
+                  <b>{names[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' and '}
+                  </Text>
+                  <b>{names[1]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' are following the conversation.'}
+                  </Text>
+                </>
+              )}
+              {names.length === 3 && (
+                <>
+                  <b>{names[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {', '}
+                  </Text>
+                  <b>{names[1]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' and '}
+                  </Text>
+                  <b>{names[2]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' are following the conversation.'}
+                  </Text>
+                </>
+              )}
+              {names.length > 3 && (
+                <>
+                  <b>{names[0]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {', '}
+                  </Text>
+                  <b>{names[1]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {', '}
+                  </Text>
+                  <b>{names[2]}</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' and '}
+                  </Text>
+                  <b>{names.length - 3} others</b>
+                  <Text as="span" size="Inherit" priority="300">
+                    {' are following the conversation.'}
+                  </Text>
+                </>
+              )}
+            </Text>
+          </>
+        )}
+      </Box>
+    </>
+  );
+}
diff --git a/src/app/features/room/components/index.ts b/src/app/features/room/components/index.ts
index 30ef6206..43c89771 100644
--- a/src/app/features/room/components/index.ts
+++ b/src/app/features/room/components/index.ts
@@ -2,3 +2,4 @@ export * from './TimelineDivider';
 export * from './TimelineFloat';
 export * from './JumpToLatestButton';
 export * from './PlaceholderList';
+export * from './FollowingMembers';
diff --git a/src/app/features/room/components/styles.css.ts b/src/app/features/room/components/styles.css.ts
index bdfc4b41..440322bb 100644
--- a/src/app/features/room/components/styles.css.ts
+++ b/src/app/features/room/components/styles.css.ts
@@ -1,6 +1,6 @@
 import { style } from '@vanilla-extract/css';
 import { RecipeVariants, recipe } from '@vanilla-extract/recipes';
-import { DefaultReset, color, config } from 'folds';
+import { DefaultReset, color, config, toRem } from 'folds';
 
 export const TimelineDivider = style({
   position: 'relative',
@@ -40,3 +40,39 @@ export const TimelineFloat = recipe({
 });
 
 export type TimelineFloatVariants = RecipeVariants<typeof TimelineFloat>;
+
+export const FollowingMembersPlaceholder = style([
+  DefaultReset,
+  {
+    height: toRem(28),
+  },
+]);
+
+export const FollowingMembers = recipe({
+  base: [
+    DefaultReset,
+    {
+      minHeight: toRem(28),
+      padding: `0 ${config.space.S400}`,
+      width: '100%',
+      backgroundColor: color.Surface.Container,
+      color: color.Surface.OnContainer,
+      outline: 'none',
+    },
+  ],
+  variants: {
+    clickable: {
+      true: {
+        cursor: 'pointer',
+        selectors: {
+          '&:hover, &:focus-visible': {
+            color: color.Primary.Main,
+          },
+          '&:active': {
+            color: color.Primary.Main,
+          },
+        },
+      },
+    },
+  },
+});
diff --git a/src/app/features/room/thread-view/ThreadView.tsx b/src/app/features/room/thread-view/ThreadView.tsx
index 89014f11..15d3e538 100644
--- a/src/app/features/room/thread-view/ThreadView.tsx
+++ b/src/app/features/room/thread-view/ThreadView.tsx
@@ -8,9 +8,12 @@ import { Page, PageHeader } from '../../../components/page';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useEditor } from '../../../components/editor';
 import { RoomInput } from '../RoomInput';
-import { RoomViewFollowingPlaceholder } from '../RoomViewFollowing';
 import { TimelineView } from './TimelineView';
 import { useEditorAutoFocus, useThreadFocus } from '../hooks/useEditorAutoFocus';
+import { settingsAtom } from '../../../state/settings';
+import { useSetting } from '../../../state/hooks/settings';
+import { FollowingMembersPlaceholder } from '../components';
+import { ThreadViewFollowing } from './ThreadViewFollowing';
 
 type ThreadViewProps = {
   threadTimeline: ThreadTimeline;
@@ -24,6 +27,7 @@ export function ThreadView({ threadTimeline, threadFocusRef, requestClose }: Thr
   const editor = useEditor();
   const threadInputRef = useRef<HTMLDivElement>(null);
   const threadViewRef = useRef<HTMLDivElement>(null);
+  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
 
   useThreadFocus(threadTimeline.threadId, threadFocusRef, threadViewRef);
   useEditorAutoFocus(editor, threadFocusRef, true);
@@ -81,7 +85,11 @@ export function ThreadView({ threadTimeline, threadFocusRef, requestClose }: Thr
               threadId={threadTimeline.threadId}
             />
           </div>
-          <RoomViewFollowingPlaceholder />
+          {hideActivity ? (
+            <FollowingMembersPlaceholder />
+          ) : (
+            <ThreadViewFollowing threadTimeline={threadTimeline} />
+          )}
         </Box>
       </Page>
     </FocusTrap>
diff --git a/src/app/features/room/thread-view/ThreadViewFollowing.tsx b/src/app/features/room/thread-view/ThreadViewFollowing.tsx
new file mode 100644
index 00000000..a7506b80
--- /dev/null
+++ b/src/app/features/room/thread-view/ThreadViewFollowing.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { ThreadTimeline } from '../../../../client/room/ThreadTimeline';
+import { useObservableValue } from '../../../hooks/useObservableValue';
+import { FollowingMembers } from '../components';
+
+export function ThreadViewFollowing({ threadTimeline }: { threadTimeline: ThreadTimeline }) {
+  const meta = useObservableValue(threadTimeline.meta);
+
+  return <FollowingMembers eventId={meta?.latestReplyEvent?.event_id} />;
+}

From 95bfa25b58817c2cae55ea760c17fa40472c1e0b Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 16 Aug 2026 21:38:26 +0530
Subject: [PATCH 076/158] render reply in single line and render custom html

---
 src/app/components/RenderReplyContent.tsx     | 136 ++++++++++++++++
 .../components/message/MsgTypeRenderers.tsx   |  23 +--
 .../message/MsgTypeReplyRenderers.tsx         | 130 +++++++++++++++
 src/app/components/message/RenderBody.tsx     |  42 -----
 src/app/components/message/Reply.css.ts       |   2 +-
 src/app/components/message/Reply.tsx          |  84 ++++++----
 .../message/content/FallbackContent.tsx       |  35 ++++
 src/app/components/message/index.ts           |   1 +
 src/app/components/message/layout/Base.tsx    |  15 +-
 .../components/message/layout/layout.css.ts   |  21 ---
 src/app/features/room/Room.tsx                |   6 +-
 src/app/features/room/RoomTimeline.tsx        |  63 +-------
 .../features/room/components/styles.css.ts    |   1 +
 .../room/thread-view/TimelineView.tsx         |  64 +-------
 src/app/hooks/useMessageParserOptions.ts      |  86 ++++++++++
 src/app/plugins/react-custom-html-parser.tsx  | 149 +++++++++++++++++-
 src/app/styles/CustomHtml.css.ts              |   2 +-
 17 files changed, 632 insertions(+), 228 deletions(-)
 create mode 100644 src/app/components/RenderReplyContent.tsx
 create mode 100644 src/app/components/message/MsgTypeReplyRenderers.tsx
 create mode 100644 src/app/hooks/useMessageParserOptions.ts

diff --git a/src/app/components/RenderReplyContent.tsx b/src/app/components/RenderReplyContent.tsx
new file mode 100644
index 00000000..f4a85318
--- /dev/null
+++ b/src/app/components/RenderReplyContent.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { Opts } from 'linkifyjs';
+import { Text } from 'folds';
+import {
+  MessageAudioContent,
+  MessageFileContent,
+  MessageImageContent,
+  MessageStickerContent,
+  MessageVideoContent,
+  UnsupportedContent,
+  ReplyMEmote,
+  ReplyMNotice,
+  ReplyMText,
+  ReplyMLocation,
+} from './message';
+import { MsgType } from '../../types/matrix/common';
+import { rContent } from '../../client/reader';
+import { MessageEvent } from '../../types/matrix/room';
+
+type RenderReplyContentProps = {
+  displayName: string;
+  eventType: string;
+  edited?: boolean;
+  content: object;
+  highlightRegex?: RegExp;
+  htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
+};
+
+export function RenderReplyContent({
+  displayName,
+  eventType,
+  edited,
+  content,
+  highlightRegex,
+  htmlReactParserOptions,
+  linkifyOpts,
+}: RenderReplyContentProps) {
+  if (eventType === MessageEvent.Sticker) {
+    return (
+      <Text size="T300" priority="300">
+        <MessageStickerContent />
+      </Text>
+    );
+  }
+
+  if (eventType !== MessageEvent.RoomMessage) {
+    return <UnsupportedContent size="T300" />;
+  }
+
+  const msgType = rContent.msgtype(content);
+
+  if (msgType === MsgType.Text) {
+    return (
+      <ReplyMText
+        edited={edited}
+        content={content}
+        highlightRegex={highlightRegex}
+        htmlReactParserOptions={htmlReactParserOptions}
+        linkifyOpts={linkifyOpts}
+      />
+    );
+  }
+
+  if (msgType === MsgType.Emote) {
+    return (
+      <ReplyMEmote
+        displayName={displayName}
+        edited={edited}
+        content={content}
+        highlightRegex={highlightRegex}
+        htmlReactParserOptions={htmlReactParserOptions}
+        linkifyOpts={linkifyOpts}
+      />
+    );
+  }
+
+  if (msgType === MsgType.Notice) {
+    return (
+      <ReplyMNotice
+        edited={edited}
+        content={content}
+        highlightRegex={highlightRegex}
+        htmlReactParserOptions={htmlReactParserOptions}
+        linkifyOpts={linkifyOpts}
+      />
+    );
+  }
+
+  if (msgType === MsgType.Image) {
+    return (
+      <Text size="T300" priority="300">
+        <MessageImageContent />
+      </Text>
+    );
+  }
+
+  if (msgType === MsgType.Video) {
+    return (
+      <Text size="T300" priority="300">
+        <MessageVideoContent />
+      </Text>
+    );
+  }
+
+  if (msgType === MsgType.Audio) {
+    return (
+      <Text size="T300" priority="300">
+        <MessageAudioContent />
+      </Text>
+    );
+  }
+
+  if (msgType === MsgType.File) {
+    return (
+      <Text size="T300" priority="300">
+        <MessageFileContent />
+      </Text>
+    );
+  }
+
+  if (msgType === MsgType.Location) {
+    return <ReplyMLocation content={content} />;
+  }
+
+  return (
+    <ReplyMText
+      edited={edited}
+      content={content}
+      highlightRegex={highlightRegex}
+      htmlReactParserOptions={htmlReactParserOptions}
+      linkifyOpts={linkifyOpts}
+    />
+  );
+}
diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index 1fde640d..aeb3b721 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -25,36 +25,41 @@ import { rContent, rEncryptedFile, rInfo } from '../../../client/reader';
 import { UrlPreviewCard, UrlPreviewHolder } from '../url-preview';
 import { testMatrixTo } from '../../plugins/matrix-to';
 
-export function MBadEncrypted() {
+type TextProps = {
+  size?: 'T400' | 'T300';
+};
+
+export function MBadEncrypted({ size }: TextProps) {
   return (
-    <Text>
+    <Text size={size}>
       <MessageBadEncryptedContent />
     </Text>
   );
 }
 
-type RedactedContentProps = {
+type RedactedContentProps = TextProps & {
   reason?: string;
 };
-export function RedactedContent({ reason }: RedactedContentProps) {
+
+export function RedactedContent({ size, reason }: RedactedContentProps) {
   return (
-    <Text>
+    <Text size={size}>
       <MessageDeletedContent reason={reason} />
     </Text>
   );
 }
 
-export function UnsupportedContent() {
+export function UnsupportedContent({ size }: TextProps) {
   return (
-    <Text>
+    <Text size={size}>
       <MessageUnsupportedContent />
     </Text>
   );
 }
 
-export function BrokenContent() {
+export function BrokenContent({ size }: TextProps) {
   return (
-    <Text>
+    <Text size={size}>
       <MessageBrokenContent />
     </Text>
   );
diff --git a/src/app/components/message/MsgTypeReplyRenderers.tsx b/src/app/components/message/MsgTypeReplyRenderers.tsx
new file mode 100644
index 00000000..2729afbb
--- /dev/null
+++ b/src/app/components/message/MsgTypeReplyRenderers.tsx
@@ -0,0 +1,130 @@
+import React, { CSSProperties } from 'react';
+import { Text } from 'folds';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import { Opts } from 'linkifyjs';
+import { trimReplyFromBody } from '../../utils/room';
+import { MessageTextBody } from './layout';
+import { MessageEditedContent } from './content';
+import { RenderBody } from './RenderBody';
+import { rContent } from '../../../client/reader';
+import { parseGeoUri } from '../../utils/common';
+import { BrokenContent } from './MsgTypeRenderers';
+
+type ReplyMTextProps = {
+  edited?: boolean;
+  content: object;
+  style?: CSSProperties;
+  highlightRegex?: RegExp;
+  htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
+};
+export function ReplyMText({
+  edited,
+  content,
+  style,
+  highlightRegex,
+  linkifyOpts,
+  htmlReactParserOptions,
+}: ReplyMTextProps) {
+  const body = rContent.body(content);
+  const customBody = rContent.formattedBody(content);
+  const trimmedBody = trimReplyFromBody(body ?? '');
+
+  if (typeof body !== 'string') return <BrokenContent />;
+
+  return (
+    <MessageTextBody size="T300" style={style} truncate>
+      <RenderBody
+        body={trimmedBody}
+        customBody={customBody}
+        highlightRegex={highlightRegex}
+        htmlReactParserOptions={htmlReactParserOptions}
+        linkifyOpts={linkifyOpts}
+      />
+      {edited && <MessageEditedContent />}
+    </MessageTextBody>
+  );
+}
+
+type ReplyMEmoteProps = {
+  displayName: string;
+  edited?: boolean;
+  content: object;
+  highlightRegex?: RegExp;
+  htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
+};
+export function ReplyMEmote({
+  displayName,
+  edited,
+  content,
+  highlightRegex,
+  linkifyOpts,
+  htmlReactParserOptions,
+}: ReplyMEmoteProps) {
+  const body = rContent.body(content);
+  const customBody = rContent.formattedBody(content);
+
+  if (typeof body !== 'string') return <BrokenContent />;
+  const trimmedBody = trimReplyFromBody(body);
+
+  return (
+    <MessageTextBody size="T300" emote preWrap={typeof customBody !== 'string'} truncate>
+      <b>{`${displayName} `}</b>
+      <RenderBody
+        body={trimmedBody}
+        customBody={customBody}
+        highlightRegex={highlightRegex}
+        htmlReactParserOptions={htmlReactParserOptions}
+        linkifyOpts={linkifyOpts}
+      />
+      {edited && <MessageEditedContent />}
+    </MessageTextBody>
+  );
+}
+
+type ReplyMNoticeProps = {
+  edited?: boolean;
+  content: object;
+  highlightRegex?: RegExp;
+  htmlReactParserOptions: HTMLReactParserOptions;
+  linkifyOpts: Opts;
+};
+export function ReplyMNotice({
+  edited,
+  content,
+  highlightRegex,
+  linkifyOpts,
+  htmlReactParserOptions,
+}: ReplyMNoticeProps) {
+  const body = rContent.body(content);
+  const customBody = rContent.formattedBody(content);
+
+  if (typeof body !== 'string') return <BrokenContent />;
+  const trimmedBody = trimReplyFromBody(body);
+
+  return (
+    <MessageTextBody size="T300" notice preWrap={typeof customBody !== 'string'} truncate>
+      <RenderBody
+        body={trimmedBody}
+        customBody={customBody}
+        highlightRegex={highlightRegex}
+        htmlReactParserOptions={htmlReactParserOptions}
+        linkifyOpts={linkifyOpts}
+      />
+      {edited && <MessageEditedContent />}
+    </MessageTextBody>
+  );
+}
+
+type ReplyMLocationProps = {
+  content: object;
+};
+export function ReplyMLocation({ content }: ReplyMLocationProps) {
+  const geoUri = rContent.geoUri(content);
+  if (!geoUri) return <BrokenContent />;
+  const location = parseGeoUri(geoUri);
+  if (!location) return <BrokenContent />;
+
+  return <Text size="T300">{geoUri}</Text>;
+}
diff --git a/src/app/components/message/RenderBody.tsx b/src/app/components/message/RenderBody.tsx
index d48c92a6..f9518171 100644
--- a/src/app/components/message/RenderBody.tsx
+++ b/src/app/components/message/RenderBody.tsx
@@ -1,26 +1,11 @@
 import React from 'react';
 import parse, { HTMLReactParserOptions } from 'html-react-parser';
 import Linkify from 'linkify-react';
-import { Chip, Text } from 'folds';
 import { Opts } from 'linkifyjs';
 import { MessageEmptyContent } from './content';
 import { sanitizeCustomHtml } from '../../utils/sanitize';
 import { highlightText, scaleSystemEmoji } from '../../plugins/react-custom-html-parser';
 
-export function shouldTruncate(
-  body: string,
-  customBody?: string,
-  maxLines = 15,
-  charPerLine = 100
-) {
-  // Count text characters (strip HTML tags)
-  const text = customBody?.replace(/<[^>]+>/g, '') || body;
-
-  const newlines = (body.match(/\n/g) || []).length;
-
-  return text.length > maxLines * charPerLine || newlines > maxLines;
-}
-
 const NEXT_LINE_ONLY_REGEX = /^\n+$/;
 
 type RenderBodyProps = {
@@ -50,30 +35,3 @@ export function RenderBody({
     </Linkify>
   );
 }
-
-export function ViewMoreLessButton({
-  collapsed,
-  onToggle,
-}: {
-  collapsed: boolean;
-  onToggle: () => void;
-}) {
-  return (
-    <Chip
-      type="button"
-      variant="Primary"
-      fill="Soft"
-      radii="300"
-      onClick={onToggle}
-      outlined
-      style={{
-        position: collapsed ? 'sticky' : 'initial',
-        bottom: '0',
-        borderBottomLeftRadius: collapsed ? 0 : undefined,
-        borderBottomRightRadius: collapsed ? 0 : undefined,
-      }}
-    >
-      <Text size="L400">{collapsed ? 'View More' : 'View Less'}</Text>
-    </Chip>
-  );
-}
diff --git a/src/app/components/message/Reply.css.ts b/src/app/components/message/Reply.css.ts
index 94394f88..24c11682 100644
--- a/src/app/components/message/Reply.css.ts
+++ b/src/app/components/message/Reply.css.ts
@@ -7,7 +7,7 @@ export const ReplyBar = style({
   marginLeft: 'auto',
 
   width: toRem(19),
-  height: `calc(100% - ${toRem(8)})`,
+  height: `calc(100% - ${toRem(4)})`,
 
   borderLeft: `${config.borderWidth.B500} solid ${color.Surface.ContainerLine}`,
   borderTop: `${config.borderWidth.B500} solid ${color.Surface.ContainerLine}`,
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index f3bc3c5f..32c82a33 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -1,4 +1,4 @@
-import { Box, Text, color, toRem } from 'folds';
+import { Box, Text, color, config, toRem } from 'folds';
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
@@ -12,30 +12,60 @@ import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { GetRoomMemberNameCallback } from '../../hooks/useRoomMembers';
 import { rUnsigned } from '../../../client/reader';
 import { TimelineView } from '../../../client/room';
-import { RenderMessageContent } from '../RenderMessageContent';
+import { RenderReplyContent } from '../RenderReplyContent';
 import { Time } from './Time';
 import { BubbleLayout, CompactLayout, MessageBase, ModernLayout } from './layout';
 import { MessageLayout, MessageSpacing } from '../../state/settings';
 import { RedactedContent } from './MsgTypeRenderers';
+import { HoverUnderline } from '../../styles/Text.css';
 
 type ReplyMessageProps = {
   username?: ReactNode;
   time?: ReactNode;
   messageLayout: MessageLayout;
   children: ReactNode;
+  onClick?: () => void;
 };
-export function ReplyMessage({ username, time, messageLayout, children }: ReplyMessageProps) {
+export function ReplyMessage({
+  username,
+  time,
+  messageLayout,
+  onClick,
+  children,
+}: ReplyMessageProps) {
   const msgBarJSX = <div className={css.ReplyBar} />;
 
+  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+    if (!onClick) return;
+
+    if (event.key === 'Enter' || event.key === ' ') {
+      event.preventDefault();
+      onClick();
+    }
+  };
+
+  const commonProps = onClick
+    ? {
+        role: 'button' as const,
+        tabIndex: 0,
+        onClick,
+        onKeyDown: handleKeyDown,
+        className: HoverUnderline,
+        style: { cursor: 'pointer' },
+      }
+    : {};
+
   if (messageLayout === MessageLayout.Compact) {
     return (
-      <CompactLayout before={msgBarJSX}>
+      <CompactLayout before={msgBarJSX} {...commonProps}>
         <Box grow="Yes" direction="Column">
-          <Box alignItems="Baseline" shrink="No" gap="200">
-            {username}
+          <Box alignItems="Center" shrink="No" gap="200">
+            <Box shrink="No" style={{ maxWidth: toRem(200) }}>
+              {username}
+            </Box>
+            {children}
             {time}
           </Box>
-          {children}
         </Box>
       </CompactLayout>
     );
@@ -43,28 +73,27 @@ export function ReplyMessage({ username, time, messageLayout, children }: ReplyM
 
   if (messageLayout === MessageLayout.Bubble) {
     return (
-      <BubbleLayout
-        hideBubble
-        before={msgBarJSX}
-        header={
-          <Box alignItems="Baseline" shrink="No" gap="200">
+      <BubbleLayout hideBubble before={msgBarJSX} {...commonProps}>
+        <Box alignItems="Center" shrink="No" gap="200">
+          <Box shrink="No" style={{ maxWidth: toRem(200) }}>
             {username}
-            {time}
           </Box>
-        }
-      >
-        {children}
+          {children}
+          {time}
+        </Box>
       </BubbleLayout>
     );
   }
 
   return (
-    <ModernLayout before={msgBarJSX}>
-      <Box alignItems="Baseline" shrink="No" gap="200">
-        {username}
+    <ModernLayout before={msgBarJSX} {...commonProps}>
+      <Box alignItems="Center" shrink="No" gap="200">
+        <Box shrink="No" style={{ maxWidth: toRem(200) }}>
+          {username}
+        </Box>
+        {children}
         {time}
       </Box>
-      {children}
     </ModernLayout>
   );
 }
@@ -72,7 +101,7 @@ export function ReplyMessage({ username, time, messageLayout, children }: ReplyM
 type ReplyProps = {
   roomId: string;
   eventId: string;
-  onClick?: MouseEventHandler | undefined;
+  onClick?: (replyId: string) => void;
   getMemberPowerTag?: GetMemberPowerTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
@@ -121,9 +150,11 @@ export function Reply({
 
   const redactedEvent = redacted || !!rUnsigned.redactedBecause(replyEvent?.unsigned);
 
+  // TODO: make edit message appear in reply
   return (
     <MessageBase space={messageSpacing}>
       <ReplyMessage
+        onClick={onClick ? () => onClick(eventId) : undefined}
         messageLayout={messageLayout}
         username={
           sender && (
@@ -145,20 +176,18 @@ export function Reply({
       >
         {replyEvent !== undefined ? (
           <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }} as="div">
-            {redactedEvent && <RedactedContent />}
+            {redactedEvent && <RedactedContent size="T300" />}
             {!redactedEvent &&
               (replyEvent === null ? (
-                <Text>
+                <Text size="B300">
                   <MessageBadEncryptedContent />
                 </Text>
               ) : (
-                <RenderMessageContent
+                <RenderReplyContent
                   displayName={getMemberName(replyEvent.sender)}
                   eventType={replyEvent.type}
-                  ts={replyEvent.origin_server_ts}
-                  edited={false}
+                  edited={false} // TODO:
                   content={replyEvent.content}
-                  mediaAutoLoad={mediaAutoLoad}
                   htmlReactParserOptions={htmlReactParserOptions}
                   linkifyOpts={linkifyOpts}
                 />
@@ -170,6 +199,7 @@ export function Reply({
               backgroundColor: color.SurfaceVariant.ContainerActive,
               width: toRem(placeholderWidth),
               maxWidth: '100%',
+              height: config.lineHeight.T300,
             }}
           />
         )}
diff --git a/src/app/components/message/content/FallbackContent.tsx b/src/app/components/message/content/FallbackContent.tsx
index 9edb9678..8353ee89 100644
--- a/src/app/components/message/content/FallbackContent.tsx
+++ b/src/app/components/message/content/FallbackContent.tsx
@@ -64,3 +64,38 @@ export const MessageEditedContent = as<'span', { children?: never }>(({ ...props
     {' (edited)'}
   </Text>
 ));
+
+export const MessageStickerContent = as<'div', { children?: never }>(({ ...props }, ref) => (
+  <Box as="span" alignItems="Center" gap="100" {...props} ref={ref}>
+    <Icon size="50" src={Icons.Sticker} filled />
+    <i>Sticker</i>
+  </Box>
+));
+
+export const MessageImageContent = as<'div', { children?: never }>(({ ...props }, ref) => (
+  <Box as="span" alignItems="Center" gap="100" {...props} ref={ref}>
+    <Icon size="50" src={Icons.Photo} filled />
+    <i>Image</i>
+  </Box>
+));
+
+export const MessageVideoContent = as<'div', { children?: never }>(({ ...props }, ref) => (
+  <Box as="span" alignItems="Center" gap="100" {...props} ref={ref}>
+    <Icon size="50" src={Icons.Vlc} filled />
+    <i>Video</i>
+  </Box>
+));
+
+export const MessageAudioContent = as<'div', { children?: never }>(({ ...props }, ref) => (
+  <Box as="span" alignItems="Center" gap="100" {...props} ref={ref}>
+    <Icon size="50" src={Icons.Play} filled />
+    <i>Audio</i>
+  </Box>
+));
+
+export const MessageFileContent = as<'div', { children?: never }>(({ ...props }, ref) => (
+  <Box as="span" alignItems="Center" gap="100" {...props} ref={ref}>
+    <Icon size="50" src={Icons.File} filled />
+    <i>File</i>
+  </Box>
+));
diff --git a/src/app/components/message/index.ts b/src/app/components/message/index.ts
index 6f7415ad..e90e2516 100644
--- a/src/app/components/message/index.ts
+++ b/src/app/components/message/index.ts
@@ -6,5 +6,6 @@ export * from './Reply';
 export * from './content';
 export * from './Time';
 export * from './MsgTypeRenderers';
+export * from './MsgTypeReplyRenderers';
 export * from './FileHeader';
 export * from './RenderBody';
diff --git a/src/app/components/message/layout/Base.tsx b/src/app/components/message/layout/Base.tsx
index b07ae257..a8957c5c 100644
--- a/src/app/components/message/layout/Base.tsx
+++ b/src/app/components/message/layout/Base.tsx
@@ -28,19 +28,20 @@ export const UsernameBold = as<'b'>(({ as: AsUsernameBold = 'b', className, ...p
   <AsUsernameBold className={classNames(css.UsernameBold, className)} {...props} ref={ref} />
 ));
 
-export const MessageTextBody = as<'div', css.MessageTextBodyVariants & { notice?: boolean }>(
+export const MessageTextBody = as<
+  'div',
+  css.MessageTextBodyVariants & { size?: 'T400' | 'T300'; notice?: boolean; truncate?: boolean }
+>(
   (
-    { as: asComp = 'div', className, preWrap, jumboEmoji, emote, notice, truncate, ...props },
+    { as: asComp = 'div', className, size, preWrap, jumboEmoji, emote, notice, truncate, ...props },
     ref
   ) => (
     <Text
       as={asComp}
-      size="T400"
+      size={size ?? 'T400'}
       priority={notice ? '300' : '400'}
-      className={classNames(
-        css.MessageTextBody({ preWrap, jumboEmoji, emote, truncate }),
-        className
-      )}
+      className={classNames(css.MessageTextBody({ preWrap, jumboEmoji, emote }), className)}
+      truncate={truncate}
       {...props}
       ref={ref}
     />
diff --git a/src/app/components/message/layout/layout.css.ts b/src/app/components/message/layout/layout.css.ts
index 0a61b361..1acd505f 100644
--- a/src/app/components/message/layout/layout.css.ts
+++ b/src/app/components/message/layout/layout.css.ts
@@ -201,27 +201,6 @@ export const MessageTextBody = recipe({
         fontStyle: 'italic',
       },
     },
-    truncate: {
-      true: {
-        maxHeight: '15em',
-        overflow: 'hidden',
-
-        selectors: {
-          '&::before': {
-            content: '',
-            position: 'absolute',
-            bottom: 0,
-            left: 0,
-            right: 0,
-            pointerEvents: 'none',
-
-            height: config.space.S400,
-            background: `linear-gradient(to top, ${color.Primary.Container}, #00000000)`,
-            borderBottom: `${config.borderWidth.B400} solid ${color.Primary.ContainerLine}`,
-          },
-        },
-      },
-    },
   },
 });
 
diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index b171d7eb..85301f94 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -55,10 +55,14 @@ export function Room() {
     useCallback(
       (evt) => {
         if (isKeyHotkey('escape', evt)) {
+          // TODO: check overlay's
+          if (activeThreadId && threadFocusRef.current) {
+            timeline?.closeThread();
+          }
           // markAsRead(mx, roomId, hideActivity);
         }
       },
-      [roomId, hideActivity]
+      [activeThreadId, timeline]
     )
   );
 
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 315638af..6ae19132 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -9,11 +9,9 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { HTMLReactParserOptions } from 'html-react-parser';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
 import { Box, Scroll, config, toRem } from 'folds';
-import { Opts as LinkifyOpts } from 'linkifyjs';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { useVirtualPaginator } from '../../hooks/useVirtualPaginator';
 import { useAlive } from '../../hooks/useAlive';
@@ -24,13 +22,6 @@ import {
   Reply,
   RedactedContent,
 } from '../../components/message';
-import {
-  factoryRenderLinkifyWithMention,
-  getReactCustomHtmlParser,
-  LINKIFY_OPTS,
-  makeMentionCustomProps,
-  renderMatrixMention,
-} from '../../plugins/react-custom-html-parser';
 import { getLatestEditEvent, getReplyId, getThreadId } from '../../utils/room';
 import { useSetting } from '../../state/hooks/settings';
 import { MessageLayout, settingsAtom } from '../../state/settings';
@@ -39,10 +30,7 @@ import { RoomIntro } from '../../components/room-intro';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { MessageEvent, StateEvent } from '../../../types/matrix/room';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
-import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
-import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
-import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
 import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
@@ -79,6 +67,7 @@ import { TimelineFloat, JumpToLatestButton, ComboDivider, PlaceholderList } from
 import { OutboxView } from './OutboxView';
 import { EncryptedMessageEvent } from '../../components/encrypted-event';
 import { useUserReadReceipt } from '../../hooks/useReadReceipt';
+import { useMessageParserOptions } from '../../hooks/useMessageParserOptions';
 
 type RoomTimelineProps = {
   eventId?: string;
@@ -92,7 +81,6 @@ const PAGINATION_LIMIT = 80;
 export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTimelineProps) {
   const ct = useClient();
   const roomId = useRoom();
-  const useAuthentication = useMediaAuthentication();
   const encryptedRooms = useObservableValue(ct.encryptedRooms);
 
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
@@ -143,8 +131,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   // const roomToParents = useAtomValue(roomToParentsAtom);
   // const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
   const { navigateRoom } = useRoomNavigate();
-  const mentionClickHandler = useMentionClickHandler(roomId);
-  const spoilerClickHandler = useSpoilerClickHandler();
 
   const imagePackRooms = useImagePackRooms(roomId);
 
@@ -166,43 +152,8 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   >();
   const alive = useAlive();
 
-  const linkifyOpts = useMemo<LinkifyOpts>(
-    () => ({
-      ...LINKIFY_OPTS,
-      render: factoryRenderLinkifyWithMention((href) =>
-        renderMatrixMention(
-          ct,
-          roomId,
-          href,
-          makeMentionCustomProps(mentionClickHandler),
-          membersAPI.getName,
-          getRoomName
-        )
-      ),
-    }),
-    [ct, roomId, mentionClickHandler, membersAPI.getName, getRoomName]
-  );
-  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
-    () =>
-      getReactCustomHtmlParser(ct, roomId, {
-        linkifyOpts,
-        useAuthentication,
-        handleSpoilerClick: spoilerClickHandler,
-        handleMentionClick: mentionClickHandler,
-        getMemberName: membersAPI.getName,
-        getRoomName,
-      }),
-    [
-      ct,
-      roomId,
-      linkifyOpts,
-      spoilerClickHandler,
-      mentionClickHandler,
-      useAuthentication,
-      membersAPI.getName,
-      getRoomName,
-    ]
-  );
+  const { linkifyOpts, htmlReactParserOptions, htmlReactParserInlineOptions } =
+    useMessageParserOptions(roomId, getRoomName, membersAPI.getName);
 
   const activeThread = useObservableValue(timeline.activeThread);
   const threads = useObservableValue(timeline.threads);
@@ -315,10 +266,8 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   useObservableValueListener(timeline.outbox.senders, stickToBottom);
   useObservableValueListener(timeline.range.info, stickToBottom);
 
-  const handleOpenReply: MouseEventHandler = useCallback(async (evt) => {
-    const targetId = evt.currentTarget.getAttribute('data-event-id');
-    if (!targetId) return;
-    console.log(targetId);
+  const handleOpenReply = useCallback((replyId: string) => {
+    console.log(replyId);
   }, []);
 
   const handleUserClick = useUserClickHandler();
@@ -553,7 +502,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
           redacted={redacted.has(replyEventId)}
           getMemberName={membersAPI.getName}
           timeline={timeline}
-          htmlReactParserOptions={htmlReactParserOptions}
+          htmlReactParserOptions={htmlReactParserInlineOptions}
           linkifyOpts={linkifyOpts}
           hour24Clock={hour24Clock}
           dateFormatString={dateFormatString}
diff --git a/src/app/features/room/components/styles.css.ts b/src/app/features/room/components/styles.css.ts
index 440322bb..5d5cecf0 100644
--- a/src/app/features/room/components/styles.css.ts
+++ b/src/app/features/room/components/styles.css.ts
@@ -4,6 +4,7 @@ import { DefaultReset, color, config, toRem } from 'folds';
 
 export const TimelineDivider = style({
   position: 'relative',
+  minHeight: toRem(20),
 });
 export const TimelineDividerCenterChild = style({
   position: 'absolute',
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index 01275943..e85b5b8d 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -7,10 +7,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { HTMLReactParserOptions } from 'html-react-parser';
 import { ReactEditor } from 'slate-react';
 import { Box, Scroll, Text, config } from 'folds';
-import { Opts as LinkifyOpts } from 'linkifyjs';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { useVirtualPaginator } from '../../../hooks/useVirtualPaginator';
 import { useAlive } from '../../../hooks/useAlive';
@@ -21,13 +19,6 @@ import {
   Reply,
   DividerTime,
 } from '../../../components/message';
-import {
-  factoryRenderLinkifyWithMention,
-  getReactCustomHtmlParser,
-  LINKIFY_OPTS,
-  makeMentionCustomProps,
-  renderMatrixMention,
-} from '../../../plugins/react-custom-html-parser';
 import { fallbackReply, getLatestEditEvent, getReplyId } from '../../../utils/room';
 import { useSetting } from '../../../state/hooks/settings';
 import { MessageLayout, settingsAtom } from '../../../state/settings';
@@ -36,9 +27,6 @@ import * as css from './styles.css';
 import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { MessageEvent, StateEvent } from '../../../../types/matrix/room';
 import { RenderMessageContent } from '../../../components/RenderMessageContent';
-import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
-import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
-import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../../hooks/useImagePackRooms';
 import { useIsDirectRoom, useRoom } from '../../../hooks/useRoom';
@@ -75,6 +63,7 @@ import { useEditor } from '../../../components/editor';
 import { TimelineFloat, JumpToLatestButton, ComboDivider, PlaceholderList } from '../components';
 import { OutboxView } from '../OutboxView';
 import { useUserReadReceipt } from '../../../hooks/useReadReceipt';
+import { useMessageParserOptions } from '../../../hooks/useMessageParserOptions';
 
 type TimelineViewProps = {
   threadTimeline: ThreadTimeline;
@@ -85,7 +74,6 @@ const PAGINATION_LIMIT = 80;
 export function TimelineView({ threadTimeline }: TimelineViewProps) {
   const ct = useClient();
   const roomId = useRoom();
-  const useAuthentication = useMediaAuthentication();
   const encryptedRooms = useObservableValue(ct.encryptedRooms);
   const editor = useEditor();
   const roomInputRef = useRef<HTMLDivElement>(null);
@@ -134,8 +122,6 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
   const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, ct.session.userId);
   const [editId, setEditId] = useState<string>();
 
-  const mentionClickHandler = useMentionClickHandler(roomId);
-  const spoilerClickHandler = useSpoilerClickHandler();
   const imagePackRooms = useImagePackRooms(roomId);
 
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -154,44 +140,8 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
   >();
   const alive = useAlive();
 
-  const linkifyOpts = useMemo<LinkifyOpts>(
-    () => ({
-      ...LINKIFY_OPTS,
-      render: factoryRenderLinkifyWithMention((href) =>
-        renderMatrixMention(
-          ct,
-          roomId,
-          href,
-          makeMentionCustomProps(mentionClickHandler),
-          membersAPI.getName,
-          getRoomName
-        )
-      ),
-    }),
-    [ct, roomId, mentionClickHandler, membersAPI.getName, getRoomName]
-  );
-
-  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
-    () =>
-      getReactCustomHtmlParser(ct, roomId, {
-        linkifyOpts,
-        useAuthentication,
-        handleSpoilerClick: spoilerClickHandler,
-        handleMentionClick: mentionClickHandler,
-        getMemberName: membersAPI.getName,
-        getRoomName,
-      }),
-    [
-      ct,
-      roomId,
-      linkifyOpts,
-      spoilerClickHandler,
-      mentionClickHandler,
-      useAuthentication,
-      membersAPI.getName,
-      getRoomName,
-    ]
-  );
+  const { linkifyOpts, htmlReactParserOptions, htmlReactParserInlineOptions } =
+    useMessageParserOptions(roomId, getRoomName, membersAPI.getName);
 
   const redacted = useObservableValue(threadTimeline.relations.redacted);
   const reactions = useObservableValue(threadTimeline.relations.reactions.eventToRelations);
@@ -296,10 +246,8 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
     }
   }, [scrollToElement, editId]);
 
-  const handleOpenReply: MouseEventHandler = useCallback(async (evt) => {
-    const targetId = evt.currentTarget.getAttribute('data-event-id');
-    if (!targetId) return;
-    console.log(targetId);
+  const handleOpenReply = useCallback((replyId: string) => {
+    console.log(replyId);
   }, []);
 
   const handleUserClick = useUserClickHandler();
@@ -450,7 +398,7 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
         redacted={redacted.has(replyEventId)}
         getMemberName={membersAPI.getName}
         timeline={threadTimeline}
-        htmlReactParserOptions={htmlReactParserOptions}
+        htmlReactParserOptions={htmlReactParserInlineOptions}
         linkifyOpts={linkifyOpts}
         hour24Clock={hour24Clock}
         dateFormatString={dateFormatString}
diff --git a/src/app/hooks/useMessageParserOptions.ts b/src/app/hooks/useMessageParserOptions.ts
new file mode 100644
index 00000000..6fadca79
--- /dev/null
+++ b/src/app/hooks/useMessageParserOptions.ts
@@ -0,0 +1,86 @@
+import { useMemo } from 'react';
+import { Opts as LinkifyOpts } from 'linkifyjs';
+import { HTMLReactParserOptions } from 'html-react-parser';
+import {
+  factoryRenderLinkifyWithMention,
+  getReactCustomHtmlInlineParser,
+  getReactCustomHtmlParser,
+  LINKIFY_OPTS,
+  makeMentionCustomProps,
+  renderMatrixMention,
+} from '../plugins/react-custom-html-parser';
+import { useClient } from './useClient';
+import { useMentionClickHandler } from './useMentionClickHandler';
+import { useSpoilerClickHandler } from './useSpoilerClickHandler';
+import { GetRoomNameCallback } from './storage/useGetRoomName';
+import { GetRoomMemberNameCallback } from './useRoomMembers';
+import { useMediaAuthentication } from './useMediaAuthentication';
+
+export const useMessageParserOptions = (
+  roomId: string,
+  getRoomName: GetRoomNameCallback,
+  getMemberName: GetRoomMemberNameCallback
+) => {
+  const ct = useClient();
+  const useAuthentication = useMediaAuthentication();
+
+  const mentionClickHandler = useMentionClickHandler(roomId);
+  const spoilerClickHandler = useSpoilerClickHandler();
+
+  const linkifyOpts = useMemo<LinkifyOpts>(
+    () => ({
+      ...LINKIFY_OPTS,
+      render: factoryRenderLinkifyWithMention((href) =>
+        renderMatrixMention(
+          ct,
+          roomId,
+          href,
+          makeMentionCustomProps(mentionClickHandler),
+          getMemberName,
+          getRoomName
+        )
+      ),
+    }),
+    [ct, roomId, mentionClickHandler, getMemberName, getRoomName]
+  );
+
+  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
+    () =>
+      getReactCustomHtmlParser(ct, roomId, {
+        linkifyOpts,
+        useAuthentication,
+        handleSpoilerClick: spoilerClickHandler,
+        handleMentionClick: mentionClickHandler,
+        getMemberName,
+        getRoomName,
+      }),
+    [
+      ct,
+      roomId,
+      linkifyOpts,
+      spoilerClickHandler,
+      mentionClickHandler,
+      useAuthentication,
+      getMemberName,
+      getRoomName,
+    ]
+  );
+
+  const htmlReactParserInlineOptions = useMemo<HTMLReactParserOptions>(
+    () =>
+      getReactCustomHtmlInlineParser(ct, roomId, {
+        linkifyOpts,
+        useAuthentication,
+        handleMentionClick: mentionClickHandler,
+        getMemberName,
+        getRoomName,
+      }),
+    [ct, roomId, linkifyOpts, useAuthentication, mentionClickHandler, getMemberName, getRoomName]
+  );
+
+  return {
+    linkifyOpts,
+    htmlReactParserOptions,
+    htmlReactParserInlineOptions,
+  };
+};
diff --git a/src/app/plugins/react-custom-html-parser.tsx b/src/app/plugins/react-custom-html-parser.tsx
index 9cc86d1f..6da8f251 100644
--- a/src/app/plugins/react-custom-html-parser.tsx
+++ b/src/app/plugins/react-custom-html-parser.tsx
@@ -474,14 +474,15 @@ export const getReactCustomHtmlParser = (
         }
 
         if (name === 'img') {
-          const htmlSrc = mxcToHttp(ct.session.baseUrl, props.src, params.useAuthentication).url();
-          if (htmlSrc && props.src.startsWith('mxc://') === false) {
+          if (props.src && props.src.startsWith('mxc://') === false) {
             return (
-              <a href={htmlSrc} target="_blank" rel="noreferrer noopener">
-                {props.alt || props.title || htmlSrc}
+              <a href={props.src} target="_blank" rel="noreferrer noopener">
+                {props.alt || props.title || props.src}
               </a>
             );
           }
+
+          const htmlSrc = mxcToHttp(ct.session.baseUrl, props.src, params.useAuthentication).url();
           if (htmlSrc && 'data-mx-emoticon' in props) {
             return (
               <span className={css.EmoticonBase}>
@@ -516,3 +517,143 @@ export const getReactCustomHtmlParser = (
   };
   return opts;
 };
+
+export const getReactCustomHtmlInlineParser = (
+  ct: ClientContext,
+  roomId: string | undefined,
+  params: {
+    linkifyOpts: LinkifyOpts;
+    highlightRegex?: RegExp;
+    useAuthentication?: boolean;
+    handleMentionClick?: ReactEventHandler<HTMLElement>;
+    getMemberName: GetRoomMemberNameCallback;
+    getRoomName: GetRoomNameCallback;
+  }
+): HTMLReactParserOptions => {
+  const opts: HTMLReactParserOptions = {
+    replace: (domNode) => {
+      if (domNode instanceof Element && 'name' in domNode) {
+        const { name, attribs, children, parent } = domNode;
+        const props = attributesToProps(attribs);
+
+        if (
+          name === 'h1' ||
+          name === 'h2' ||
+          name === 'h3' ||
+          name === 'h4' ||
+          name === 'h5' ||
+          name === 'h6'
+        ) {
+          return <strong>{domToReact(children, opts)} </strong>;
+        }
+
+        if (name === 'br') {
+          return <span> </span>;
+        }
+
+        if (name === 'p') {
+          return <span>{domToReact(children, opts)} </span>;
+        }
+
+        if (name === 'pre') {
+          return <span>{domToReact(children, opts)} </span>;
+        }
+
+        if (name === 'blockquote') {
+          return <em>{domToReact(children, opts)} </em>;
+        }
+
+        if (name === 'ul') {
+          return <span>{domToReact(children, opts)} </span>;
+        }
+        if (name === 'ol') {
+          return <span>{domToReact(children, opts)} </span>;
+        }
+
+        if (name === 'code') {
+          if (parent && 'name' in parent && parent.name === 'pre') {
+            const codeReact = domToReact(children, opts);
+            if (typeof codeReact === 'string') {
+              return <code className={css.CodeFont}>{codeReact}</code>;
+            }
+          } else {
+            return (
+              <Text as="code" size="T300" className={css.Code} {...props}>
+                {domToReact(children, opts)}
+              </Text>
+            );
+          }
+        }
+
+        if (name === 'a' && testMatrixTo(tryDecodeURIComponent(props.href))) {
+          const content = children.find((child) => !(child instanceof DOMText))
+            ? undefined
+            : children.map((c) => (c instanceof DOMText ? c.data : '')).join();
+
+          const mention = renderMatrixMention(
+            ct,
+            roomId,
+            tryDecodeURIComponent(props.href),
+            makeMentionCustomProps(params.handleMentionClick, content),
+            params.getMemberName,
+            params.getRoomName
+          );
+
+          if (mention) return mention;
+        }
+
+        if (name === 'span' && 'data-mx-spoiler' in props) {
+          return (
+            <span {...props} className={css.Spoiler()} aria-pressed style={{ cursor: 'pointer' }}>
+              {domToReact(children, opts)}
+            </span>
+          );
+        }
+
+        if (name === 'img') {
+          if (props.src && props.src.startsWith('mxc://') === false) {
+            return (
+              <a href={props.src} target="_blank" rel="noreferrer noopener">
+                {props.alt || props.title || props.src}
+              </a>
+            );
+          }
+
+          const htmlSrc = mxcToHttp(ct.session.baseUrl, props.src, params.useAuthentication).url();
+          if (htmlSrc && 'data-mx-emoticon' in props) {
+            return (
+              <span className={css.EmoticonBase}>
+                <span className={css.Emoticon()}>
+                  <img {...props} className={css.EmoticonImg} src={htmlSrc} />
+                </span>
+              </span>
+            );
+          }
+          if (htmlSrc) return <em>Click to see image</em>;
+        }
+
+        return <span>{domToReact(children, opts)} </span>;
+      }
+
+      if (domNode instanceof DOMText) {
+        const linkify =
+          !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'code') &&
+          !(domNode.parent && 'name' in domNode.parent && domNode.parent.name === 'a');
+
+        let jsx = scaleSystemEmoji(domNode.data);
+
+        if (params.highlightRegex) {
+          jsx = highlightText(params.highlightRegex, jsx);
+        }
+
+        if (linkify) {
+          return <Linkify options={params.linkifyOpts}>{jsx}</Linkify>;
+        }
+        return jsx;
+      }
+
+      return undefined;
+    },
+  };
+  return opts;
+};
diff --git a/src/app/styles/CustomHtml.css.ts b/src/app/styles/CustomHtml.css.ts
index 51f841b7..acf2c079 100644
--- a/src/app/styles/CustomHtml.css.ts
+++ b/src/app/styles/CustomHtml.css.ts
@@ -47,7 +47,7 @@ const BaseCode = style({
   border: `${config.borderWidth.B300} solid ${color.SurfaceVariant.ContainerLine}`,
   borderRadius: config.radii.R300,
 });
-const CodeFont = style({
+export const CodeFont = style({
   fontFamily: 'monospace',
 });
 

From 3ea993dcef5e55f9205b16db72108b4fd96b86c9 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 16 Aug 2026 22:07:42 +0530
Subject: [PATCH 077/158] make reply username and content clickable

---
 src/app/components/RenderReplyContent.tsx     |  2 +-
 .../components/message/MsgTypeRenderers.tsx   |  9 +++-
 src/app/components/message/Reply.tsx          | 41 +++++++++++++------
 .../message/content/FallbackContent.tsx       | 10 +++++
 src/app/features/room/RoomTimeline.tsx        |  3 +-
 .../room/thread-view/TimelineView.tsx         |  2 +
 6 files changed, 51 insertions(+), 16 deletions(-)

diff --git a/src/app/components/RenderReplyContent.tsx b/src/app/components/RenderReplyContent.tsx
index f4a85318..0643bccc 100644
--- a/src/app/components/RenderReplyContent.tsx
+++ b/src/app/components/RenderReplyContent.tsx
@@ -46,7 +46,7 @@ export function RenderReplyContent({
   }
 
   if (eventType !== MessageEvent.RoomMessage) {
-    return <UnsupportedContent size="T300" />;
+    return <UnsupportedContent size="T300" eventType={eventType} />;
   }
 
   const msgType = rContent.msgtype(content);
diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index aeb3b721..a1654ecb 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -13,6 +13,7 @@ import {
   MessageBrokenContent,
   MessageDeletedContent,
   MessageEditedContent,
+  UnsupportedMessageEventType,
   MessageUnsupportedContent,
   VideoContent,
 } from './content';
@@ -49,10 +50,14 @@ export function RedactedContent({ size, reason }: RedactedContentProps) {
   );
 }
 
-export function UnsupportedContent({ size }: TextProps) {
+export function UnsupportedContent({ size, eventType }: TextProps & { eventType?: string }) {
   return (
     <Text size={size}>
-      <MessageUnsupportedContent />
+      {eventType ? (
+        <UnsupportedMessageEventType eventType={eventType} />
+      ) : (
+        <MessageUnsupportedContent />
+      )}
     </Text>
   );
 }
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 32c82a33..85088f51 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -57,13 +57,15 @@ export function ReplyMessage({
 
   if (messageLayout === MessageLayout.Compact) {
     return (
-      <CompactLayout before={msgBarJSX} {...commonProps}>
+      <CompactLayout before={msgBarJSX}>
         <Box grow="Yes" direction="Column">
           <Box alignItems="Center" shrink="No" gap="200">
-            <Box shrink="No" style={{ maxWidth: toRem(200) }}>
+            <Box shrink="No" style={{ maxWidth: toRem(100) }}>
               {username}
             </Box>
-            {children}
+            <Box shrink="Yes" {...commonProps}>
+              {children}
+            </Box>
             {time}
           </Box>
         </Box>
@@ -73,12 +75,14 @@ export function ReplyMessage({
 
   if (messageLayout === MessageLayout.Bubble) {
     return (
-      <BubbleLayout hideBubble before={msgBarJSX} {...commonProps}>
+      <BubbleLayout hideBubble before={msgBarJSX}>
         <Box alignItems="Center" shrink="No" gap="200">
-          <Box shrink="No" style={{ maxWidth: toRem(200) }}>
+          <Box shrink="No" style={{ maxWidth: toRem(100) }}>
             {username}
           </Box>
-          {children}
+          <Box shrink="Yes" {...commonProps}>
+            {children}
+          </Box>
           {time}
         </Box>
       </BubbleLayout>
@@ -86,12 +90,14 @@ export function ReplyMessage({
   }
 
   return (
-    <ModernLayout before={msgBarJSX} {...commonProps}>
+    <ModernLayout before={msgBarJSX}>
       <Box alignItems="Center" shrink="No" gap="200">
-        <Box shrink="No" style={{ maxWidth: toRem(200) }}>
+        <Box shrink="No" style={{ maxWidth: toRem(100) }}>
           {username}
         </Box>
-        {children}
+        <Box shrink="Yes" {...commonProps}>
+          {children}
+        </Box>
         {time}
       </Box>
     </ModernLayout>
@@ -102,6 +108,8 @@ type ReplyProps = {
   roomId: string;
   eventId: string;
   onClick?: (replyId: string) => void;
+  onUserClick?: MouseEventHandler<HTMLButtonElement>;
+  onUsernameClick?: MouseEventHandler<HTMLButtonElement>;
   getMemberPowerTag?: GetMemberPowerTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
@@ -114,13 +122,14 @@ type ReplyProps = {
   messageLayout: MessageLayout;
   dateFormatString: string;
   messageSpacing: MessageSpacing;
-  mediaAutoLoad?: boolean;
 };
 
 export function Reply({
   roomId,
   eventId,
   onClick,
+  onUserClick,
+  onUsernameClick,
   getMemberPowerTag,
   accessibleTagColors,
   legacyUsernameColor,
@@ -133,7 +142,6 @@ export function Reply({
   dateFormatString,
   messageLayout,
   messageSpacing,
-  mediaAutoLoad,
 }: ReplyProps) {
   const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
   const replyEvent = useRoomEvent(
@@ -158,7 +166,16 @@ export function Reply({
         messageLayout={messageLayout}
         username={
           sender && (
-            <Text style={{ color: usernameColor }} size="T300" truncate>
+            <Text
+              as="button"
+              onClick={onUsernameClick}
+              onContextMenu={onUserClick}
+              className={HoverUnderline}
+              style={{ color: usernameColor, cursor: 'pointer' }}
+              data-user-id={sender}
+              size="T300"
+              truncate
+            >
               <b>{getMemberName(sender)}</b>
             </Text>
           )
diff --git a/src/app/components/message/content/FallbackContent.tsx b/src/app/components/message/content/FallbackContent.tsx
index 8353ee89..89329b73 100644
--- a/src/app/components/message/content/FallbackContent.tsx
+++ b/src/app/components/message/content/FallbackContent.tsx
@@ -1,5 +1,6 @@
 import { Box, Icon, Icons, Text, as, color, config } from 'folds';
 import React from 'react';
+import { Code } from '../../../styles/CustomHtml.css';
 
 const warningStyle = { color: color.Warning.Main, opacity: config.opacity.P300 };
 const criticalStyle = { color: color.Critical.Main, opacity: config.opacity.P300 };
@@ -24,6 +25,15 @@ export const MessageUnsupportedContent = as<'div', { children?: never }>(({ ...p
   </Box>
 ));
 
+export const UnsupportedMessageEventType = as<'div', { eventType: string; children?: never }>(
+  ({ eventType, ...props }, ref) => (
+    <Box as="span" alignItems="Center" gap="100" {...props} ref={ref}>
+      <Icon size="50" src={Icons.Code} />
+      Unsupported <code className={Code}>{eventType}</code> event
+    </Box>
+  )
+);
+
 export const MessageFailedContent = as<'div', { children?: never }>(({ ...props }, ref) => (
   <Box as="span" alignItems="Center" gap="100" style={criticalStyle} {...props} ref={ref}>
     <Icon size="50" src={Icons.Warning} />
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 6ae19132..eed7f37e 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -496,6 +496,8 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
           roomId={roomId}
           eventId={replyEventId}
           onClick={handleOpenReply}
+          onUserClick={handleUserClick}
+          onUsernameClick={handleUsernameClick}
           getMemberPowerTag={getMemberPowerTag}
           accessibleTagColors={accessiblePowerTagColors}
           legacyUsernameColor={legacyUsernameColor || direct}
@@ -508,7 +510,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
           dateFormatString={dateFormatString}
           messageLayout={messageLayout}
           messageSpacing={messageSpacing}
-          mediaAutoLoad={mediaAutoLoad}
         />
       ) : null;
 
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index e85b5b8d..1bea1a8d 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -392,6 +392,8 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
         roomId={roomId}
         eventId={replyEventId}
         onClick={handleOpenReply}
+        onUserClick={handleUserClick}
+        onUsernameClick={handleUsernameClick}
         getMemberPowerTag={getMemberPowerTag}
         accessibleTagColors={accessiblePowerTagColors}
         legacyUsernameColor={legacyUsernameColor || direct}

From bec63c409bea1da5bccbffb2785bd5748a98c8cd Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 16 Aug 2026 22:18:04 +0530
Subject: [PATCH 078/158] fix link click in reply

---
 src/app/components/message/Reply.tsx                | 13 ++++++++++++-
 .../components/message/content/FallbackContent.tsx  |  2 +-
 2 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 85088f51..e695bc77 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -44,11 +44,22 @@ export function ReplyMessage({
     }
   };
 
+  const handleClick: MouseEventHandler = (evt) => {
+    const target = evt.target as HTMLElement;
+
+    if (target.closest('a')) {
+      evt.stopPropagation();
+      return;
+    }
+
+    onClick?.();
+  };
+
   const commonProps = onClick
     ? {
         role: 'button' as const,
         tabIndex: 0,
-        onClick,
+        onClick: handleClick,
         onKeyDown: handleKeyDown,
         className: HoverUnderline,
         style: { cursor: 'pointer' },
diff --git a/src/app/components/message/content/FallbackContent.tsx b/src/app/components/message/content/FallbackContent.tsx
index 89329b73..a4326e22 100644
--- a/src/app/components/message/content/FallbackContent.tsx
+++ b/src/app/components/message/content/FallbackContent.tsx
@@ -29,7 +29,7 @@ export const UnsupportedMessageEventType = as<'div', { eventType: string; childr
   ({ eventType, ...props }, ref) => (
     <Box as="span" alignItems="Center" gap="100" {...props} ref={ref}>
       <Icon size="50" src={Icons.Code} />
-      Unsupported <code className={Code}>{eventType}</code> event
+      Sent <code className={Code}>{eventType}</code> event
     </Box>
   )
 );

From 599e9383535940819497684529bb34df7c8e00c9 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 17 Aug 2026 12:05:45 +0530
Subject: [PATCH 079/158] fix typo in main timeline jumpToEvent

---
 src/client/room/Timeline.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/room/Timeline.ts b/src/client/room/Timeline.ts
index 9b9ae165..b98a82c7 100644
--- a/src/client/room/Timeline.ts
+++ b/src/client/room/Timeline.ts
@@ -262,7 +262,7 @@ export class Timeline implements TimelineView, Disposable {
     if (err) {
       throw new Error(printMatrixError(err));
     }
-    const { event, events_after: before, events_after: after, start, end } = result;
+    const { event, events_before: before, events_after: after, start, end } = result;
     if (!event) {
       throw new Error(
         `Failed to jump to event! No event found for ${eventId} in room ${this.roomId}`

From bb013ef29ea5b98ee83edc96235da716a16ccba2 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 17 Aug 2026 14:59:55 +0530
Subject: [PATCH 080/158] jump to latest using empty timeline and back
 pagination to prevent live message lost

---
 src/client/room/ThreadTimeline.ts       |  9 +--------
 src/client/room/Timeline.ts             | 11 +----------
 src/client/room/TimelineBatchManager.ts |  4 ++++
 3 files changed, 6 insertions(+), 18 deletions(-)

diff --git a/src/client/room/ThreadTimeline.ts b/src/client/room/ThreadTimeline.ts
index 582247be..3cd05844 100644
--- a/src/client/room/ThreadTimeline.ts
+++ b/src/client/room/ThreadTimeline.ts
@@ -288,15 +288,8 @@ export class ThreadTimeline implements TimelineView, Disposable {
       this.range.setRange(MessageRange.atLiveEnd(this.batch.read.size));
       return;
     }
-    const [err, result] = await this.getMessages(undefined, 'b', 80);
 
-    if (err) {
-      throw new Error(printMatrixError(err));
-    }
-
-    const { next_batch: prevToken, prev_batch: endToken, chunk } = result;
-    const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(chunk);
-    this.batchManager.loadEvents(messageEvents, prevToken, endToken);
+    this.batchManager.reload(MessageBatch.emptyAtForwardEnd());
   }
 
   public findEvent(eventId: string): MessageEventWithoutRoomId | undefined {
diff --git a/src/client/room/Timeline.ts b/src/client/room/Timeline.ts
index b98a82c7..f3f63468 100644
--- a/src/client/room/Timeline.ts
+++ b/src/client/room/Timeline.ts
@@ -281,17 +281,8 @@ export class Timeline implements TimelineView, Disposable {
       this.range.setRange(MessageRange.atLiveEnd(this.batch.read.size));
       return;
     }
-    const [err, result] = await this.getMessages(undefined, 'b', 80);
 
-    if (err) {
-      throw new Error(printMatrixError(err));
-    }
-
-    const { end: prevToken, start: endToken, chunk } = result;
-    const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(chunk);
-
-    this.pickThreads(messageEvents);
-    this.batchManager.loadEvents(messageEvents, prevToken, endToken);
+    this.batchManager.reload(MessageBatch.emptyAtForwardEnd());
   }
 
   public findEvent(eventId: string): MessageEventWithoutRoomId | undefined {
diff --git a/src/client/room/TimelineBatchManager.ts b/src/client/room/TimelineBatchManager.ts
index 61203c00..61a72a82 100644
--- a/src/client/room/TimelineBatchManager.ts
+++ b/src/client/room/TimelineBatchManager.ts
@@ -126,4 +126,8 @@ export class TimelineBatchManager {
 
     this.batch.publish(this.publishKey, newBatch);
   }
+
+  public reload(batch: MessageBatch) {
+    this.batch.publish(this.publishKey, batch);
+  }
 }

From feb29924d24fb49a16d8d9636e612dc798a82c10 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 17 Aug 2026 15:03:31 +0530
Subject: [PATCH 081/158] fix formatting

---
 src/app/hooks/useVirtualPaginator.ts | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/src/app/hooks/useVirtualPaginator.ts b/src/app/hooks/useVirtualPaginator.ts
index 1200e153..ffd66963 100644
--- a/src/app/hooks/useVirtualPaginator.ts
+++ b/src/app/hooks/useVirtualPaginator.ts
@@ -177,21 +177,13 @@ export const useVirtualPaginator = <TScrollElement extends HTMLElement>(
     opts?: ScrollToOptions;
   }>();
 
-  const propRef = useRef({
-    range,
-    limit,
-    count,
-  });
+  const propRef = useRef({ range, limit, count });
   if (propRef.current.count !== count) {
     // Clear restoreScrollRef on count change
     // As restoreScrollRef.current.anchorItem might changes
     restoreScrollRef.current = undefined;
   }
-  propRef.current = {
-    range,
-    count,
-    limit,
-  };
+  propRef.current = { range, count, limit };
 
   const getItems = useMemo(() => {
     const items = generateItems(range);

From bd2d56542275bd1db47a72c19de9adcbd3ec8f1a Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 18 Aug 2026 09:39:29 +0530
Subject: [PATCH 082/158] wip - fix jump to unread

---
 src/app/components/message/Reply.tsx          |  3 +
 src/app/features/room/RoomTimeline.tsx        | 82 ++++++++++---------
 .../room/components/TimelineFloat.tsx         | 34 +++++++-
 .../room/thread-view/TimelineView.tsx         | 14 +++-
 4 files changed, 93 insertions(+), 40 deletions(-)

diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index e695bc77..a3b9c39d 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -194,6 +194,9 @@ export function Reply({
         time={
           replyEvent && (
             <Time
+              as="button"
+              className={HoverUnderline}
+              onClick={onClick ? () => onClick(eventId) : undefined}
               ts={replyEvent.origin_server_ts}
               dateFormatString={dateFormatString}
               hour24Clock={hour24Clock}
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index eed7f37e..5817ba8c 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -63,7 +63,13 @@ import {
 import { RoomViewTyping } from './RoomViewTyping';
 import { rContent } from '../../../client/reader';
 import { ThreadSelector } from './message/thread-selector';
-import { TimelineFloat, JumpToLatestButton, ComboDivider, PlaceholderList } from './components';
+import {
+  TimelineFloat,
+  JumpToLatestButton,
+  ComboDivider,
+  PlaceholderList,
+  UnreadControls,
+} from './components';
 import { OutboxView } from './OutboxView';
 import { EncryptedMessageEvent } from '../../components/encrypted-event';
 import { useUserReadReceipt } from '../../hooks/useReadReceipt';
@@ -165,8 +171,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const localEventSenders = useObservableValue(timeline.outbox.senders);
   const { events } = messageBatch.messages;
 
-  window.t = timeline;
-
   const range = useObservableValue(timeline.range.info);
   const rangeAtStart = range.start === 0;
   const rangeAtEnd = range.end === messageBatch.size;
@@ -255,20 +259,41 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const stickToBottom = useCallback(() => {
     if (!atBottom) return;
 
-    setTimeout(() => {
-      const scrollEl = getScrollElement();
-      if (scrollEl) {
-        scrollToBottom(scrollEl, 'smooth');
-      }
-    }, 100);
+    // setTimeout(() => {
+    //   const scrollEl = getScrollElement();
+    //   if (scrollEl) {
+    //     scrollToBottom(scrollEl, 'smooth');
+    //   }
+    // }, 100);
   }, [getScrollElement, atBottom]);
 
   useObservableValueListener(timeline.outbox.senders, stickToBottom);
   useObservableValueListener(timeline.range.info, stickToBottom);
 
-  const handleOpenReply = useCallback((replyId: string) => {
-    console.log(replyId);
-  }, []);
+  const handleOpenReply = useCallback(
+    (replyId: string) => {
+      const replyIndex = timeline.batch.read.messages.events.findIndex(
+        (e) => e.event_id === replyId
+      );
+      console.log(replyIndex);
+      if (replyIndex > -1) {
+        scrollToItem(replyIndex, {
+          behavior: 'smooth',
+          align: 'center',
+          stopInView: true,
+        });
+        setFocusItem({
+          index: replyIndex,
+          scrollTo: false,
+          highlight: true,
+        });
+
+        return;
+      }
+      timeline.jumpToEvent(replyId);
+    },
+    [scrollToItem, timeline]
+  );
 
   const handleUserClick = useUserClickHandler();
   const handleUsernameClick = useUsernameClickHandler(editor);
@@ -277,6 +302,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const handleReactionToggle = useCallback((targetEventId: string) => {
     console.log(targetEventId);
   }, []);
+
   const handleEdit = useCallback(
     (editEvtId?: string) => {
       if (editEvtId) {
@@ -304,9 +330,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     [timeline]
   );
 
-  console.log('========> RoomTimeline');
-  console.log(range, events.length);
-
   let threadSeries: MessageEventWithoutRoomId[] = [];
   const renderMatrixEvent = (event: MessageEventWithoutRoomId, item: number, collapse: boolean) => {
     const reactionEvents = reactions.get(event.event_id)?.filter((r) => !redacted.has(r.event_id));
@@ -524,29 +547,12 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
 
   return (
     <Box grow="Yes" style={{ position: 'relative' }}>
-      {/* {unreadInfo?.readUptoEventId && !unreadInfo?.inLiveTimeline && (
-        <TimelineFloat position="Top">
-          <Chip
-            variant="Primary"
-            radii="Pill"
-            outlined
-            before={<Icon size="50" src={Icons.MessageUnread} />}
-            onClick={handleJumpToUnread}
-          >
-            <Text size="L400">Jump to Unread</Text>
-          </Chip>
-
-          <Chip
-            variant="SurfaceVariant"
-            radii="Pill"
-            outlined
-            before={<Icon size="50" src={Icons.CheckTwice} />}
-            onClick={handleMarkAsRead}
-          >
-            <Text size="L400">Mark as Read</Text>
-          </Chip>
-        </TimelineFloat>
-      )} */}
+      {readReceipt && (
+        <UnreadControls
+          onJumpToUnread={() => timeline.jumpToEvent(readReceipt.eventId)}
+          onMarkAsRead={() => undefined}
+        />
+      )}
       <Scroll ref={scrollRef} visibility="Hover">
         <Box
           direction="Column"
diff --git a/src/app/features/room/components/TimelineFloat.tsx b/src/app/features/room/components/TimelineFloat.tsx
index c39c1de6..bc9c4c58 100644
--- a/src/app/features/room/components/TimelineFloat.tsx
+++ b/src/app/features/room/components/TimelineFloat.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { as, Box } from 'folds';
+import { as, Box, Chip, Icon, Icons, Text } from 'folds';
 import classNames from 'classnames';
 import * as css from './styles.css';
 
@@ -15,3 +15,35 @@ export const TimelineFloat = as<'div', css.TimelineFloatVariants>(
     />
   )
 );
+
+type UnreadControlsProps = {
+  onJumpToUnread?: () => void;
+  onMarkAsRead: () => void;
+};
+export function UnreadControls({ onJumpToUnread, onMarkAsRead }: UnreadControlsProps) {
+  return (
+    <TimelineFloat position="Top">
+      {onJumpToUnread && (
+        <Chip
+          variant="Primary"
+          radii="Pill"
+          outlined
+          before={<Icon size="50" src={Icons.MessageUnread} />}
+          onClick={onJumpToUnread}
+        >
+          <Text size="L400">Jump to Unread</Text>
+        </Chip>
+      )}
+
+      <Chip
+        variant="SurfaceVariant"
+        radii="Pill"
+        outlined
+        before={<Icon size="50" src={Icons.CheckTwice} />}
+        onClick={onMarkAsRead}
+      >
+        <Text size="L400">Mark as Read</Text>
+      </Chip>
+    </TimelineFloat>
+  );
+}
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index 1bea1a8d..c485e28f 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -60,7 +60,13 @@ import {
 } from '../hooks/useTimeline';
 import { rContent } from '../../../../client/reader';
 import { useEditor } from '../../../components/editor';
-import { TimelineFloat, JumpToLatestButton, ComboDivider, PlaceholderList } from '../components';
+import {
+  TimelineFloat,
+  JumpToLatestButton,
+  ComboDivider,
+  PlaceholderList,
+  UnreadControls,
+} from '../components';
 import { OutboxView } from '../OutboxView';
 import { useUserReadReceipt } from '../../../hooks/useReadReceipt';
 import { useMessageParserOptions } from '../../../hooks/useMessageParserOptions';
@@ -420,6 +426,12 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
 
   return (
     <Box grow="Yes" style={{ position: 'relative' }}>
+      {readReceipt && (
+        <UnreadControls
+          onJumpToUnread={() => threadTimeline.jumpToEvent(readReceipt.eventId)}
+          onMarkAsRead={() => undefined}
+        />
+      )}
       <Scroll ref={scrollRef} size="0" visibility="Hover" hideTrack>
         <Box direction="Column" style={{ minHeight: '100%' }}>
           <Box

From ab9a4089bb3a8b9fd5c439baf738732b790d611c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 18 Aug 2026 11:03:01 +0530
Subject: [PATCH 083/158] make edited and redacted message work in replies

---
 src/app/components/MessageContent.tsx         | 40 +++++++++
 .../encrypted-event/EncryptedEvent.tsx        |  8 +-
 src/app/components/message/Reply.tsx          | 89 +++++++++++++------
 src/app/features/room/OutboxView.tsx          |  6 +-
 src/app/features/room/RoomTimeline.tsx        | 70 ++++++---------
 .../room/thread-view/TimelineView.tsx         | 61 ++++++-------
 .../room/relations/RelationsProcessor.ts      |  8 +-
 src/client/room/relations/utils.ts            | 13 ++-
 8 files changed, 182 insertions(+), 113 deletions(-)
 create mode 100644 src/app/components/MessageContent.tsx

diff --git a/src/app/components/MessageContent.tsx b/src/app/components/MessageContent.tsx
new file mode 100644
index 00000000..336a9bbd
--- /dev/null
+++ b/src/app/components/MessageContent.tsx
@@ -0,0 +1,40 @@
+import React from 'react';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { DecryptionManager } from '../../client/decryption';
+import { MessageEvent } from '../../types/matrix/room';
+import { EncryptedMessageEvent } from './encrypted-event';
+
+type MessageContentProps = {
+  event: MessageEventWithoutRoomId;
+  editedEvent?: MessageEventWithoutRoomId;
+  roomId: string;
+  decryptionManager: DecryptionManager;
+  reply?: boolean;
+  children: (event: MessageEventWithoutRoomId) => React.ReactNode;
+};
+
+export function MessageContent({
+  event,
+  editedEvent,
+  roomId,
+  decryptionManager,
+  reply,
+  children,
+}: MessageContentProps) {
+  const effectiveEvent = editedEvent ?? event;
+
+  if (effectiveEvent.type === MessageEvent.RoomMessageEncrypted) {
+    return (
+      <EncryptedMessageEvent
+        roomId={roomId}
+        decryptionManager={decryptionManager}
+        event={effectiveEvent}
+        reply={reply}
+      >
+        {(decryptedEvent) => children(decryptedEvent)}
+      </EncryptedMessageEvent>
+    );
+  }
+
+  return children(effectiveEvent);
+}
diff --git a/src/app/components/encrypted-event/EncryptedEvent.tsx b/src/app/components/encrypted-event/EncryptedEvent.tsx
index 692aa725..9c160aeb 100644
--- a/src/app/components/encrypted-event/EncryptedEvent.tsx
+++ b/src/app/components/encrypted-event/EncryptedEvent.tsx
@@ -43,12 +43,14 @@ type EncryptedMessageEventProps = {
   decryptionManager: DecryptionManager;
   roomId: string;
   event: MessageEventWithoutRoomId;
+  reply?: boolean;
   children: (decryptedEvent: MessageEventWithoutRoomId) => ReactNode;
 };
 export function EncryptedMessageEvent({
   decryptionManager,
   roomId,
   event,
+  reply,
   children,
 }: EncryptedMessageEventProps) {
   const encryptedEvent = decryptionManager.decryptableMessageEvent(roomId, event);
@@ -59,7 +61,7 @@ export function EncryptedMessageEvent({
 
   if (decryption instanceof EventDecryptionIdle) {
     return (
-      <Text>
+      <Text size={reply ? 'T300' : 'T400'} truncate={reply}>
         <MessageDecryptionIdle />
       </Text>
     );
@@ -67,7 +69,7 @@ export function EncryptedMessageEvent({
 
   if (decryption instanceof EventDecryptionPending) {
     return (
-      <Text>
+      <Text size={reply ? 'T300' : 'T400'} truncate={reply}>
         <MessageDecryptionPending />
       </Text>
     );
@@ -81,7 +83,7 @@ export function EncryptedMessageEvent({
 
   if (cause) {
     return (
-      <Text>
+      <Text size={reply ? 'T300' : 'T400'} truncate={reply}>
         <MessageDecryptionError
           message={
             cause instanceof Error
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index a3b9c39d..00f1971b 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -1,16 +1,17 @@
 import { Box, Text, color, config, toRem } from 'folds';
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
+import { ClientEventWithoutRoomId } from 'neurone/lib/api/types';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
 import { LinePlaceholder } from './placeholder';
 import { randomNumberBetween } from '../../utils/common';
 import * as css from './Reply.css';
-import { MessageBadEncryptedContent } from './content';
+import { MessageFailedContent } from './content';
 import { useRoomEvent } from '../../hooks/useRoomEvent';
 import colorMXID from '../../../util/colorMXID';
 import { GetMemberPowerTag } from '../../hooks/useMemberPowerTag';
 import { GetRoomMemberNameCallback } from '../../hooks/useRoomMembers';
-import { rUnsigned } from '../../../client/reader';
+import { rContent, rUnsigned } from '../../../client/reader';
 import { TimelineView } from '../../../client/room';
 import { RenderReplyContent } from '../RenderReplyContent';
 import { Time } from './Time';
@@ -18,6 +19,11 @@ import { BubbleLayout, CompactLayout, MessageBase, ModernLayout } from './layout
 import { MessageLayout, MessageSpacing } from '../../state/settings';
 import { RedactedContent } from './MsgTypeRenderers';
 import { HoverUnderline } from '../../styles/Text.css';
+import { useObservableValueOptionally } from '../../hooks/useObservableValue';
+import { getLatestEditEvent } from '../../utils/room';
+import { replaced } from '../../../client/room/relations';
+import { MessageContent } from '../MessageContent';
+import { useClient } from '../../hooks/useClient';
 
 type ReplyMessageProps = {
   username?: ReactNode;
@@ -125,7 +131,6 @@ type ReplyProps = {
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
   getMemberName: GetRoomMemberNameCallback;
-  redacted: boolean;
   timeline?: TimelineView;
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: Opts;
@@ -145,7 +150,6 @@ export function Reply({
   accessibleTagColors,
   legacyUsernameColor,
   getMemberName,
-  redacted,
   timeline,
   htmlReactParserOptions,
   linkifyOpts,
@@ -154,7 +158,12 @@ export function Reply({
   messageLayout,
   messageSpacing,
 }: ReplyProps) {
+  const ct = useClient();
   const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
+
+  const redactedEvents = useObservableValueOptionally(timeline?.relations.redacted);
+  const edits = useObservableValueOptionally(timeline?.relations.edits.eventToRelations);
+
   const replyEvent = useRoomEvent(
     roomId,
     eventId,
@@ -167,9 +176,50 @@ export function Reply({
 
   const usernameColor = legacyUsernameColor ? colorMXID(sender ?? eventId) : tagColor;
 
-  const redactedEvent = redacted || !!rUnsigned.redactedBecause(replyEvent?.unsigned);
+  const redacted =
+    redactedEvents?.has(eventId) || !!rUnsigned.redactedBecause(replyEvent?.unsigned);
+
+  const renderEventContent = (event: ClientEventWithoutRoomId) => {
+    const aggregatedEdit = replaced(event);
+    const editEvents = edits?.get(eventId);
+
+    const editedEvent =
+      editEvents && redactedEvents
+        ? getLatestEditEvent(
+            event.sender,
+            aggregatedEdit ? [aggregatedEdit, ...editEvents] : editEvents,
+            redactedEvents
+          )
+        : undefined;
+
+    return (
+      <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }} as="div">
+        {redacted ? (
+          <RedactedContent size="T300" />
+        ) : (
+          <MessageContent
+            event={event}
+            editedEvent={editedEvent}
+            roomId={roomId}
+            decryptionManager={ct.decryption}
+            reply
+          >
+            {(contentEvent) => (
+              <RenderReplyContent
+                displayName={getMemberName(event.sender)}
+                eventType={event.type}
+                edited={!!editedEvent}
+                content={rContent.newContent(contentEvent.content) ?? contentEvent.content}
+                htmlReactParserOptions={htmlReactParserOptions}
+                linkifyOpts={linkifyOpts}
+              />
+            )}
+          </MessageContent>
+        )}
+      </Box>
+    );
+  };
 
-  // TODO: make edit message appear in reply
   return (
     <MessageBase space={messageSpacing}>
       <ReplyMessage
@@ -205,26 +255,13 @@ export function Reply({
         }
         data-event-id={eventId}
       >
-        {replyEvent !== undefined ? (
-          <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }} as="div">
-            {redactedEvent && <RedactedContent size="T300" />}
-            {!redactedEvent &&
-              (replyEvent === null ? (
-                <Text size="B300">
-                  <MessageBadEncryptedContent />
-                </Text>
-              ) : (
-                <RenderReplyContent
-                  displayName={getMemberName(replyEvent.sender)}
-                  eventType={replyEvent.type}
-                  edited={false} // TODO:
-                  content={replyEvent.content}
-                  htmlReactParserOptions={htmlReactParserOptions}
-                  linkifyOpts={linkifyOpts}
-                />
-              ))}
-          </Box>
-        ) : (
+        {replyEvent && renderEventContent(replyEvent)}
+        {replyEvent === null && (
+          <Text size="T300">
+            <MessageFailedContent />
+          </Text>
+        )}
+        {replyEvent === undefined && (
           <LinePlaceholder
             style={{
               backgroundColor: color.SurfaceVariant.ContainerActive,
diff --git a/src/app/features/room/OutboxView.tsx b/src/app/features/room/OutboxView.tsx
index a6be39dc..caa99020 100644
--- a/src/app/features/room/OutboxView.tsx
+++ b/src/app/features/room/OutboxView.tsx
@@ -212,7 +212,6 @@ function MessageSending({
 export function OutboxView({
   messageBatch,
   senders,
-  redacted,
   messageLayout,
   messageSpacing,
   membersAPI,
@@ -231,7 +230,6 @@ export function OutboxView({
 }: {
   messageBatch: MessageBatch;
   senders: readonly LocalEventSender[];
-  redacted: Set<string>;
   messageLayout: MessageLayout;
   messageSpacing: MessageSpacing;
   membersAPI: RoomMembersAPI;
@@ -244,7 +242,7 @@ export function OutboxView({
   urlPreview?: boolean;
   hour24Clock: boolean;
   dateFormatString: string;
-  onReplyClick?: MouseEventHandler | undefined;
+  onReplyClick?: () => void;
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: Opts;
 }) {
@@ -290,7 +288,6 @@ export function OutboxView({
             getMemberPowerTag={getMemberPowerTag}
             accessibleTagColors={accessibleTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
-            redacted={redacted.has(replyEventId)}
             getMemberName={membersAPI.getName}
             timeline={timeline}
             htmlReactParserOptions={htmlReactParserOptions}
@@ -299,7 +296,6 @@ export function OutboxView({
             dateFormatString={dateFormatString}
             messageLayout={messageLayout}
             messageSpacing={messageSpacing}
-            mediaAutoLoad={mediaAutoLoad}
           />
         );
 
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 5817ba8c..b2d5afbd 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -71,9 +71,9 @@ import {
   UnreadControls,
 } from './components';
 import { OutboxView } from './OutboxView';
-import { EncryptedMessageEvent } from '../../components/encrypted-event';
 import { useUserReadReceipt } from '../../hooks/useReadReceipt';
 import { useMessageParserOptions } from '../../hooks/useMessageParserOptions';
+import { MessageContent } from '../../components/MessageContent';
 
 type RoomTimelineProps = {
   eventId?: string;
@@ -413,47 +413,31 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
         hour24Clock={hour24Clock}
         dateFormatString={dateFormatString}
       >
-        {redacted.has(event.event_id) && <RedactedContent />}
-        {!redacted.has(event.event_id) &&
-          ((editedEvent ?? event).type === MessageEvent.RoomMessageEncrypted ? (
-            <EncryptedMessageEvent
-              roomId={roomId}
-              decryptionManager={ct.decryption}
-              event={editedEvent ?? event}
-            >
-              {(decryptedEvent) => (
-                <RenderMessageContent
-                  displayName={membersAPI.getName(event.sender)}
-                  eventType={decryptedEvent.type}
-                  ts={event.origin_server_ts}
-                  edited={!!editedEvent}
-                  content={rContent.newContent(decryptedEvent.content) ?? decryptedEvent.content}
-                  mediaAutoLoad={mediaAutoLoad}
-                  urlPreview={showUrlPreview}
-                  htmlReactParserOptions={htmlReactParserOptions}
-                  linkifyOpts={linkifyOpts}
-                  outlineAttachment={messageLayout === MessageLayout.Bubble}
-                />
-              )}
-            </EncryptedMessageEvent>
-          ) : (
-            <RenderMessageContent
-              displayName={membersAPI.getName(event.sender)}
-              eventType={event.type}
-              ts={event.origin_server_ts}
-              edited={!!editedEvent}
-              content={
-                editedEvent
-                  ? rContent.newContent(editedEvent.content) ?? editedEvent.content
-                  : event.content
-              }
-              mediaAutoLoad={mediaAutoLoad}
-              urlPreview={showUrlPreview}
-              htmlReactParserOptions={htmlReactParserOptions}
-              linkifyOpts={linkifyOpts}
-              outlineAttachment={messageLayout === MessageLayout.Bubble}
-            />
-          ))}
+        {redacted.has(event.event_id) ? (
+          <RedactedContent />
+        ) : (
+          <MessageContent
+            event={event}
+            editedEvent={editedEvent}
+            roomId={roomId}
+            decryptionManager={ct.decryption}
+          >
+            {(contentEvent) => (
+              <RenderMessageContent
+                displayName={membersAPI.getName(event.sender)}
+                eventType={contentEvent.type}
+                ts={event.origin_server_ts}
+                edited={!!editedEvent}
+                content={rContent.newContent(contentEvent.content) ?? contentEvent.content}
+                mediaAutoLoad={mediaAutoLoad}
+                urlPreview={showUrlPreview}
+                htmlReactParserOptions={htmlReactParserOptions}
+                linkifyOpts={linkifyOpts}
+                outlineAttachment={messageLayout === MessageLayout.Bubble}
+              />
+            )}
+          </MessageContent>
+        )}
         {reactionJSX}
         {threadTimeline && (
           <ThreadSelector
@@ -524,7 +508,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
           getMemberPowerTag={getMemberPowerTag}
           accessibleTagColors={accessiblePowerTagColors}
           legacyUsernameColor={legacyUsernameColor || direct}
-          redacted={redacted.has(replyEventId)}
           getMemberName={membersAPI.getName}
           timeline={timeline}
           htmlReactParserOptions={htmlReactParserInlineOptions}
@@ -596,7 +579,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
                 senders={localEventSenders}
                 messageBatch={messageBatch}
                 membersAPI={membersAPI}
-                redacted={redacted}
                 messageLayout={messageLayout}
                 messageSpacing={messageSpacing}
                 onUserClick={handleUserClick}
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index c485e28f..89fc9836 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -1,12 +1,4 @@
-import React, {
-  MouseEventHandler,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ReactEditor } from 'slate-react';
 import { Box, Scroll, Text, config } from 'folds';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
@@ -18,6 +10,7 @@ import {
   CompactPlaceholder,
   Reply,
   DividerTime,
+  RedactedContent,
 } from '../../../components/message';
 import { fallbackReply, getLatestEditEvent, getReplyId } from '../../../utils/room';
 import { useSetting } from '../../../state/hooks/settings';
@@ -70,6 +63,7 @@ import {
 import { OutboxView } from '../OutboxView';
 import { useUserReadReceipt } from '../../../hooks/useReadReceipt';
 import { useMessageParserOptions } from '../../../hooks/useMessageParserOptions';
+import { MessageContent } from '../../../components/MessageContent';
 
 type TimelineViewProps = {
   threadTimeline: ThreadTimeline;
@@ -93,7 +87,6 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
   const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
   const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
   const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
-  const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
   const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
 
   const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
@@ -294,11 +287,6 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
       />
     );
 
-    const content = editedEvent
-      ? rContent.newContent(editedEvent.content) ?? event.content
-      : event.content;
-
-    // FIXME: Redacted message
     return (
       <Message
         key={event.event_id}
@@ -332,18 +320,31 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
         hour24Clock={hour24Clock}
         dateFormatString={dateFormatString}
       >
-        <RenderMessageContent
-          displayName={membersAPI.getName(event.sender)}
-          eventType={event.type}
-          ts={event.origin_server_ts}
-          edited={!!editedEvent}
-          content={content}
-          mediaAutoLoad={mediaAutoLoad}
-          urlPreview={showUrlPreview}
-          htmlReactParserOptions={htmlReactParserOptions}
-          linkifyOpts={linkifyOpts}
-          outlineAttachment={messageLayout === MessageLayout.Bubble}
-        />
+        {redacted.has(event.event_id) ? (
+          <RedactedContent />
+        ) : (
+          <MessageContent
+            event={event}
+            editedEvent={editedEvent}
+            roomId={roomId}
+            decryptionManager={ct.decryption}
+          >
+            {(contentEvent) => (
+              <RenderMessageContent
+                displayName={membersAPI.getName(event.sender)}
+                eventType={contentEvent.type}
+                ts={event.origin_server_ts}
+                edited={!!editedEvent}
+                content={rContent.newContent(contentEvent.content) ?? contentEvent.content}
+                mediaAutoLoad={mediaAutoLoad}
+                urlPreview={showUrlPreview}
+                htmlReactParserOptions={htmlReactParserOptions}
+                linkifyOpts={linkifyOpts}
+                outlineAttachment={messageLayout === MessageLayout.Bubble}
+              />
+            )}
+          </MessageContent>
+        )}
         {reactionJSX}
       </Message>
     );
@@ -363,10 +364,6 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
     if (event.sender && ignoredUsersSet.has(event.sender)) {
       return null;
     }
-    // FIXME: dont hide redacted event for threads
-    if (redacted.has(event.event_id) && !showHiddenEvents) {
-      return null;
-    }
 
     const newDivider = getNewDivider(event) && event.sender !== ct.session.userId;
     const dayDivider = getDayDivider(event);
@@ -403,7 +400,6 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
         getMemberPowerTag={getMemberPowerTag}
         accessibleTagColors={accessiblePowerTagColors}
         legacyUsernameColor={legacyUsernameColor || direct}
-        redacted={redacted.has(replyEventId)}
         getMemberName={membersAPI.getName}
         timeline={threadTimeline}
         htmlReactParserOptions={htmlReactParserInlineOptions}
@@ -495,7 +491,6 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
                 senders={localEventSenders}
                 messageBatch={messageBatch}
                 membersAPI={membersAPI}
-                redacted={redacted}
                 messageLayout={messageLayout}
                 messageSpacing={messageSpacing}
                 onUserClick={handleUserClick}
diff --git a/src/client/room/relations/RelationsProcessor.ts b/src/client/room/relations/RelationsProcessor.ts
index 49925762..d25b55e9 100644
--- a/src/client/room/relations/RelationsProcessor.ts
+++ b/src/client/room/relations/RelationsProcessor.ts
@@ -4,7 +4,7 @@ import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
 import { MessageEvent } from '../../../types/matrix/room';
 import { Relations } from './Relations';
 import { RelationType, ReactionContent } from '../../../types/matrix/common';
-import { getRedactedEventId, redacted, reference, relation, replacement } from './utils';
+import { getRedactedEventId, redacted, reference, relation, replaced, replacement } from './utils';
 
 export class RelationsProcessor implements Disposable {
   private readonly publishKey = crypto.randomUUID();
@@ -64,6 +64,12 @@ export class RelationsProcessor implements Disposable {
         redactedEvents.push(event.event_id);
       }
 
+      // Check if event itself has replacement
+      const replacedWith = replaced(event);
+      if (replacedWith) {
+        editEvents.push(event);
+      }
+
       // Handle relation events
       if (relation(event)) {
         if (event.type === MessageEvent.Reaction) {
diff --git a/src/client/room/relations/utils.ts b/src/client/room/relations/utils.ts
index cf3e6801..028492f2 100644
--- a/src/client/room/relations/utils.ts
+++ b/src/client/room/relations/utils.ts
@@ -1,5 +1,5 @@
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
-import { rContent, rUnsigned, rEvent, rRelatesTo } from '../../reader';
+import { rContent, rUnsigned, rEvent, rRelatesTo, rRelations } from '../../reader';
 import { RelationType } from '../../../types/matrix/common';
 
 export const getRedactedEventId = (event: MessageEventWithoutRoomId): string | undefined => {
@@ -14,6 +14,17 @@ export const redacted = (event: MessageEventWithoutRoomId): boolean => {
   return rUnsigned.redactedBecause(unsigned) !== undefined;
 };
 
+export const replaced = (
+  event: MessageEventWithoutRoomId
+): MessageEventWithoutRoomId | undefined => {
+  const { unsigned } = event;
+
+  const relations = rUnsigned.relations(unsigned);
+  const replacementEvent = rRelations.replace(relations);
+
+  return replacementEvent as MessageEventWithoutRoomId | undefined;
+};
+
 export const relation = (event: MessageEventWithoutRoomId): boolean =>
   rRelatesTo.relType(rContent.relatesTo(event.content)) !== undefined;
 

From ae0fad21bfd363dd8825392a31547c6540d52495 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 18 Aug 2026 11:08:58 +0530
Subject: [PATCH 084/158] fix sending message reply spacing

---
 src/app/features/room/OutboxView.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room/OutboxView.tsx b/src/app/features/room/OutboxView.tsx
index caa99020..90398e57 100644
--- a/src/app/features/room/OutboxView.tsx
+++ b/src/app/features/room/OutboxView.tsx
@@ -111,6 +111,7 @@ function MessageSendingError({
 type MessageSendingProps = {
   outbox: LocalEventOutbox;
   sender: LocalEventSender;
+  hasReply?: boolean;
   collapse: boolean;
   messageLayout: MessageLayout;
   messageSpacing: MessageSpacing;
@@ -127,6 +128,7 @@ type MessageSendingProps = {
 function MessageSending({
   outbox,
   sender,
+  hasReply,
   collapse,
   messageLayout,
   messageSpacing,
@@ -152,7 +154,7 @@ function MessageSending({
       })}
       tabIndex={0}
       space={messageSpacing}
-      collapse={collapse}
+      collapse={collapse || hasReply}
     >
       <RenderMessageLayout
         avatar={
@@ -312,6 +314,7 @@ export function OutboxView({
               membersAPI={membersAPI}
               messageSpacing={messageSpacing}
               messageLayout={messageLayout}
+              hasReply={!!replyEventId}
               collapse={collapse}
               onUserClick={onUserClick}
               onUsernameClick={onUsernameClick}

From b33deb36c83f449c66131adad14c4800837e9603 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 18 Aug 2026 14:54:15 +0530
Subject: [PATCH 085/158] fix reply text align

---
 src/app/components/message/Reply.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index 00f1971b..a568fc54 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -76,7 +76,7 @@ export function ReplyMessage({
     return (
       <CompactLayout before={msgBarJSX}>
         <Box grow="Yes" direction="Column">
-          <Box alignItems="Center" shrink="No" gap="200">
+          <Box alignItems="Baseline" shrink="No" gap="200">
             <Box shrink="No" style={{ maxWidth: toRem(100) }}>
               {username}
             </Box>
@@ -93,7 +93,7 @@ export function ReplyMessage({
   if (messageLayout === MessageLayout.Bubble) {
     return (
       <BubbleLayout hideBubble before={msgBarJSX}>
-        <Box alignItems="Center" shrink="No" gap="200">
+        <Box alignItems="Baseline" shrink="No" gap="200">
           <Box shrink="No" style={{ maxWidth: toRem(100) }}>
             {username}
           </Box>
@@ -108,7 +108,7 @@ export function ReplyMessage({
 
   return (
     <ModernLayout before={msgBarJSX}>
-      <Box alignItems="Center" shrink="No" gap="200">
+      <Box alignItems="Baseline" shrink="No" gap="200">
         <Box shrink="No" style={{ maxWidth: toRem(100) }}>
           {username}
         </Box>

From b9342175a4e171ffa7f371af70b421e6e270b303 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 19 Aug 2026 08:04:34 +0530
Subject: [PATCH 086/158] fix unread - wip

---
 src/app/features/room/RoomTimeline.tsx        | 22 ++++++++++-----
 .../room/components/TimelineDivider.tsx       | 12 ++++-----
 src/app/features/room/hooks/useTimeline.ts    | 27 ++++++++++---------
 .../features/room/thread-view/ThreadView.tsx  |  2 +-
 .../room/thread-view/TimelineView.tsx         | 16 ++++++++---
 5 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index b2d5afbd..eae129b6 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -202,6 +202,15 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     console.log('mark as read.');
   }, []);
 
+  const newDividerRef = useRef<HTMLDivElement>(null);
+  // if new divider exist always start form here.
+  useEffect(() => {
+    const newDividerEl = newDividerRef.current;
+    if (newDividerEl) {
+      scrollToElement(newDividerEl, { align: 'center', behavior: 'instant' });
+    }
+  }, [scrollToElement]);
+
   const [atBottom, atBottomAnchorRef] = useAtBottomToggle(
     getScrollElement,
     messageBatch.next.end ?? false,
@@ -259,12 +268,12 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const stickToBottom = useCallback(() => {
     if (!atBottom) return;
 
-    // setTimeout(() => {
-    //   const scrollEl = getScrollElement();
-    //   if (scrollEl) {
-    //     scrollToBottom(scrollEl, 'smooth');
-    //   }
-    // }, 100);
+    setTimeout(() => {
+      const scrollEl = getScrollElement();
+      if (scrollEl) {
+        scrollToBottom(scrollEl, 'smooth');
+      }
+    }, 100);
   }, [getScrollElement, atBottom]);
 
   useObservableValueListener(timeline.outbox.senders, stickToBottom);
@@ -489,6 +498,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
           messageSpacing={messageSpacing}
           ts={dayDivider ? event.origin_server_ts : undefined}
           unread={newDivider}
+          ref={newDivider ? newDividerRef : undefined}
         />
       ) : null;
 
diff --git a/src/app/features/room/components/TimelineDivider.tsx b/src/app/features/room/components/TimelineDivider.tsx
index 2ff1008e..7f17fd88 100644
--- a/src/app/features/room/components/TimelineDivider.tsx
+++ b/src/app/features/room/components/TimelineDivider.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { forwardRef, ReactNode } from 'react';
 import { as, Badge, Box, ContainerColor, Line, Text } from 'folds';
 import classNames from 'classnames';
 import { DividerTime, MessageBase } from '../../../components/message';
@@ -30,9 +30,9 @@ type ComboDividerProps = {
   replyCount?: number;
   unread?: boolean;
 };
-export function ComboDivider({ messageSpacing, ts, replyCount, unread }: ComboDividerProps) {
-  return (
-    <MessageBase space={messageSpacing}>
+export const ComboDivider = forwardRef<HTMLDivElement, ComboDividerProps>(
+  ({ messageSpacing, ts, replyCount, unread }, ref) => (
+    <MessageBase space={messageSpacing} ref={ref}>
       <TimelineDivider
         variant={unread ? 'Critical' : 'Surface'}
         before={
@@ -75,5 +75,5 @@ export function ComboDivider({ messageSpacing, ts, replyCount, unread }: ComboDi
         )}
       </TimelineDivider>
     </MessageBase>
-  );
-}
+  )
+);
diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
index a9a63d1d..9941bcae 100644
--- a/src/app/features/room/hooks/useTimeline.ts
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -15,7 +15,7 @@ import { Editor } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { scrollToBottom } from '../../../utils/dom';
-import { MessageBatch } from '../../../../client/room/messages';
+import { MessageBatch, RangeInfo } from '../../../../client/room/messages';
 import { getResizeObserverEntry, useResizeObserver } from '../../../hooks/useResizeObserver';
 import {
   getIntersectionObserverEntry,
@@ -50,18 +50,19 @@ export const useTimelineView = (): TimelineView => {
 };
 
 export const useTimelinePrefetch = (timeline: TimelineView, limit: number) => {
-  useEffect(
-    () =>
-      timeline.range.info.subscribe((info) => {
-        if (info.start <= limit) {
-          requestAnimationFrame(() => timeline.paginateBackward(limit));
-        }
-        if (info.end >= Math.max(timeline.batch.read.size - limit, 0)) {
-          requestAnimationFrame(() => timeline.paginateForward(limit));
-        }
-      }),
-    [timeline, limit]
-  );
+  useEffect(() => {
+    const handleInfo = (info: RangeInfo) => {
+      if (info.start <= limit) {
+        requestAnimationFrame(() => timeline.paginateBackward(limit));
+      }
+      if (info.end >= Math.max(timeline.batch.read.size - limit, 0)) {
+        requestAnimationFrame(() => timeline.paginateForward(limit));
+      }
+    };
+
+    handleInfo(timeline.range.info.read);
+    return timeline.range.info.subscribe(handleInfo);
+  }, [timeline, limit]);
 };
 
 export const useTimelinePaginate = (timeline: TimelineView, limit: number) =>
diff --git a/src/app/features/room/thread-view/ThreadView.tsx b/src/app/features/room/thread-view/ThreadView.tsx
index 15d3e538..69c41860 100644
--- a/src/app/features/room/thread-view/ThreadView.tsx
+++ b/src/app/features/room/thread-view/ThreadView.tsx
@@ -75,7 +75,7 @@ export function ThreadView({ threadTimeline, threadFocusRef, requestClose }: Thr
           </Box>
         </PageHeader>
 
-        <TimelineView threadTimeline={threadTimeline} />
+        <TimelineView threadTimeline={threadTimeline} threadInputRef={threadInputRef} />
         <Box shrink="No" direction="Column">
           <div style={{ padding: `0 ${config.space.S400}` }}>
             <RoomInput
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index 89fc9836..45db35bd 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -1,4 +1,12 @@
-import React, { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  RefObject,
+  useCallback,
+  useEffect,
+  useLayoutEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import { ReactEditor } from 'slate-react';
 import { Box, Scroll, Text, config } from 'folds';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
@@ -67,16 +75,16 @@ import { MessageContent } from '../../../components/MessageContent';
 
 type TimelineViewProps = {
   threadTimeline: ThreadTimeline;
+  threadInputRef: RefObject<HTMLElement>;
 };
 
 const PAGINATION_LIMIT = 80;
 
-export function TimelineView({ threadTimeline }: TimelineViewProps) {
+export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewProps) {
   const ct = useClient();
   const roomId = useRoom();
   const encryptedRooms = useObservableValue(ct.encryptedRooms);
   const editor = useEditor();
-  const roomInputRef = useRef<HTMLDivElement>(null);
 
   const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
   const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
@@ -196,7 +204,7 @@ export function TimelineView({ threadTimeline }: TimelineViewProps) {
 
   useEditorResizeStickBottom(
     getScrollElement,
-    useCallback(() => roomInputRef?.current ?? null, [roomInputRef]),
+    useCallback(() => threadInputRef?.current ?? null, [threadInputRef]),
     atBottom
   );
 

From 3409054bc531f7f72b81b029025d8fbfefae9990 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 19 Aug 2026 08:10:42 +0530
Subject: [PATCH 087/158] move call status renderer to features

---
 src/app/features/call-status/CallStatus.tsx | 18 ++++++++++++++++--
 src/app/pages/CallStatusRenderer.tsx        | 18 ------------------
 src/app/pages/Router.tsx                    |  2 +-
 3 files changed, 17 insertions(+), 21 deletions(-)
 delete mode 100644 src/app/pages/CallStatusRenderer.tsx

diff --git a/src/app/features/call-status/CallStatus.tsx b/src/app/features/call-status/CallStatus.tsx
index 1ff3b837..58b8d399 100644
--- a/src/app/features/call-status/CallStatus.tsx
+++ b/src/app/features/call-status/CallStatus.tsx
@@ -7,13 +7,14 @@ import { CallRoomName } from './CallRoomName';
 import { CallControl } from './CallControl';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
-import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
+import { ScreenSize, useScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { MemberGlance } from './MemberGlance';
 import { StatusDivider } from './components';
 import { CallEmbed } from '../../plugins/call/CallEmbed';
-import { useCallJoined } from '../../hooks/useCallEmbed';
+import { useCallEmbed, useCallJoined } from '../../hooks/useCallEmbed';
 import { useCallSpeakers } from '../../hooks/useCallSpeakers';
 import { MemberSpeaking } from './MemberSpeaking';
+import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
 
 type CallStatusProps = {
   callEmbed: CallEmbed;
@@ -79,3 +80,16 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
     </Box>
   );
 }
+
+export function CallStatusRenderer() {
+  const callEmbed = useCallEmbed();
+  const selectedRoom = useSelectedRoom();
+
+  const screenSize = useScreenSizeContext();
+
+  if (!callEmbed) return null;
+
+  if (screenSize === ScreenSize.Mobile && callEmbed.roomId === selectedRoom) return null;
+
+  return <CallStatus callEmbed={callEmbed} />;
+}
diff --git a/src/app/pages/CallStatusRenderer.tsx b/src/app/pages/CallStatusRenderer.tsx
deleted file mode 100644
index 2836886e..00000000
--- a/src/app/pages/CallStatusRenderer.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import React from 'react';
-import { useCallEmbed } from '../hooks/useCallEmbed';
-import { CallStatus } from '../features/call-status';
-import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
-import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
-
-export function CallStatusRenderer() {
-  const callEmbed = useCallEmbed();
-  const selectedRoom = useSelectedRoom();
-
-  const screenSize = useScreenSizeContext();
-
-  if (!callEmbed) return null;
-
-  if (screenSize === ScreenSize.Mobile && callEmbed.roomId === selectedRoom) return null;
-
-  return <CallStatus callEmbed={callEmbed} />;
-}
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index b36847eb..b21db50f 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -67,7 +67,7 @@ import { Create } from './client/create';
 import { CreateSpaceModalRenderer } from '../features/create-space';
 import { SearchModalRenderer } from '../features/search';
 import { getFallbackSession } from '../state/sessions';
-import { CallStatusRenderer } from './CallStatusRenderer';
+import { CallStatusRenderer } from '../features/call-status';
 import { CallEmbedProvider } from '../components/CallEmbedProvider';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {

From 91f9f7c399f7f9875b2a094b95fb1e1a64dd60d8 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 10:41:40 +0530
Subject: [PATCH 088/158] add multi account - init

---
 .../{pages/auth => components}/OrDivider.tsx  |   0
 .../auth-layout}/AuthFooter.tsx               |   0
 src/app/components/auth-layout/AuthLayout.tsx |  52 +++
 src/app/components/auth-layout/index.ts       |   1 +
 src/app/components/auth-layout/styles.css.ts  |  63 +++
 src/app/components/editor/Toolbar.tsx         |   3 +-
 src/app/components/room-intro/RoomIntro.tsx   |   3 +-
 src/app/components/time-date/TimePicker.tsx   |   3 +-
 src/app/components/user-profile/UserHero.tsx  |   3 +-
 .../user-profile/UserModeration.tsx           |  13 +-
 .../developer-tools/DevelopTools.tsx          |   6 +-
 .../common-settings/members/Members.tsx       |   3 +-
 src/app/features/lobby/Lobby.tsx              |   3 +-
 src/app/features/lobby/LobbyHeader.tsx        |   3 +-
 .../features/message-search/MessageSearch.tsx |  11 +-
 src/app/features/room-nav/RoomNavItem.tsx     |   3 +-
 src/app/features/room/MembersDrawer.tsx       |   5 +-
 src/app/features/room/Room.tsx                |   5 +-
 src/app/features/room/RoomInput.tsx           |   9 +-
 src/app/features/room/RoomTimeline.tsx        |  34 +-
 src/app/features/room/RoomView.tsx            |   3 +-
 src/app/features/room/RoomViewHeader.tsx      |   5 +-
 src/app/features/room/hooks/useSendMessage.ts |   3 +-
 .../features/room/jump-to-time/JumpToTime.tsx |   3 +-
 .../features/room/message/MessageEditor.tsx   |   7 +-
 .../room/room-pin-menu/RoomPinMenu.tsx        |  11 +-
 .../features/room/thread-view/ThreadView.tsx  |   3 +-
 .../room/thread-view/TimelineView.tsx         |  32 +-
 src/app/features/settings/Settings.tsx        | 132 ++++---
 .../settings/developer-tools/DevelopTools.tsx |   3 +-
 .../features/settings/devices/DeviceTile.tsx  |   5 +-
 src/app/features/settings/general/General.tsx |  53 ++-
 .../notifications/SystemNotification.tsx      |   8 +-
 src/app/hooks/sw/useSessionRequest.ts         |  34 ++
 src/app/hooks/useRoomLatestRenderedEvent.ts   |  58 ---
 src/app/hooks/useRoomNavigate.ts              |   3 +-
 src/app/hooks/useSessions.ts                  |  23 ++
 src/app/hooks/useTheme.ts                     |   9 +-
 src/app/hooks/useUserProfile.ts               |  18 +-
 src/app/pages/AccountSelector.tsx             | 200 ++++++++++
 src/app/pages/Router.tsx                      | 363 ++++++++----------
 src/app/pages/ThemeManager.tsx                |  36 +-
 src/app/pages/auth/AuthLayout.tsx             | 209 ----------
 src/app/pages/auth/AuthRoot.tsx               | 186 +++++++++
 src/app/pages/auth/index.ts                   |   2 +-
 src/app/pages/auth/login/Login.tsx            |   4 +-
 .../pages/auth/login/PasswordLoginForm.tsx    |  34 +-
 src/app/pages/auth/login/TokenLogin.tsx       |  11 +-
 src/app/pages/auth/login/loginUtil.ts         |  48 ++-
 .../auth/register/PasswordRegisterForm.tsx    |   7 +-
 src/app/pages/auth/register/Register.tsx      |   4 +-
 src/app/pages/auth/register/registerUtil.ts   |  34 +-
 .../pages/client/ClientInitStorageAtom.tsx    |  11 +-
 src/app/pages/client/ClientNonUIFeatures.tsx  |   5 +-
 src/app/pages/client/ClientRoot.tsx           |  35 +-
 src/app/pages/client/ClientRootOptions.tsx    |  23 +-
 .../pages/client/InitialSyncSplashScreen.tsx  |   2 +-
 src/app/pages/client/direct/Direct.tsx        |   3 +-
 src/app/pages/client/home/Home.tsx            |   3 +-
 src/app/pages/client/inbox/Invites.tsx        |   7 +-
 src/app/pages/client/inbox/Notifications.tsx  |  13 +-
 src/app/pages/client/sidebar/DirectTab.tsx    |   3 +-
 src/app/pages/client/sidebar/HomeTab.tsx      |   3 +-
 src/app/pages/client/sidebar/SettingsTab.tsx  | 243 +++++++++++-
 src/app/pages/client/sidebar/SpaceTabs.tsx    |   3 +-
 src/app/pages/client/space/Space.tsx          |   3 +-
 src/app/state/callPreferences.ts              |  17 +-
 src/app/state/closedLobbyCategories.ts        |  15 +-
 src/app/state/closedNavCategories.ts          |  15 +-
 src/app/state/hooks/settings.ts               |  34 +-
 src/app/state/navToActivePath.ts              |   7 +-
 src/app/state/openedSidebarFolder.ts          |  15 +-
 src/app/state/sessions.ts                     | 195 +++-------
 src/app/state/settings.ts                     |  48 ++-
 src/app/state/spaceRooms.ts                   |   7 +-
 src/app/state/typingMembers.ts                |   3 +-
 src/app/state/utils/atomWithLocalStorage.ts   |  17 +-
 src/client/LogoutManager.ts                   |   1 -
 src/client/context.ts                         |   2 +-
 src/client/crypto.ts                          |  24 +-
 src/client/initMatrix.ts                      |  79 ----
 src/client/initialize.ts                      |  25 +-
 src/client/localStorage.ts                    |  30 ++
 src/client/sessions.ts                        |  97 +++++
 src/client/storage/index.ts                   |  11 +-
 src/index.tsx                                 |  25 +-
 src/sw-session.ts                             |  10 -
 src/sw.ts                                     |  93 ++---
 88 files changed, 1702 insertions(+), 1199 deletions(-)
 rename src/app/{pages/auth => components}/OrDivider.tsx (100%)
 rename src/app/{pages/auth => components/auth-layout}/AuthFooter.tsx (100%)
 create mode 100644 src/app/components/auth-layout/AuthLayout.tsx
 create mode 100644 src/app/components/auth-layout/index.ts
 create mode 100644 src/app/components/auth-layout/styles.css.ts
 create mode 100644 src/app/hooks/sw/useSessionRequest.ts
 delete mode 100644 src/app/hooks/useRoomLatestRenderedEvent.ts
 create mode 100644 src/app/hooks/useSessions.ts
 create mode 100644 src/app/pages/AccountSelector.tsx
 delete mode 100644 src/app/pages/auth/AuthLayout.tsx
 create mode 100644 src/app/pages/auth/AuthRoot.tsx
 delete mode 100644 src/client/initMatrix.ts
 create mode 100644 src/client/localStorage.ts
 create mode 100644 src/client/sessions.ts
 delete mode 100644 src/sw-session.ts

diff --git a/src/app/pages/auth/OrDivider.tsx b/src/app/components/OrDivider.tsx
similarity index 100%
rename from src/app/pages/auth/OrDivider.tsx
rename to src/app/components/OrDivider.tsx
diff --git a/src/app/pages/auth/AuthFooter.tsx b/src/app/components/auth-layout/AuthFooter.tsx
similarity index 100%
rename from src/app/pages/auth/AuthFooter.tsx
rename to src/app/components/auth-layout/AuthFooter.tsx
diff --git a/src/app/components/auth-layout/AuthLayout.tsx b/src/app/components/auth-layout/AuthLayout.tsx
new file mode 100644
index 00000000..a57e7963
--- /dev/null
+++ b/src/app/components/auth-layout/AuthLayout.tsx
@@ -0,0 +1,52 @@
+import React, { ReactNode } from 'react';
+import { Box, Header, Scroll, Text } from 'folds';
+import classNames from 'classnames';
+
+import * as css from './styles.css';
+import * as PatternsCss from '../../styles/Patterns.css';
+import CinnySVG from '../../../../public/res/svg/cinny.svg';
+import { AuthFooter } from './AuthFooter';
+
+export function AuthLogo({ large }: { large?: boolean }) {
+  return <img className={css.AuthLogo({ large })} src={CinnySVG} alt="Cinny Logo" />;
+}
+
+type AuthLayoutProps = {
+  hideHeader?: boolean;
+  center?: boolean;
+  children?: ReactNode;
+};
+export function AuthLayout({ hideHeader, center, children }: AuthLayoutProps) {
+  return (
+    <Scroll variant="Background" visibility="Hover" size="0" hideTrack>
+      <Box
+        className={classNames(css.AuthLayout, PatternsCss.BackgroundDotPattern)}
+        direction="Column"
+        alignItems="Center"
+        gap="400"
+      >
+        <Box
+          style={{ width: '100%' }}
+          justifyContent={center ? 'Center' : undefined}
+          alignItems="Center"
+          direction="Column"
+        >
+          <Box direction="Column" className={css.AuthCard}>
+            {!hideHeader && (
+              <Header className={css.AuthHeader} size="600" variant="Surface">
+                <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
+                  <AuthLogo />
+                  <Text size="H3">Cinny</Text>
+                </Box>
+              </Header>
+            )}
+            <Box className={css.AuthCardContent} direction="Column">
+              {children}
+            </Box>
+          </Box>
+        </Box>
+        <AuthFooter />
+      </Box>
+    </Scroll>
+  );
+}
diff --git a/src/app/components/auth-layout/index.ts b/src/app/components/auth-layout/index.ts
new file mode 100644
index 00000000..654e0e04
--- /dev/null
+++ b/src/app/components/auth-layout/index.ts
@@ -0,0 +1 @@
+export * from './AuthLayout';
diff --git a/src/app/components/auth-layout/styles.css.ts b/src/app/components/auth-layout/styles.css.ts
new file mode 100644
index 00000000..649c4beb
--- /dev/null
+++ b/src/app/components/auth-layout/styles.css.ts
@@ -0,0 +1,63 @@
+import { style } from '@vanilla-extract/css';
+import { recipe } from '@vanilla-extract/recipes';
+import { DefaultReset, color, config, toRem } from 'folds';
+
+export const AuthLayout = style({
+  minHeight: '100%',
+  backgroundColor: color.Background.Container,
+  color: color.Background.OnContainer,
+  padding: config.space.S400,
+  paddingBottom: 0,
+  position: 'relative',
+});
+
+export const AuthCard = style({
+  marginTop: '1vh',
+  maxWidth: toRem(460),
+  width: '100%',
+  backgroundColor: color.Surface.Container,
+  color: color.Surface.OnContainer,
+  borderRadius: config.radii.R500,
+  boxShadow: config.shadow.E100,
+  border: `${config.borderWidth.B300} solid ${color.Surface.ContainerLine}`,
+  overflow: 'hidden',
+});
+
+export const AuthLogo = recipe({
+  base: [
+    DefaultReset,
+    {
+      width: toRem(26),
+      height: toRem(26),
+
+      borderRadius: '50%',
+    },
+  ],
+  variants: {
+    large: {
+      true: {
+        width: toRem(48),
+        height: toRem(48),
+      },
+    },
+  },
+});
+
+export const AuthHeader = style({
+  padding: `0 ${config.space.S400}`,
+  borderBottomWidth: config.borderWidth.B300,
+});
+
+export const AuthCardContent = style({
+  maxWidth: toRem(402),
+  width: '100%',
+  margin: 'auto',
+  padding: config.space.S400,
+  paddingTop: config.space.S700,
+  paddingBottom: toRem(44),
+  gap: toRem(44),
+});
+
+export const AuthFooter = style({
+  padding: config.space.S200,
+});
diff --git a/src/app/components/editor/Toolbar.tsx b/src/app/components/editor/Toolbar.tsx
index 7d701c42..54fc8f85 100644
--- a/src/app/components/editor/Toolbar.tsx
+++ b/src/app/components/editor/Toolbar.tsx
@@ -34,7 +34,6 @@ import { HeadingLevel } from './slate';
 import { isMacOS } from '../../utils/user-agent';
 import { KeySymbol } from '../../utils/key-symbol';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { stopPropagation } from '../../utils/keyboard';
 
 function BtnTooltip({ text, shortCode }: { text: string; shortCode?: string }) {
@@ -260,7 +259,7 @@ export function Toolbar() {
   const canEscape = isBlockActive(editor, BlockType.Paragraph)
     ? isAnyMarkActive(editor)
     : ReactEditor.isFocused(editor);
-  const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
+  const [isMarkdown, setIsMarkdown] = useSetting('isMarkdown');
 
   return (
     <Box className={css.EditorToolbarBase}>
diff --git a/src/app/components/room-intro/RoomIntro.tsx b/src/app/components/room-intro/RoomIntro.tsx
index ff17c964..88ce2b33 100644
--- a/src/app/components/room-intro/RoomIntro.tsx
+++ b/src/app/components/room-intro/RoomIntro.tsx
@@ -6,7 +6,6 @@ import { RoomAvatar } from '../room-avatar';
 import { nameInitials } from '../../utils/common';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { InviteUserPrompt } from '../invite-user-prompt';
 import { useClient } from '../../hooks/useClient';
 import { useRoom } from '../../hooks/useRoom';
@@ -51,7 +50,7 @@ export const RoomIntro = as<
     'room_id' in event.content.predecessor &&
     event.content.predecessor.room_id;
 
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [hour24Clock] = useSetting('hour24Clock');
 
   return (
     <Box direction="Column" grow="Yes" gap="500" {...props} ref={ref}>
diff --git a/src/app/components/time-date/TimePicker.tsx b/src/app/components/time-date/TimePicker.tsx
index c835ed09..03731b47 100644
--- a/src/app/components/time-date/TimePicker.tsx
+++ b/src/app/components/time-date/TimePicker.tsx
@@ -5,7 +5,6 @@ import * as css from './styles.css';
 import { PickerColumn } from './PickerColumn';
 import { hour12to24, hour24to12, hoursToMs, inSameDay, minutesToMs } from '../../utils/time';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 
 type TimePickerProps = {
   min: number;
@@ -15,7 +14,7 @@ type TimePickerProps = {
 };
 export const TimePicker = forwardRef<HTMLDivElement, TimePickerProps>(
   ({ min, max, value, onChange }, ref) => {
-    const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+    const [hour24Clock] = useSetting('hour24Clock');
 
     const hour24 = dayjs(value).hour();
 
diff --git a/src/app/components/user-profile/UserHero.tsx b/src/app/components/user-profile/UserHero.tsx
index 2273aaab..86098a6a 100644
--- a/src/app/components/user-profile/UserHero.tsx
+++ b/src/app/components/user-profile/UserHero.tsx
@@ -26,7 +26,6 @@ import { ImageViewer } from '../image-viewer';
 import { stopPropagation } from '../../utils/keyboard';
 import { LINKIFY_OPTS } from '../../plugins/react-custom-html-parser';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { UserBiography, UserPronoun } from '../../hooks/useUserProfile';
 import { RoomTopicViewer } from '../room-topic-viewer';
 
@@ -141,7 +140,7 @@ export function UserHeroAvatar({ userId, avatarUrl, presence }: UserHeroAvatarPr
 }
 
 export function UserTimezone({ timezone }: { timezone: string }) {
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [hour24Clock] = useSetting('hour24Clock');
 
   let time: string | undefined;
   let offset: string | undefined;
diff --git a/src/app/components/user-profile/UserModeration.tsx b/src/app/components/user-profile/UserModeration.tsx
index 0db24f4b..6bdb2774 100644
--- a/src/app/components/user-profile/UserModeration.tsx
+++ b/src/app/components/user-profile/UserModeration.tsx
@@ -28,7 +28,6 @@ import { SettingTile } from '../setting-tile';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { BreakWord } from '../../styles/Text.css';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { timeDayMonYear, timeHourMinute } from '../../utils/time';
 import { useClient } from '../../hooks/useClient';
 import { getIgnoredUsersContent, useIgnoredUsers } from '../../hooks/useIgnoredUsers';
@@ -41,8 +40,8 @@ type UserKickAlertProps = {
   ts?: number;
 };
 export function UserKickAlert({ reason, kickedBy, ts }: UserKickAlertProps) {
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [hour24Clock] = useSetting('hour24Clock');
+  const [dateFormatString] = useSetting('dateFormatString');
 
   const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
   const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
@@ -91,8 +90,8 @@ type UserBanAlertProps = {
 export function UserBanAlert({ userId, reason, canUnban, bannedBy, ts }: UserBanAlertProps) {
   const ct = useClient();
   const roomId = useRoom();
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [hour24Clock] = useSetting('hour24Clock');
+  const [dateFormatString] = useSetting('dateFormatString');
 
   const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
   const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
@@ -176,8 +175,8 @@ type UserInviteAlertProps = {
 export function UserInviteAlert({ userId, reason, canKick, invitedBy, ts }: UserInviteAlertProps) {
   const ct = useClient();
   const roomId = useRoom();
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [hour24Clock] = useSetting('hour24Clock');
+  const [dateFormatString] = useSetting('dateFormatString');
 
   const time = ts ? timeHourMinute(ts, hour24Clock) : undefined;
   const date = ts ? timeDayMonYear(ts, dateFormatString) : undefined;
diff --git a/src/app/features/common-settings/developer-tools/DevelopTools.tsx b/src/app/features/common-settings/developer-tools/DevelopTools.tsx
index 7d12a7c9..0ce6f377 100644
--- a/src/app/features/common-settings/developer-tools/DevelopTools.tsx
+++ b/src/app/features/common-settings/developer-tools/DevelopTools.tsx
@@ -20,7 +20,6 @@ import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import { copyToClipboard } from '../../../utils/dom';
 import { useRoom } from '../../../hooks/useRoom';
 import { StateEventEditor } from './StateEventEditor';
@@ -221,7 +220,7 @@ type DeveloperToolsProps = {
   requestClose: () => void;
 };
 export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
-  const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+  const [developerTools, setDeveloperTools] = useSetting('developerTools');
   const ct = useClient();
   const roomId = useRoom();
 
@@ -255,8 +254,7 @@ export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
   if (openAccountData !== undefined) {
     return (
       <AccountDataEditor
-        type={openAccountData?.type}
-        content={openAccountData?.content}
+        event={openAccountData ?? undefined}
         submitChange={submitAccountData}
         requestClose={handleClose}
       />
diff --git a/src/app/features/common-settings/members/Members.tsx b/src/app/features/common-settings/members/Members.tsx
index 1e185fcf..85597842 100644
--- a/src/app/features/common-settings/members/Members.tsx
+++ b/src/app/features/common-settings/members/Members.tsx
@@ -34,7 +34,6 @@ import { useDebounce } from '../../../hooks/useDebounce';
 import { useAsyncSearch, UseAsyncSearchOptions } from '../../../hooks/useAsyncSearch';
 import { useMembershipFilter, useMembershipFilterMenu } from '../../../hooks/useMemberFilter';
 import { useMemberPowerSort, useMemberSort, useMemberSortMenu } from '../../../hooks/useMemberSort';
-import { settingsAtom } from '../../../state/settings';
 import { useSetting } from '../../../state/hooks/settings';
 import { UseStateProvider } from '../../../components/UseStateProvider';
 import { MembershipFilterMenu } from '../../../components/MembershipFilterMenu';
@@ -90,7 +89,7 @@ export function Members({ requestClose }: MembersProps) {
 
   const membershipFilterMenu = useMembershipFilterMenu(membersAPI.getMembership);
   const sortFilterMenu = useMemberSortMenu(membersAPI.getName);
-  const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
+  const [sortFilterIndex, setSortFilterIndex] = useSetting('memberSortFilterIndex');
   const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
 
   const membershipFilter = useMembershipFilter(membershipFilterIndex, membershipFilterMenu);
diff --git a/src/app/features/lobby/Lobby.tsx b/src/app/features/lobby/Lobby.tsx
index 6d9ae85c..e5baa199 100644
--- a/src/app/features/lobby/Lobby.tsx
+++ b/src/app/features/lobby/Lobby.tsx
@@ -21,7 +21,6 @@ import { spaceRoomsAtom } from '../../state/spaceRooms';
 import { MembersDrawer } from '../room/MembersDrawer';
 import { useSetting } from '../../state/hooks/settings';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
-import { settingsAtom } from '../../state/settings';
 import { LobbyHeader } from './LobbyHeader';
 import { LobbyHero } from './LobbyHero';
 import { ScrollTopContainer } from '../../components/scroll-top-container';
@@ -174,7 +173,7 @@ export function Lobby() {
   const heroSectionRef = useRef<HTMLDivElement>(null);
   const [heroSectionHeight, setHeroSectionHeight] = useState<number>();
   const setSpaceRooms = useSetAtom(spaceRoomsAtom);
-  const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+  const [isDrawer] = useSetting('isPeopleDrawer');
   const screenSize = useScreenSizeContext();
   const [onTop, setOnTop] = useState(true);
   const [closedCategories, setClosedCategories] = useAtom(useClosedLobbyCategoriesAtom());
diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx
index f9692525..9e1b514c 100644
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -19,7 +19,6 @@ import {
 import FocusTrap from 'focus-trap-react';
 import { PageHeader } from '../../components/page';
 import { useSetSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { useSpace } from '../../hooks/useSpace';
 import { RoomAvatar } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
@@ -145,7 +144,7 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
   const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const spaceId = useSpace();
-  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
+  const setPeopleDrawer = useSetSetting('isPeopleDrawer');
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const screenSize = useScreenSizeContext();
 
diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx
index 26085b5f..3bcf1eed 100644
--- a/src/app/features/message-search/MessageSearch.tsx
+++ b/src/app/features/message-search/MessageSearch.tsx
@@ -8,8 +8,7 @@ import { SearchOrderBy } from 'matrix-js-sdk';
 import { PageHero, PageHeroEmpty, PageHeroSection } from '../../components/page';
 import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { _SearchPathSearchParams } from '../../pages/paths';
-import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
+import { useSettings } from '../../state/hooks/settings';
 import { SequenceCard } from '../../components/sequence-card';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { ScrollTopContainer } from '../../components/scroll-top-container';
@@ -53,12 +52,8 @@ export function MessageSearch({
   const mx = useMatrixClient();
   const mDirects = useAtomValue(mDirectAtom);
   const allRooms = useRooms(mx, allRoomsAtom, mDirects);
-  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
-  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
-  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
-
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const { mediaAutoLoad, urlPreview, legacyUsernameColor, hour24Clock, dateFormatString } =
+    useSettings();
 
   const searchInputRef = useRef<HTMLInputElement>(null);
   const scrollTopAnchorRef = useRef<HTMLDivElement>(null);
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 71d0dc77..48001ffc 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -34,7 +34,6 @@ import { getMatrixToRoom } from '../../plugins/matrix-to';
 import { getViaServers } from '../../plugins/via-servers';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { useOpenRoomSettings } from '../../state/hooks/roomSettings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import {
@@ -61,7 +60,7 @@ const RoomNavItemMenu = forwardRef<HTMLDivElement, RoomNavItemMenuProps>(
   ({ roomId, requestClose, notificationMode, notifications }, ref) => {
     const ct = useClient();
     const { userId } = ct.session;
-    const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+    const [hideActivity] = useSetting('hideActivity');
     const powerLevelState = usePowerLevelsState(roomId);
     const powerLevels = usePowerLevels(powerLevelState.value);
     const creators = useRoomCreators(roomId);
diff --git a/src/app/features/room/MembersDrawer.tsx b/src/app/features/room/MembersDrawer.tsx
index 968c4e0e..8d57f46a 100644
--- a/src/app/features/room/MembersDrawer.tsx
+++ b/src/app/features/room/MembersDrawer.tsx
@@ -35,7 +35,6 @@ import { useDebounce } from '../../hooks/useDebounce';
 import { TypingIndicator } from '../../components/typing-indicator';
 import { getMemberSearchStr } from '../../utils/room';
 import { useSetSetting, useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { millify } from '../../plugins/millify';
 import { ScrollTopContainer } from '../../components/scroll-top-container';
 import { UserAvatar } from '../../components/user-avatar';
@@ -69,7 +68,7 @@ type MemberDrawerHeaderProps = {
   memberCount: number;
 };
 function MemberDrawerHeader({ memberCount }: MemberDrawerHeaderProps) {
-  const setPeopleDrawer = useSetSetting(settingsAtom, 'isPeopleDrawer');
+  const setPeopleDrawer = useSetSetting('isPeopleDrawer');
 
   return (
     <Header className={css.MembersDrawerHeader} variant="Background" size="600">
@@ -216,7 +215,7 @@ export function MembersDrawer() {
 
   const membershipFilterMenu = useMembershipFilterMenu(membersAPI.getMembership);
   const sortFilterMenu = useMemberSortMenu(membersAPI.getName);
-  const [sortFilterIndex, setSortFilterIndex] = useSetting(settingsAtom, 'memberSortFilterIndex');
+  const [sortFilterIndex, setSortFilterIndex] = useSetting('memberSortFilterIndex');
   const [membershipFilterIndex, setMembershipFilterIndex] = useState(0);
 
   const membershipFilter = useMembershipFilter(membershipFilterIndex, membershipFilterMenu);
diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index 85301f94..bd6da8df 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -6,7 +6,6 @@ import { RoomView } from './RoomView';
 import { MembersDrawer } from './MembersDrawer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import {
   PowerLevelsContextProvider,
   usePowerLevels,
@@ -39,8 +38,8 @@ export function Room() {
   const threadTimeline = activeThreadId ? threads?.get(activeThreadId) : undefined;
   const threadFocusRef = useRef<boolean>(false);
 
-  const [isDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [isDrawer] = useSetting('isPeopleDrawer');
+  const [hideActivity] = useSetting('hideActivity');
   const screenSize = useScreenSizeContext();
   const powerLevelStateResult = usePowerLevelsState(roomId);
   const powerLevels = usePowerLevels(powerLevelStateResult.value);
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index 9e3f3f4b..fc5a03f0 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -46,7 +46,6 @@ import {
   UploadBoardImperativeHandlers,
 } from '../../components/upload-board';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { CommandAutocomplete } from './CommandAutocomplete';
 import { useCommands } from '../../hooks/useCommands';
 import { mobileOrTablet } from '../../utils/user-agent';
@@ -81,9 +80,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
   ({ editor, fileDropContainerRef, threadId }, ref) => {
     const roomId = useRoom();
 
-    const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
-    const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-    const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+    const [enterForNewline] = useSetting('enterForNewline');
+    const [hideActivity] = useSetting('hideActivity');
+    const [legacyUsernameColor] = useSetting('legacyUsernameColor');
     const [ping, setPing] = useState(true);
 
     const direct = useIsDirectRoom();
@@ -129,7 +128,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
 
     const imagePackRooms: string[] = useImagePackRooms(roomId);
 
-    const [toolbar, setToolbar] = useSetting(settingsAtom, 'editorToolbar');
+    const [toolbar, setToolbar] = useSetting('editorToolbar');
     const [autocompleteQuery, setAutocompleteQuery] =
       useState<AutocompleteQuery<AutocompletePrefix>>();
 
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index eae129b6..e99ce402 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -23,8 +23,8 @@ import {
   RedactedContent,
 } from '../../components/message';
 import { getLatestEditEvent, getReplyId, getThreadId } from '../../utils/room';
-import { useSetting } from '../../state/hooks/settings';
-import { MessageLayout, settingsAtom } from '../../state/settings';
+import { useSettings } from '../../state/hooks/settings';
+import { MessageLayout } from '../../state/settings';
 import { Reactions, Message, ThreadEvents } from './message';
 import { RoomIntro } from '../../components/room-intro';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
@@ -89,20 +89,22 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const roomId = useRoom();
   const encryptedRooms = useObservableValue(ct.encryptedRooms);
 
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
-  const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
-  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
-  const direct = useIsDirectRoom();
-  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
-  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
-  const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
-  const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
-  const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
-  const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+  const {
+    hideActivity,
+    messageLayout,
+    messageSpacing,
+    legacyUsernameColor,
+    mediaAutoLoad,
+    urlPreview,
+    encUrlPreview,
+    showHiddenEvents,
+    developerTools,
+    hour24Clock,
+    dateFormatString,
+  } = useSettings();
 
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const direct = useIsDirectRoom();
+  const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
 
   const ignoredUsersList = useIgnoredUsers();
   const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
@@ -415,7 +417,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
         onEditId={handleEdit}
         redacted={redacted.has(event.event_id)}
         hideReadReceipts={hideActivity}
-        showDeveloperTools={showDeveloperTools}
+        showDeveloperTools={developerTools}
         memberPowerTag={getMemberPowerTag(event.sender)}
         accessibleTagColors={accessiblePowerTagColors}
         legacyUsernameColor={legacyUsernameColor || direct}
diff --git a/src/app/features/room/RoomView.tsx b/src/app/features/room/RoomView.tsx
index d7b25737..6507fc58 100644
--- a/src/app/features/room/RoomView.tsx
+++ b/src/app/features/room/RoomView.tsx
@@ -8,7 +8,6 @@ import { RoomTombstone } from './RoomTombstone';
 import { RoomInput } from './RoomInput';
 import { RoomViewFollowing } from './RoomViewFollowing';
 import { Page } from '../../components/page';
-import { settingsAtom } from '../../state/settings';
 import { useSetting } from '../../state/hooks/settings';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
@@ -29,7 +28,7 @@ export function RoomView({ eventId, timeline, threadFocusRef }: RoomViewProps) {
   const roomInputRef = useRef<HTMLDivElement>(null);
   const roomViewRef = useRef<HTMLDivElement>(null);
 
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [hideActivity] = useSetting('hideActivity');
 
   const roomId = useRoom();
   const editor = useEditor();
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 29d5e351..69d65dca 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -29,7 +29,6 @@ import { UseStateProvider } from '../../components/UseStateProvider';
 import { RoomTopicViewer } from '../../components/room-topic-viewer';
 import { useRoom } from '../../hooks/useRoom';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 import { useSpaceOptionally } from '../../hooks/useSpace';
 import { getHomeSearchPath, getSpaceSearchPath, withSearchParam } from '../../pages/pathUtils';
 import { _SearchPathSearchParams } from '../../pages/paths';
@@ -78,7 +77,7 @@ type RoomMenuProps = {
 const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ requestClose }, ref) => {
   const ct = useClient();
   const roomId = useRoom();
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [hideActivity] = useSetting('hideActivity');
 
   const roomNotifications = useRoomNotifications(roomId, roomToNotificationsAtom);
   const notifications = useRoomTotalNotifications(roomNotifications);
@@ -287,7 +286,7 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
       })
     : undefined;
 
-  const [peopleDrawer, setPeopleDrawer] = useSetting(settingsAtom, 'isPeopleDrawer');
+  const [peopleDrawer, setPeopleDrawer] = useSetting('isPeopleDrawer');
 
   const handleSearchClick = () => {
     const searchParams: _SearchPathSearchParams = {
diff --git a/src/app/features/room/hooks/useSendMessage.ts b/src/app/features/room/hooks/useSendMessage.ts
index 1c3bcea3..48fc1f98 100644
--- a/src/app/features/room/hooks/useSendMessage.ts
+++ b/src/app/features/room/hooks/useSendMessage.ts
@@ -11,7 +11,6 @@ import {
   trimCommand,
   trimCustomHtml,
 } from '../../../components/editor';
-import { settingsAtom } from '../../../state/settings';
 import { useSetting } from '../../../state/hooks/settings';
 import { MessageEvent } from '../../../../types/matrix/room';
 import { Command, CommandRecord, SHRUG, TABLEFLIP, UNFLIP } from '../../../hooks/useCommands';
@@ -88,7 +87,7 @@ export const useSendMessage = (
 ): SendMessageCallback => {
   const ct = useClient();
   const roomId = useRoom();
-  const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
+  const [isMarkdown] = useSetting('isMarkdown');
 
   const sendLocalMessage = useSendLocalMessage();
 
diff --git a/src/app/features/room/jump-to-time/JumpToTime.tsx b/src/app/features/room/jump-to-time/JumpToTime.tsx
index 6b8c15bf..5c72877e 100644
--- a/src/app/features/room/jump-to-time/JumpToTime.tsx
+++ b/src/app/features/room/jump-to-time/JumpToTime.tsx
@@ -28,7 +28,6 @@ import { useRoom } from '../../../hooks/useRoom';
 import { getToday, getYesterday, timeDayMonthYear, timeHourMinute } from '../../../utils/time';
 import { DatePicker, TimePicker } from '../../../components/time-date';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import { useClient } from '../../../hooks/useClient';
 
 type JumpToTimeProps = {
@@ -46,7 +45,7 @@ export function JumpToTime({ onCancel, onSubmit }: JumpToTimeProps) {
     ct.state.join.create.read.find((e) => e.roomId === roomId)?.event.origin_server_ts ?? 0;
   const [ts, setTs] = useState(() => Date.now());
 
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [hour24Clock] = useSetting('hour24Clock');
 
   const [timePickerCords, setTimePickerCords] = useState<RectCords>();
   const [datePickerCords, setDatePickerCords] = useState<RectCords>();
diff --git a/src/app/features/room/message/MessageEditor.tsx b/src/app/features/room/message/MessageEditor.tsx
index 339931c6..44f64f22 100644
--- a/src/app/features/room/message/MessageEditor.tsx
+++ b/src/app/features/room/message/MessageEditor.tsx
@@ -46,7 +46,6 @@ import {
   getMentions,
 } from '../../../components/editor';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import { UseStateProvider } from '../../../components/UseStateProvider';
 import { EmojiBoard } from '../../../components/emoji-board';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -66,9 +65,9 @@ export const MessageEditor = as<'div', MessageEditorProps>(
   ({ roomId, event, imagePackRooms, onCancel, ...props }, ref) => {
     const ct = useClient();
     const editor = useEditor();
-    const [enterForNewline] = useSetting(settingsAtom, 'enterForNewline');
-    const [globalToolbar] = useSetting(settingsAtom, 'editorToolbar');
-    const [isMarkdown] = useSetting(settingsAtom, 'isMarkdown');
+    const [enterForNewline] = useSetting('enterForNewline');
+    const [globalToolbar] = useSetting('editorToolbar');
+    const [isMarkdown] = useSetting('isMarkdown');
     const [toolbar, setToolbar] = useState(globalToolbar);
     const isComposing = useComposingCheck();
 
diff --git a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
index 0939f0d5..314dddcc 100644
--- a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
+++ b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
@@ -67,7 +67,6 @@ import {
 import { RenderMatrixEvent, useMatrixEventRenderer } from '../../../hooks/useMatrixEventRenderer';
 import { RenderMessageContent } from '../../../components/RenderMessageContent';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import * as customHtmlCss from '../../../styles/CustomHtml.css';
 import { EncryptedContent } from '../message';
 import { Image } from '../../../components/media';
@@ -272,14 +271,14 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(({ reque
   const pinnedEvents = useRoomPinnedEvents(roomId);
   const sortedPinnedEvent = useMemo(() => Array.from(pinnedEvents).reverse(), [pinnedEvents]);
   const useAuthentication = useMediaAuthentication();
-  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
-  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
+  const [mediaAutoLoad] = useSetting('mediaAutoLoad');
+  const [urlPreview] = useSetting('urlPreview');
 
   const direct = useIsDirectRoom();
-  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
+  const [legacyUsernameColor] = useSetting('legacyUsernameColor');
 
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [hour24Clock] = useSetting('hour24Clock');
+  const [dateFormatString] = useSetting('dateFormatString');
 
   const { navigateRoom } = useRoomNavigate();
   const scrollRef = useRef<HTMLDivElement>(null);
diff --git a/src/app/features/room/thread-view/ThreadView.tsx b/src/app/features/room/thread-view/ThreadView.tsx
index 69c41860..88fad377 100644
--- a/src/app/features/room/thread-view/ThreadView.tsx
+++ b/src/app/features/room/thread-view/ThreadView.tsx
@@ -10,7 +10,6 @@ import { useEditor } from '../../../components/editor';
 import { RoomInput } from '../RoomInput';
 import { TimelineView } from './TimelineView';
 import { useEditorAutoFocus, useThreadFocus } from '../hooks/useEditorAutoFocus';
-import { settingsAtom } from '../../../state/settings';
 import { useSetting } from '../../../state/hooks/settings';
 import { FollowingMembersPlaceholder } from '../components';
 import { ThreadViewFollowing } from './ThreadViewFollowing';
@@ -27,7 +26,7 @@ export function ThreadView({ threadTimeline, threadFocusRef, requestClose }: Thr
   const editor = useEditor();
   const threadInputRef = useRef<HTMLDivElement>(null);
   const threadViewRef = useRef<HTMLDivElement>(null);
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [hideActivity] = useSetting('hideActivity');
 
   useThreadFocus(threadTimeline.threadId, threadFocusRef, threadViewRef);
   useEditorAutoFocus(editor, threadFocusRef, true);
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index 45db35bd..e2c68bbf 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -21,8 +21,8 @@ import {
   RedactedContent,
 } from '../../../components/message';
 import { fallbackReply, getLatestEditEvent, getReplyId } from '../../../utils/room';
-import { useSetting } from '../../../state/hooks/settings';
-import { MessageLayout, settingsAtom } from '../../../state/settings';
+import { useSettings } from '../../../state/hooks/settings';
+import { MessageLayout } from '../../../state/settings';
 import { Reactions, Message } from '../message';
 import * as css from './styles.css';
 import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
@@ -86,19 +86,21 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
   const encryptedRooms = useObservableValue(ct.encryptedRooms);
   const editor = useEditor();
 
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const [messageLayout] = useSetting(settingsAtom, 'messageLayout');
-  const [messageSpacing] = useSetting(settingsAtom, 'messageSpacing');
-  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
-  const direct = useIsDirectRoom();
-  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
-  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
-  const [encUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
-  const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
-  const [showDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+  const {
+    hideActivity,
+    messageLayout,
+    messageSpacing,
+    legacyUsernameColor,
+    mediaAutoLoad,
+    urlPreview,
+    encUrlPreview,
+    developerTools,
+    hour24Clock,
+    dateFormatString,
+  } = useSettings();
 
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const direct = useIsDirectRoom();
+  const showUrlPreview = encryptedRooms.has(roomId) ? encUrlPreview : urlPreview;
 
   const ignoredUsersList = useIgnoredUsers();
   const ignoredUsersSet = useMemo(() => new Set(ignoredUsersList), [ignoredUsersList]);
@@ -321,7 +323,7 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
         onEditId={handleEdit}
         redacted={redacted.has(event.event_id)}
         hideReadReceipts={hideActivity}
-        showDeveloperTools={showDeveloperTools}
+        showDeveloperTools={developerTools}
         memberPowerTag={getMemberPowerTag(event.sender)}
         accessibleTagColors={accessiblePowerTagColors}
         legacyUsernameColor={legacyUsernameColor || direct}
diff --git a/src/app/features/settings/Settings.tsx b/src/app/features/settings/Settings.tsx
index a4d879e8..ea50a9a7 100644
--- a/src/app/features/settings/Settings.tsx
+++ b/src/app/features/settings/Settings.tsx
@@ -93,12 +93,82 @@ const useSettingsMenuItems = (): SettingsMenuItem[] =>
     []
   );
 
+type NavigationListProps = {
+  activePage?: SettingsPages;
+  setActivePage: (page: SettingsPages) => void;
+};
+function NavigationList({ activePage, setActivePage }: NavigationListProps) {
+  const menuItems = useSettingsMenuItems();
+
+  return (
+    <div style={{ flexGrow: 1 }}>
+      {menuItems.map((item) => (
+        <MenuItem
+          key={item.name}
+          variant="Background"
+          radii="400"
+          aria-pressed={activePage === item.page}
+          before={<Icon src={item.icon} size="100" filled={activePage === item.page} />}
+          onClick={() => setActivePage(item.page)}
+        >
+          <Text
+            style={{
+              fontWeight: activePage === item.page ? config.fontWeight.W600 : undefined,
+            }}
+            size="T300"
+            truncate
+          >
+            {item.name}
+          </Text>
+        </MenuItem>
+      ))}
+    </div>
+  );
+}
+
+function LogoutButton() {
+  return (
+    <UseStateProvider initial={false}>
+      {(logout, setLogout) => (
+        <>
+          <Button
+            size="300"
+            variant="Critical"
+            fill="None"
+            radii="Pill"
+            before={<Icon src={Icons.Power} size="100" />}
+            onClick={() => setLogout(true)}
+          >
+            <Text size="B400">Logout</Text>
+          </Button>
+          {logout && (
+            <Overlay open backdrop={<OverlayBackdrop />}>
+              <OverlayCenter>
+                <FocusTrap
+                  focusTrapOptions={{
+                    onDeactivate: () => setLogout(false),
+                    clickOutsideDeactivates: true,
+                    escapeDeactivates: stopPropagation,
+                  }}
+                >
+                  <LogoutDialog handleClose={() => setLogout(false)} />
+                </FocusTrap>
+              </OverlayCenter>
+            </Overlay>
+          )}
+        </>
+      )}
+    </UseStateProvider>
+  );
+}
+
 type SettingsProps = {
   initialPage?: SettingsPages;
   requestClose: () => void;
 };
 export function Settings({ initialPage, requestClose }: SettingsProps) {
   const ct = useClient();
+
   const useAuthentication = useMediaAuthentication();
   const { userId } = ct.session;
   const profile = useUserProfile(userId);
@@ -116,7 +186,6 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
     if (initialPage) return initialPage;
     return screenSize === ScreenSize.Mobile ? undefined : SettingsPages.GeneralPage;
   });
-  const menuItems = useSettingsMenuItems();
 
   const handlePageRequestClose = () => {
     if (screenSize === ScreenSize.Mobile) {
@@ -126,10 +195,12 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
     requestClose();
   };
 
+  const hideSidebar = screenSize === ScreenSize.Mobile && activePage !== undefined;
+
   return (
     <PageRoot
       nav={
-        screenSize === ScreenSize.Mobile && activePage !== undefined ? undefined : (
+        hideSidebar ? undefined : (
           <PageNav size="300">
             <PageNavHeader outlined={false}>
               <Box grow="Yes" gap="200">
@@ -154,61 +225,10 @@ export function Settings({ initialPage, requestClose }: SettingsProps) {
             </PageNavHeader>
             <Box grow="Yes" direction="Column">
               <PageNavContent>
-                <div style={{ flexGrow: 1 }}>
-                  {menuItems.map((item) => (
-                    <MenuItem
-                      key={item.name}
-                      variant="Background"
-                      radii="400"
-                      aria-pressed={activePage === item.page}
-                      before={<Icon src={item.icon} size="100" filled={activePage === item.page} />}
-                      onClick={() => setActivePage(item.page)}
-                    >
-                      <Text
-                        style={{
-                          fontWeight: activePage === item.page ? config.fontWeight.W600 : undefined,
-                        }}
-                        size="T300"
-                        truncate
-                      >
-                        {item.name}
-                      </Text>
-                    </MenuItem>
-                  ))}
-                </div>
+                <NavigationList activePage={activePage} setActivePage={setActivePage} />
               </PageNavContent>
-              <Box style={{ padding: config.space.S200 }} shrink="No" direction="Column">
-                <UseStateProvider initial={false}>
-                  {(logout, setLogout) => (
-                    <>
-                      <Button
-                        size="300"
-                        variant="Critical"
-                        fill="None"
-                        radii="Pill"
-                        before={<Icon src={Icons.Power} size="100" />}
-                        onClick={() => setLogout(true)}
-                      >
-                        <Text size="B400">Logout</Text>
-                      </Button>
-                      {logout && (
-                        <Overlay open backdrop={<OverlayBackdrop />}>
-                          <OverlayCenter>
-                            <FocusTrap
-                              focusTrapOptions={{
-                                onDeactivate: () => setLogout(false),
-                                clickOutsideDeactivates: true,
-                                escapeDeactivates: stopPropagation,
-                              }}
-                            >
-                              <LogoutDialog handleClose={() => setLogout(false)} />
-                            </FocusTrap>
-                          </OverlayCenter>
-                        </Overlay>
-                      )}
-                    </>
-                  )}
-                </UseStateProvider>
+              <Box style={{ padding: config.space.S200 }} shrink="No" direction="Column" gap="100">
+                <LogoutButton />
               </Box>
             </Box>
           </PageNav>
diff --git a/src/app/features/settings/developer-tools/DevelopTools.tsx b/src/app/features/settings/developer-tools/DevelopTools.tsx
index 8b7463df..72ef8a1b 100644
--- a/src/app/features/settings/developer-tools/DevelopTools.tsx
+++ b/src/app/features/settings/developer-tools/DevelopTools.tsx
@@ -8,7 +8,6 @@ import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import {
   AccountDataEditor,
   AccountDataSubmitCallback,
@@ -22,7 +21,7 @@ type DeveloperToolsProps = {
 };
 export function DeveloperTools({ requestClose }: DeveloperToolsProps) {
   const ct = useClient();
-  const [developerTools, setDeveloperTools] = useSetting(settingsAtom, 'developerTools');
+  const [developerTools, setDeveloperTools] = useSetting('developerTools');
 
   const [expand, setExpend] = useState(false);
   const [editAccountData, setEditAccountData] = useState<AccountDataEvent | null>();
diff --git a/src/app/features/settings/devices/DeviceTile.tsx b/src/app/features/settings/devices/DeviceTile.tsx
index 6ddd1165..3b2aad11 100644
--- a/src/app/features/settings/devices/DeviceTile.tsx
+++ b/src/app/features/settings/devices/DeviceTile.tsx
@@ -28,7 +28,6 @@ import { SequenceCardStyle } from '../styles.css';
 import { LogoutDialog } from '../../../components/LogoutDialog';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import { useClient } from '../../../hooks/useClient';
 import { useAlive } from '../../../hooks/useAlive';
 
@@ -45,8 +44,8 @@ export function DeviceTilePlaceholder() {
 }
 
 function DeviceActiveTime({ ts }: { ts: number }) {
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [hour24Clock] = useSetting('hour24Clock');
+  const [dateFormatString] = useSetting('dateFormatString');
 
   return (
     <Text className={BreakWord} size="T200">
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index b861a060..7b685aab 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -32,7 +32,7 @@ import FocusTrap from 'focus-trap-react';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SequenceCard } from '../../../components/sequence-card';
 import { useSetting } from '../../../state/hooks/settings';
-import { DateFormat, MessageLayout, MessageSpacing, settingsAtom } from '../../../state/settings';
+import { DateFormat, MessageLayout, MessageSpacing } from '../../../state/settings';
 import { SettingTile } from '../../../components/setting-tile';
 import { KeySymbol } from '../../../utils/key-symbol';
 import { isMacOS } from '../../../utils/user-agent';
@@ -80,7 +80,7 @@ const ThemeSelector = as<'div', ThemeSelectorProps>(
 function SelectTheme({ disabled }: { disabled?: boolean }) {
   const themes = useThemes();
   const themeNames = useThemeNames();
-  const [themeId, setThemeId] = useSetting(settingsAtom, 'themeId');
+  const [themeId, setThemeId] = useSetting('themeId');
   const [menuCords, setMenuCords] = useState<RectCords>();
   const selectedTheme = themes.find((theme) => theme.id === themeId) ?? LightTheme;
 
@@ -142,8 +142,8 @@ function SystemThemePreferences() {
   const themeKind = useSystemThemeKind();
   const themeNames = useThemeNames();
   const themes = useThemes();
-  const [lightThemeId, setLightThemeId] = useSetting(settingsAtom, 'lightThemeId');
-  const [darkThemeId, setDarkThemeId] = useSetting(settingsAtom, 'darkThemeId');
+  const [lightThemeId, setLightThemeId] = useSetting('lightThemeId');
+  const [darkThemeId, setDarkThemeId] = useSetting('darkThemeId');
 
   const lightThemes = themes.filter((theme) => theme.kind === ThemeKind.Light);
   const darkThemes = themes.filter((theme) => theme.kind === ThemeKind.Dark);
@@ -260,7 +260,7 @@ function SystemThemePreferences() {
 }
 
 function PageZoomInput() {
-  const [pageZoom, setPageZoom] = useSetting(settingsAtom, 'pageZoom');
+  const [pageZoom, setPageZoom] = useSetting('pageZoom');
   const [currentZoom, setCurrentZoom] = useState(`${pageZoom}`);
 
   const handleZoomChange: ChangeEventHandler<HTMLInputElement> = (evt) => {
@@ -304,9 +304,9 @@ function PageZoomInput() {
 }
 
 function Appearance() {
-  const [systemTheme, setSystemTheme] = useSetting(settingsAtom, 'useSystemTheme');
-  const [monochromeMode, setMonochromeMode] = useSetting(settingsAtom, 'monochromeMode');
-  const [twitterEmoji, setTwitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
+  const [systemTheme, setSystemTheme] = useSetting('useSystemTheme');
+  const [monochromeMode, setMonochromeMode] = useSetting('monochromeMode');
+  const [twitterEmoji, setTwitterEmoji] = useSetting('twitterEmoji');
 
   return (
     <Box direction="Column" gap="100">
@@ -662,7 +662,7 @@ function PresetDateFormat({ value, onChange }: PresetDateFormatProps) {
 }
 
 function SelectDateFormat() {
-  const [dateFormatString, setDateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [dateFormatString, setDateFormatString] = useSetting('dateFormatString');
   const [selectedDateFormat, setSelectedDateFormat] = useState(dateFormatString);
   const customDateFormat = selectedDateFormat === '';
 
@@ -688,7 +688,7 @@ function SelectDateFormat() {
 }
 
 function DateAndTime() {
-  const [hour24Clock, setHour24Clock] = useSetting(settingsAtom, 'hour24Clock');
+  const [hour24Clock, setHour24Clock] = useSetting('hour24Clock');
 
   return (
     <Box direction="Column" gap="100">
@@ -708,9 +708,9 @@ function DateAndTime() {
 }
 
 function Editor() {
-  const [enterForNewline, setEnterForNewline] = useSetting(settingsAtom, 'enterForNewline');
-  const [isMarkdown, setIsMarkdown] = useSetting(settingsAtom, 'isMarkdown');
-  const [hideActivity, setHideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [enterForNewline, setEnterForNewline] = useSetting('enterForNewline');
+  const [isMarkdown, setIsMarkdown] = useSetting('isMarkdown');
+  const [hideActivity, setHideActivity] = useSetting('hideActivity');
 
   return (
     <Box direction="Column" gap="100">
@@ -743,7 +743,7 @@ function Editor() {
 
 function SelectMessageLayout() {
   const [menuCords, setMenuCords] = useState<RectCords>();
-  const [messageLayout, setMessageLayout] = useSetting(settingsAtom, 'messageLayout');
+  const [messageLayout, setMessageLayout] = useSetting('messageLayout');
   const messageLayoutItems = useMessageLayoutItems();
 
   const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -812,7 +812,7 @@ function SelectMessageLayout() {
 
 function SelectMessageSpacing() {
   const [menuCords, setMenuCords] = useState<RectCords>();
-  const [messageSpacing, setMessageSpacing] = useSetting(settingsAtom, 'messageSpacing');
+  const [messageSpacing, setMessageSpacing] = useSetting('messageSpacing');
   const messageSpacingItems = useMessageSpacingItems();
 
   const handleMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -880,22 +880,13 @@ function SelectMessageSpacing() {
 }
 
 function Messages() {
-  const [legacyUsernameColor, setLegacyUsernameColor] = useSetting(
-    settingsAtom,
-    'legacyUsernameColor'
-  );
-  const [hideMembershipEvents, setHideMembershipEvents] = useSetting(
-    settingsAtom,
-    'hideMembershipEvents'
-  );
-  const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting(
-    settingsAtom,
-    'hideNickAvatarEvents'
-  );
-  const [mediaAutoLoad, setMediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
-  const [urlPreview, setUrlPreview] = useSetting(settingsAtom, 'urlPreview');
-  const [encUrlPreview, setEncUrlPreview] = useSetting(settingsAtom, 'encUrlPreview');
-  const [showHiddenEvents, setShowHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
+  const [legacyUsernameColor, setLegacyUsernameColor] = useSetting('legacyUsernameColor');
+  const [hideMembershipEvents, setHideMembershipEvents] = useSetting('hideMembershipEvents');
+  const [hideNickAvatarEvents, setHideNickAvatarEvents] = useSetting('hideNickAvatarEvents');
+  const [mediaAutoLoad, setMediaAutoLoad] = useSetting('mediaAutoLoad');
+  const [urlPreview, setUrlPreview] = useSetting('urlPreview');
+  const [encUrlPreview, setEncUrlPreview] = useSetting('encUrlPreview');
+  const [showHiddenEvents, setShowHiddenEvents] = useSetting('showHiddenEvents');
 
   return (
     <Box direction="Column" gap="100">
diff --git a/src/app/features/settings/notifications/SystemNotification.tsx b/src/app/features/settings/notifications/SystemNotification.tsx
index 11c077ff..ce2b0e22 100644
--- a/src/app/features/settings/notifications/SystemNotification.tsx
+++ b/src/app/features/settings/notifications/SystemNotification.tsx
@@ -6,7 +6,6 @@ import { SequenceCard } from '../../../components/sequence-card';
 import { SequenceCardStyle } from '../styles.css';
 import { SettingTile } from '../../../components/setting-tile';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import { getNotificationState, usePermissionState } from '../../../hooks/usePermission';
 import { useEmailNotifications } from '../../../hooks/useEmailNotifications';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
@@ -95,11 +94,8 @@ function EmailNotification() {
 
 export function SystemNotification() {
   const notifPermission = usePermissionState('notifications', getNotificationState());
-  const [showNotifications, setShowNotifications] = useSetting(settingsAtom, 'showNotifications');
-  const [isNotificationSounds, setIsNotificationSounds] = useSetting(
-    settingsAtom,
-    'isNotificationSounds'
-  );
+  const [showNotifications, setShowNotifications] = useSetting('showNotifications');
+  const [isNotificationSounds, setIsNotificationSounds] = useSetting('isNotificationSounds');
 
   const requestNotificationPermission = () => {
     window.Notification.requestPermission();
diff --git a/src/app/hooks/sw/useSessionRequest.ts b/src/app/hooks/sw/useSessionRequest.ts
new file mode 100644
index 00000000..cf86eea6
--- /dev/null
+++ b/src/app/hooks/sw/useSessionRequest.ts
@@ -0,0 +1,34 @@
+import { useEffect } from 'react';
+import { Session } from '../../../client/sessions';
+
+const getServiceWorker = () => {
+  if ('serviceWorker' in navigator) {
+    return navigator.serviceWorker;
+  }
+  return undefined;
+};
+
+export const useSessionRequest = (session?: Session) => {
+  useEffect(() => {
+    const handleSWMessages = (ev: MessageEvent<any>) => {
+      if (!session) return;
+
+      const { type, id } = ev.data ?? {};
+
+      if (type === 'session-request') {
+        getServiceWorker()?.controller?.postMessage({
+          type: 'session-request',
+          id,
+          baseUrl: session.baseUrl,
+          accessToken: session.accessToken,
+        });
+        // sendSessionToSW();
+      }
+    };
+
+    getServiceWorker()?.addEventListener('message', handleSWMessages);
+    return () => {
+      getServiceWorker()?.removeEventListener('message', handleSWMessages);
+    };
+  }, [session]);
+};
diff --git a/src/app/hooks/useRoomLatestRenderedEvent.ts b/src/app/hooks/useRoomLatestRenderedEvent.ts
deleted file mode 100644
index fd0ed9e5..00000000
--- a/src/app/hooks/useRoomLatestRenderedEvent.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/* eslint-disable no-continue */
-import { MatrixEvent, Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
-import { useEffect, useState } from 'react';
-import { settingsAtom } from '../state/settings';
-import { useSetting } from '../state/hooks/settings';
-import { MessageEvent, StateEvent } from '../../types/matrix/room';
-import { isMembershipChanged, reactionOrEditEvent } from '../utils/room';
-
-export const useRoomLatestRenderedEvent = (room: Room) => {
-  const [hideMembershipEvents] = useSetting(settingsAtom, 'hideMembershipEvents');
-  const [hideNickAvatarEvents] = useSetting(settingsAtom, 'hideNickAvatarEvents');
-  const [showHiddenEvents] = useSetting(settingsAtom, 'showHiddenEvents');
-  const [latestEvent, setLatestEvent] = useState<MatrixEvent>();
-
-  useEffect(() => {
-    const getLatestEvent = (): MatrixEvent | undefined => {
-      const liveEvents = room.getLiveTimeline().getEvents();
-      for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
-        const evt = liveEvents[i];
-
-        if (!evt) continue;
-        if (reactionOrEditEvent(evt)) continue;
-        if (evt.getType() === StateEvent.RoomMember) {
-          const membershipChanged = isMembershipChanged(evt);
-          if (membershipChanged && hideMembershipEvents) continue;
-          if (!membershipChanged && hideNickAvatarEvents) continue;
-          return evt;
-        }
-
-        if (
-          evt.getType() === MessageEvent.RoomMessage ||
-          evt.getType() === MessageEvent.RoomMessageEncrypted ||
-          evt.getType() === MessageEvent.Sticker ||
-          evt.getType() === StateEvent.RoomName ||
-          evt.getType() === StateEvent.RoomTopic ||
-          evt.getType() === StateEvent.RoomAvatar
-        ) {
-          return evt;
-        }
-
-        if (showHiddenEvents) return evt;
-      }
-      return undefined;
-    };
-
-    const handleTimelineEvent: RoomEventHandlerMap[RoomEvent.Timeline] = () => {
-      setLatestEvent(getLatestEvent());
-    };
-    setLatestEvent(getLatestEvent());
-
-    room.on(RoomEvent.Timeline, handleTimelineEvent);
-    return () => {
-      room.removeListener(RoomEvent.Timeline, handleTimelineEvent);
-    };
-  }, [room, hideMembershipEvents, hideNickAvatarEvents, showHiddenEvents]);
-
-  return latestEvent;
-};
diff --git a/src/app/hooks/useRoomNavigate.ts b/src/app/hooks/useRoomNavigate.ts
index 67912b4c..dd502430 100644
--- a/src/app/hooks/useRoomNavigate.ts
+++ b/src/app/hooks/useRoomNavigate.ts
@@ -11,7 +11,6 @@ import { getOrphanParents, guessPerfectParent } from '../utils/room';
 import { roomToParentsAtom } from '../state/room/roomToParents';
 import { mDirectAtom } from '../state/mDirectList';
 import { useSelectedSpace } from './router/useSelectedSpace';
-import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 import { useClient } from './useClient';
 import { getJoinRoomStateId } from '../../client/storage/collections';
@@ -23,7 +22,7 @@ export const useRoomNavigate = () => {
   const roomToParents = useAtomValue(roomToParentsAtom);
   const mDirects = useAtomValue(mDirectAtom);
   const spaceSelectedId = useSelectedSpace();
-  const [developerTools] = useSetting(settingsAtom, 'developerTools');
+  const [developerTools] = useSetting('developerTools');
 
   const navigateSpace = useCallback(
     (roomId: string) => {
diff --git a/src/app/hooks/useSessions.ts b/src/app/hooks/useSessions.ts
new file mode 100644
index 00000000..0f371b99
--- /dev/null
+++ b/src/app/hooks/useSessions.ts
@@ -0,0 +1,23 @@
+import { useAtomValue } from 'jotai';
+import { createContext, useContext } from 'react';
+import { sessionsAtom } from '../state/sessions';
+import { Session } from '../../client/sessions';
+
+export const useSessions = () => {
+  const sessions = useAtomValue(sessionsAtom);
+
+  return sessions;
+};
+
+const SessionContext = createContext<Session | null>(null);
+export const SessionContextProvider = SessionContext.Provider;
+
+export const useSession = () => {
+  const session = useContext(SessionContext);
+
+  if (!session) {
+    throw new Error('Session is not provided!');
+  }
+
+  return session;
+};
diff --git a/src/app/hooks/useTheme.ts b/src/app/hooks/useTheme.ts
index cdbb9dba..4bbc8530 100644
--- a/src/app/hooks/useTheme.ts
+++ b/src/app/hooks/useTheme.ts
@@ -2,7 +2,6 @@ import { lightTheme } from 'folds';
 import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { onDarkFontWeight, onLightFontWeight } from '../../config.css';
 import { butterTheme, darkTheme, silverTheme } from '../../colors.css';
-import { settingsAtom } from '../state/settings';
 import { useSetting } from '../state/hooks/settings';
 
 export enum ThemeKind {
@@ -78,10 +77,10 @@ export const useSystemThemeKind = (): ThemeKind => {
 export const useActiveTheme = (): Theme => {
   const systemThemeKind = useSystemThemeKind();
   const themes = useThemes();
-  const [systemTheme] = useSetting(settingsAtom, 'useSystemTheme');
-  const [themeId] = useSetting(settingsAtom, 'themeId');
-  const [lightThemeId] = useSetting(settingsAtom, 'lightThemeId');
-  const [darkThemeId] = useSetting(settingsAtom, 'darkThemeId');
+  const [systemTheme] = useSetting('useSystemTheme');
+  const [themeId] = useSetting('themeId');
+  const [lightThemeId] = useSetting('lightThemeId');
+  const [darkThemeId] = useSetting('darkThemeId');
 
   if (!systemTheme) {
     const selectedTheme = themes.find((theme) => theme.id === themeId) ?? LightTheme;
diff --git a/src/app/hooks/useUserProfile.ts b/src/app/hooks/useUserProfile.ts
index a24d12e8..f9900e81 100644
--- a/src/app/hooks/useUserProfile.ts
+++ b/src/app/hooks/useUserProfile.ts
@@ -1,7 +1,7 @@
 import { useCallback } from 'react';
 import { useQuery } from '@tanstack/react-query';
 import { getProfile, GetProfileOK } from 'neurone/lib/api/matrix/client/v3/profile';
-import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { MatrixRequest, parseMatrixResp } from 'neurone/lib/matrix-request';
 import { ObjectReader } from 'neurone/lib/utils';
 import { useClient } from './useClient';
 
@@ -24,11 +24,13 @@ export type UserProfile = {
   pronouns?: UserPronoun[];
   biography?: UserBiography;
 };
-export const useUserProfile = (userId: string): UserProfile | undefined => {
-  const ct = useClient();
 
+export const useUserProfileRequest = (
+  userId: string,
+  request: MatrixRequest
+): UserProfile | undefined => {
   const fetchProfile = useCallback(async (): Promise<UserProfile> => {
-    const response = await ct.requestAuthJSON(
+    const response = await request(
       getProfile({
         pathParams: { userId },
       })
@@ -75,7 +77,7 @@ export const useUserProfile = (userId: string): UserProfile | undefined => {
           }
         : undefined,
     };
-  }, [ct, userId]);
+  }, [request, userId]);
 
   const { data } = useQuery({
     queryKey: ['profile', userId],
@@ -87,3 +89,9 @@ export const useUserProfile = (userId: string): UserProfile | undefined => {
 
   return data;
 };
+
+export const useUserProfile = (userId: string): UserProfile | undefined => {
+  const ct = useClient();
+
+  return useUserProfileRequest(userId, ct.requestAuthJSON);
+};
diff --git a/src/app/pages/AccountSelector.tsx b/src/app/pages/AccountSelector.tsx
new file mode 100644
index 00000000..9b012cce
--- /dev/null
+++ b/src/app/pages/AccountSelector.tsx
@@ -0,0 +1,200 @@
+import React, { useMemo, useRef } from 'react';
+import { Avatar, Box, Button, config, Icon, Icons, Text } from 'folds';
+import { Link, Navigate, Outlet, useNavigate } from 'react-router-dom';
+import { useAtom, useAtomValue } from 'jotai';
+import { AuthLayout, AuthLogo } from '../components/auth-layout';
+import { SequenceCard } from '../components/sequence-card';
+import { SettingTile } from '../components/setting-tile';
+import {
+  getAppPathFromHref,
+  getHomePath,
+  getLoginPath,
+  getOriginBaseUrl,
+  getRegisterPath,
+} from './pathUtils';
+import { getMxIdLocalPart, getMxIdServer } from '../utils/matrix';
+import { UserAvatar } from '../components/user-avatar';
+import { SessionContextProvider, useSessions } from '../hooks/useSessions';
+import { useUnauthThemeManager } from './ThemeManager';
+import { sessionUserIdAtom } from '../state/sessions';
+import { useClientConfig } from '../hooks/useClientConfig';
+import {
+  deleteAfterLoginRedirectPath,
+  getAfterLoginRedirectPath,
+  setAfterLoginRedirectPath,
+} from './afterLoginRedirectPath';
+import { Session } from '../../client/sessions';
+import { OrDivider } from '../components/OrDivider';
+import { getAuthJSONRequest } from '../../client/request';
+import { useUserProfileRequest } from '../hooks/useUserProfile';
+import { mxcToHttp } from '../../client/mxcToHttp';
+import { useSessionRequest } from '../hooks/sw/useSessionRequest';
+
+function AccountCard({ session }: { session: Session }) {
+  const { userId } = session;
+  const navigate = useNavigate();
+  const [sessionUserId, setSessionUserId] = useAtom(sessionUserIdAtom);
+
+  const request = useMemo(
+    () => getAuthJSONRequest(session.baseUrl, session.accessToken),
+    [session]
+  );
+
+  const profile = useUserProfileRequest(userId, request);
+
+  const username = getMxIdLocalPart(userId) ?? userId;
+  const server = getMxIdServer(userId) ?? userId;
+
+  const displayName = profile?.displayName ?? username;
+  const avatarUrl = profile?.avatarUrl
+    ? mxcToHttp(session.baseUrl, profile.avatarUrl, true).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
+    : undefined;
+
+  const handleClick = () => {
+    if (sessionUserId !== userId) {
+      setSessionUserId(userId);
+    }
+    const path = getAfterLoginRedirectPath();
+    if (path) deleteAfterLoginRedirectPath();
+    navigate(path ?? getHomePath());
+  };
+
+  return (
+    <SequenceCard
+      direction="Column"
+      style={{ padding: `${config.space.S300} ${config.space.S400}` }}
+      variant="SurfaceVariant"
+      as="button"
+      type="button"
+      onClick={handleClick}
+    >
+      <SettingTile
+        before={
+          <Avatar size="300" radii="400">
+            <UserAvatar
+              userId={userId}
+              src={avatarUrl}
+              alt={userId}
+              renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+            />
+          </Avatar>
+        }
+      >
+        <Box grow="Yes" direction="Column">
+          <Box gap="200" justifyContent="SpaceBetween" alignItems="Center">
+            <Text truncate>
+              <b>{displayName}</b>
+            </Text>
+          </Box>
+          <Box gap="200" justifyContent="SpaceBetween">
+            <Text size="T200" truncate>
+              {username}
+            </Text>
+            <Text size="L400" truncate>
+              {server}
+            </Text>
+          </Box>
+        </Box>
+      </SettingTile>
+    </SequenceCard>
+  );
+}
+
+export function AccountSelector() {
+  useUnauthThemeManager();
+  const navigate = useNavigate();
+
+  const sessions = useSessions();
+  useSessionRequest(sessions[0]);
+
+  if (sessions.length === 0) {
+    return <Navigate to={getLoginPath()} replace />;
+  }
+
+  return (
+    <AuthLayout hideHeader>
+      <Box style={{ position: 'relative' }} direction="Column" gap="500">
+        <span data-spacing-node />
+        <Box direction="Column" gap="400" alignItems="Center">
+          <AuthLogo large />
+          <Box direction="Column" gap="100" alignItems="Center">
+            <Text size="H3" priority="400" align="Center">
+              Welcome to Cinny
+            </Text>
+            <Text size="T300" priority="400" align="Center">
+              Choose an account to continue.
+            </Text>
+          </Box>
+        </Box>
+        <span data-spacing-node />
+        <Box direction="Column" gap="100">
+          <Text size="L400" priority="400">
+            Accounts
+          </Text>
+          {sessions.map((session) => (
+            <AccountCard key={session.userId} session={session} />
+          ))}
+        </Box>
+        <OrDivider />
+        <Box direction="Column" gap="300">
+          <Button
+            type="button"
+            variant="Primary"
+            size="500"
+            before={<Icon size="400" src={Icons.Plus} />}
+            onClick={() => navigate(getLoginPath())}
+          >
+            <Text as="span" size="B500">
+              Add Account
+            </Text>
+          </Button>
+        </Box>
+        <span data-spacing-node />
+        <Text size="T300" align="Center">
+          Do not have an account? <Link to={getRegisterPath()}>Register</Link>
+        </Text>
+      </Box>
+    </AuthLayout>
+  );
+}
+
+export function ClientAccountSelector() {
+  const clientConfig = useClientConfig();
+
+  const prevUserIdRef = useRef<string>();
+
+  const userId = useAtomValue(sessionUserIdAtom);
+  const prevUserId = prevUserIdRef.current;
+  prevUserIdRef.current = userId;
+
+  const sessions = useSessions();
+  const session = useMemo(() => sessions.find((s) => userId === s.userId), [userId, sessions]);
+
+  useSessionRequest(session ?? sessions[0]);
+
+  if (!session) {
+    return <AccountSelector />;
+  }
+
+  if (sessions.length === 0) {
+    const afterLoginPath = getAppPathFromHref(
+      getOriginBaseUrl(clientConfig.hashRouter),
+      window.location.href
+    );
+    if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
+
+    return <Navigate to={getLoginPath()} replace />;
+  }
+
+  return (
+    <SessionContextProvider key={session.userId} value={session}>
+      <Outlet />
+      {/* reset url from previous account */}
+      {prevUserId && prevUserId !== userId && <Navigate to={getHomePath()} />}
+    </SessionContextProvider>
+  );
+}
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index b21db50f..72580f00 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -9,7 +9,7 @@ import {
 } from 'react-router-dom';
 
 import { ClientConfig } from '../hooks/useClientConfig';
-import { AuthLayout, Login, Register, ResetPassword } from './auth';
+import { AuthRoot, Login, Register, ResetPassword } from './auth';
 import {
   DIRECT_PATH,
   EXPLORE_PATH,
@@ -30,22 +30,13 @@ import {
   _SERVER_PATH,
   CREATE_PATH,
 } from './paths';
-import {
-  getAppPathFromHref,
-  getExploreFeaturedPath,
-  getHomePath,
-  getInboxNotificationsPath,
-  getLoginPath,
-  getOriginBaseUrl,
-  getSpaceLobbyPath,
-} from './pathUtils';
+import { getExploreFeaturedPath, getInboxNotificationsPath, getSpaceLobbyPath } from './pathUtils';
 import { ClientBindAtoms, ClientLayout, ClientRoot } from './client';
 import { Home, HomeRouteRoomProvider, HomeSearch } from './client/home';
 import { Direct, DirectCreate, DirectRouteRoomProvider } from './client/direct';
 import { RouteSpaceProvider, Space, SpaceRouteRoomProvider, SpaceSearch } from './client/space';
 import { Explore, FeaturedRooms, PublicRooms } from './client/explore';
 import { Notifications, Inbox, Invites } from './client/inbox';
-import { setAfterLoginRedirectPath } from './afterLoginRedirectPath';
 import { Room } from '../features/room';
 import { Lobby } from '../features/lobby';
 import { WelcomePage } from './client/WelcomePage';
@@ -55,7 +46,7 @@ import { ScreenSize } from '../hooks/useScreenSize';
 import { MobileFriendlyPageNav, MobileFriendlyClientNav } from './MobileFriendly';
 import { ClientInitStorageAtom } from './client/ClientInitStorageAtom';
 import { ClientNonUIFeatures } from './client/ClientNonUIFeatures';
-import { AuthRouteThemeManager, UnAuthRouteThemeManager } from './ThemeManager';
+import { AuthRouteThemeManager } from './ThemeManager';
 import { ReceiveSelfDeviceVerification } from '../components/DeviceVerification';
 import { RoomSettingsRenderer } from '../features/room-settings';
 import { ClientRoomsNotificationPreferences } from './client/ClientRoomsNotificationPreferences';
@@ -66,9 +57,9 @@ import { HomeCreateRoom } from './client/home/CreateRoom';
 import { Create } from './client/create';
 import { CreateSpaceModalRenderer } from '../features/create-space';
 import { SearchModalRenderer } from '../features/search';
-import { getFallbackSession } from '../state/sessions';
 import { CallStatusRenderer } from '../features/call-status';
 import { CallEmbedProvider } from '../components/CallEmbedProvider';
+import { AccountSelector, ClientAccountSelector } from './AccountSelector';
 
 export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize) => {
   const { hashRouter } = clientConfig;
@@ -76,217 +67,185 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
 
   const routes = createRoutesFromElements(
     <Route>
-      <Route
-        index
-        loader={() => {
-          if (getFallbackSession()) return redirect(getHomePath());
-          const afterLoginPath = getAppPathFromHref(getOriginBaseUrl(), window.location.href);
-          if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
-          return redirect(getLoginPath());
-        }}
-      />
-      <Route
-        loader={() => {
-          if (getFallbackSession()) {
-            return redirect(getHomePath());
-          }
-
-          return null;
-        }}
-        element={
-          <>
-            <AuthLayout />
-            <UnAuthRouteThemeManager />
-          </>
-        }
-      >
+      <Route index element={<AccountSelector />} />
+      <Route element={<AuthRoot />}>
         <Route path={LOGIN_PATH} element={<Login />} />
         <Route path={REGISTER_PATH} element={<Register />} />
         <Route path={RESET_PASSWORD_PATH} element={<ResetPassword />} />
       </Route>
 
-      <Route
-        loader={() => {
-          const session = getFallbackSession();
-          if (!session) {
-            const afterLoginPath = getAppPathFromHref(
-              getOriginBaseUrl(hashRouter),
-              window.location.href
-            );
-            if (afterLoginPath) setAfterLoginRedirectPath(afterLoginPath);
-            return redirect(getLoginPath());
-          }
-          return null;
-        }}
-        element={
-          <AuthRouteThemeManager>
-            <ClientRoot>
-              <ClientInitStorageAtom>
-                <ClientRoomsNotificationPreferences>
-                  <ClientBindAtoms />
-                  <ClientNonUIFeatures />
-                  <ClientLayout
-                    nav={
-                      <MobileFriendlyClientNav>
-                        <SidebarNav />
-                      </MobileFriendlyClientNav>
-                    }
-                  >
-                    <Outlet />
-                  </ClientLayout>
-                  <SearchModalRenderer />
-                  <UserRoomProfileRenderer />
-                  <CreateRoomModalRenderer />
-                  <CreateSpaceModalRenderer />
-                  <RoomSettingsRenderer />
-                  <SpaceSettingsRenderer />
-                  <ReceiveSelfDeviceVerification />
-                </ClientRoomsNotificationPreferences>
-              </ClientInitStorageAtom>
-            </ClientRoot>
-          </AuthRouteThemeManager>
-        }
-      >
+      <Route element={<ClientAccountSelector />}>
         <Route
-          path={HOME_PATH}
           element={
-            <PageRoot
-              nav={
-                <MobileFriendlyPageNav path={HOME_PATH}>
-                  <Home />
-                </MobileFriendlyPageNav>
-              }
-            >
-              <Outlet />
-            </PageRoot>
+            <ClientInitStorageAtom>
+              <AuthRouteThemeManager>
+                <ClientRoot>
+                  <ClientRoomsNotificationPreferences>
+                    <ClientBindAtoms />
+                    <ClientNonUIFeatures />
+                    <ClientLayout
+                      nav={
+                        <MobileFriendlyClientNav>
+                          <SidebarNav />
+                        </MobileFriendlyClientNav>
+                      }
+                    >
+                      <Outlet />
+                    </ClientLayout>
+                    <SearchModalRenderer />
+                    <UserRoomProfileRenderer />
+                    <CreateRoomModalRenderer />
+                    <CreateSpaceModalRenderer />
+                    <RoomSettingsRenderer />
+                    <SpaceSettingsRenderer />
+                    <ReceiveSelfDeviceVerification />
+                  </ClientRoomsNotificationPreferences>
+                </ClientRoot>
+              </AuthRouteThemeManager>
+            </ClientInitStorageAtom>
           }
         >
-          {mobile ? null : <Route index element={<WelcomePage />} />}
-          <Route path={_CREATE_PATH} element={<HomeCreateRoom />} />
-          <Route path={_JOIN_PATH} element={<p>join</p>} />
-          {/* <Route path={_SEARCH_PATH} element={<HomeSearch />} /> */}
           <Route
-            path={_ROOM_PATH}
+            path={HOME_PATH}
             element={
-              <HomeRouteRoomProvider>
-                <Room />
-              </HomeRouteRoomProvider>
-            }
-          />
-        </Route>
-        <Route
-          path={DIRECT_PATH}
-          element={
-            <PageRoot
-              nav={
-                <MobileFriendlyPageNav path={DIRECT_PATH}>
-                  <Direct />
-                </MobileFriendlyPageNav>
-              }
-            >
-              <Outlet />
-            </PageRoot>
-          }
-        >
-          {mobile ? null : <Route index element={<WelcomePage />} />}
-          <Route path={_CREATE_PATH} element={<DirectCreate />} />
-          <Route
-            path={_ROOM_PATH}
-            element={
-              <DirectRouteRoomProvider>
-                <Room />
-              </DirectRouteRoomProvider>
-            }
-          />
-        </Route>
-        <Route
-          path={SPACE_PATH}
-          element={
-            <RouteSpaceProvider>
               <PageRoot
                 nav={
-                  <MobileFriendlyPageNav path={SPACE_PATH}>
-                    <Space />
+                  <MobileFriendlyPageNav path={HOME_PATH}>
+                    <Home />
                   </MobileFriendlyPageNav>
                 }
               >
                 <Outlet />
               </PageRoot>
-            </RouteSpaceProvider>
-          }
-        >
-          {mobile ? null : (
-            <Route
-              index
-              loader={({ params }) => {
-                const { spaceIdOrAlias } = params;
-                if (spaceIdOrAlias) {
-                  return redirect(getSpaceLobbyPath(spaceIdOrAlias));
-                }
-                return null;
-              }}
-              element={<WelcomePage />}
-            />
-          )}
-          <Route path={_LOBBY_PATH} element={<Lobby />} />
-          {/*<Route path={_SEARCH_PATH} element={<SpaceSearch />} /> */}
-          <Route
-            path={_ROOM_PATH}
-            element={
-              <SpaceRouteRoomProvider>
-                <Room />
-              </SpaceRouteRoomProvider>
             }
-          />
-        </Route>
-        <Route
-          path={EXPLORE_PATH}
-          element={
-            <PageRoot
-              nav={
-                <MobileFriendlyPageNav path={EXPLORE_PATH}>
-                  <Explore />
-                </MobileFriendlyPageNav>
-              }
-            >
-              <Outlet />
-            </PageRoot>
-          }
-        >
-          {mobile ? null : (
+          >
+            {mobile ? null : <Route index element={<WelcomePage />} />}
+            <Route path={_CREATE_PATH} element={<HomeCreateRoom />} />
+            <Route path={_JOIN_PATH} element={<p>join</p>} />
+            {/* <Route path={_SEARCH_PATH} element={<HomeSearch />} /> */}
             <Route
-              index
-              loader={() => redirect(getExploreFeaturedPath())}
-              element={<WelcomePage />}
-            />
-          )}
-          <Route path={_FEATURED_PATH} element={<FeaturedRooms />} />
-          <Route path={_SERVER_PATH} element={<PublicRooms />} />
-        </Route>
-        <Route path={CREATE_PATH} element={<Create />} />
-        <Route
-          path={INBOX_PATH}
-          element={
-            <PageRoot
-              nav={
-                <MobileFriendlyPageNav path={INBOX_PATH}>
-                  <Inbox />
-                </MobileFriendlyPageNav>
+              path={_ROOM_PATH}
+              element={
+                <HomeRouteRoomProvider>
+                  <Room />
+                </HomeRouteRoomProvider>
               }
-            >
-              <Outlet />
-            </PageRoot>
-          }
-        >
-          {mobile ? null : (
-            <Route
-              index
-              loader={() => redirect(getInboxNotificationsPath())}
-              element={<WelcomePage />}
             />
-          )}
-          <Route path={_NOTIFICATIONS_PATH} element={<Notifications />} />
-          <Route path={_INVITES_PATH} element={<Invites />} />
+          </Route>
+          <Route
+            path={DIRECT_PATH}
+            element={
+              <PageRoot
+                nav={
+                  <MobileFriendlyPageNav path={DIRECT_PATH}>
+                    <Direct />
+                  </MobileFriendlyPageNav>
+                }
+              >
+                <Outlet />
+              </PageRoot>
+            }
+          >
+            {mobile ? null : <Route index element={<WelcomePage />} />}
+            <Route path={_CREATE_PATH} element={<DirectCreate />} />
+            <Route
+              path={_ROOM_PATH}
+              element={
+                <DirectRouteRoomProvider>
+                  <Room />
+                </DirectRouteRoomProvider>
+              }
+            />
+          </Route>
+          <Route
+            path={SPACE_PATH}
+            element={
+              <RouteSpaceProvider>
+                <PageRoot
+                  nav={
+                    <MobileFriendlyPageNav path={SPACE_PATH}>
+                      <Space />
+                    </MobileFriendlyPageNav>
+                  }
+                >
+                  <Outlet />
+                </PageRoot>
+              </RouteSpaceProvider>
+            }
+          >
+            {mobile ? null : (
+              <Route
+                index
+                loader={({ params }) => {
+                  const { spaceIdOrAlias } = params;
+                  if (spaceIdOrAlias) {
+                    return redirect(getSpaceLobbyPath(spaceIdOrAlias));
+                  }
+                  return null;
+                }}
+                element={<WelcomePage />}
+              />
+            )}
+            <Route path={_LOBBY_PATH} element={<Lobby />} />
+            {/*<Route path={_SEARCH_PATH} element={<SpaceSearch />} /> */}
+            <Route
+              path={_ROOM_PATH}
+              element={
+                <SpaceRouteRoomProvider>
+                  <Room />
+                </SpaceRouteRoomProvider>
+              }
+            />
+          </Route>
+          <Route
+            path={EXPLORE_PATH}
+            element={
+              <PageRoot
+                nav={
+                  <MobileFriendlyPageNav path={EXPLORE_PATH}>
+                    <Explore />
+                  </MobileFriendlyPageNav>
+                }
+              >
+                <Outlet />
+              </PageRoot>
+            }
+          >
+            {mobile ? null : (
+              <Route
+                index
+                loader={() => redirect(getExploreFeaturedPath())}
+                element={<WelcomePage />}
+              />
+            )}
+            <Route path={_FEATURED_PATH} element={<FeaturedRooms />} />
+            <Route path={_SERVER_PATH} element={<PublicRooms />} />
+          </Route>
+          <Route path={CREATE_PATH} element={<Create />} />
+          <Route
+            path={INBOX_PATH}
+            element={
+              <PageRoot
+                nav={
+                  <MobileFriendlyPageNav path={INBOX_PATH}>
+                    <Inbox />
+                  </MobileFriendlyPageNav>
+                }
+              >
+                <Outlet />
+              </PageRoot>
+            }
+          >
+            {mobile ? null : (
+              <Route
+                index
+                loader={() => redirect(getInboxNotificationsPath())}
+                element={<WelcomePage />}
+              />
+            )}
+            <Route path={_NOTIFICATIONS_PATH} element={<Notifications />} />
+            <Route path={_INVITES_PATH} element={<Invites />} />
+          </Route>
         </Route>
       </Route>
       <Route path="/*" element={<p>Page not found</p>} />
diff --git a/src/app/pages/ThemeManager.tsx b/src/app/pages/ThemeManager.tsx
index 69d50cdb..2f99199e 100644
--- a/src/app/pages/ThemeManager.tsx
+++ b/src/app/pages/ThemeManager.tsx
@@ -9,39 +9,45 @@ import {
   useSystemThemeKind,
 } from '../hooks/useTheme';
 import { useSetting } from '../state/hooks/settings';
-import { settingsAtom } from '../state/settings';
+import { ContainerColor } from '../styles/ContainerColor.css';
 
-export function UnAuthRouteThemeManager() {
+export const useUnauthThemeManager = () => {
   const systemThemeKind = useSystemThemeKind();
 
   useEffect(() => {
-    document.body.className = '';
-    document.body.classList.add(configClass, varsClass);
+    document.documentElement.className = '';
+    document.documentElement.classList.add(
+      configClass,
+      varsClass,
+      ...ContainerColor({ variant: 'Background' }).split(' ')
+    );
     if (systemThemeKind === ThemeKind.Dark) {
-      document.body.classList.add(...DarkTheme.classNames);
+      document.documentElement.classList.add(...DarkTheme.classNames);
     }
     if (systemThemeKind === ThemeKind.Light) {
-      document.body.classList.add(...LightTheme.classNames);
+      document.documentElement.classList.add(...LightTheme.classNames);
     }
   }, [systemThemeKind]);
-
-  return null;
-}
+};
 
 export function AuthRouteThemeManager({ children }: { children: ReactNode }) {
   const activeTheme = useActiveTheme();
-  const [monochromeMode] = useSetting(settingsAtom, 'monochromeMode');
+  const [monochromeMode] = useSetting('monochromeMode');
 
   useEffect(() => {
-    document.body.className = '';
-    document.body.classList.add(configClass, varsClass);
+    document.documentElement.className = '';
+    document.documentElement.classList.add(
+      configClass,
+      varsClass,
+      ...ContainerColor({ variant: 'Background' }).split(' ')
+    );
 
-    document.body.classList.add(...activeTheme.classNames);
+    document.documentElement.classList.add(...activeTheme.classNames);
 
     if (monochromeMode) {
-      document.body.style.filter = 'grayscale(1)';
+      document.documentElement.style.filter = 'grayscale(1)';
     } else {
-      document.body.style.filter = '';
+      document.documentElement.style.filter = '';
     }
   }, [activeTheme, monochromeMode]);
 
diff --git a/src/app/pages/auth/AuthLayout.tsx b/src/app/pages/auth/AuthLayout.tsx
deleted file mode 100644
index 1b37360d..00000000
--- a/src/app/pages/auth/AuthLayout.tsx
+++ /dev/null
@@ -1,209 +0,0 @@
-import React, { useCallback, useEffect } from 'react';
-import { Box, Header, Scroll, Spinner, Text, color } from 'folds';
-import {
-  Outlet,
-  generatePath,
-  matchPath,
-  useLocation,
-  useNavigate,
-  useParams,
-} from 'react-router-dom';
-import classNames from 'classnames';
-
-import { AuthFooter } from './AuthFooter';
-import * as css from './styles.css';
-import * as PatternsCss from '../../styles/Patterns.css';
-import {
-  clientAllowedServer,
-  clientDefaultServer,
-  useClientConfig,
-} from '../../hooks/useClientConfig';
-import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
-import { LOGIN_PATH, REGISTER_PATH, RESET_PASSWORD_PATH } from '../paths';
-import CinnySVG from '../../../../public/res/svg/cinny.svg';
-import { ServerPicker } from './ServerPicker';
-import { AutoDiscoveryAction, autoDiscovery } from '../../cs-api';
-import { SpecVersionsLoader } from '../../components/SpecVersionsLoader';
-import { SpecVersionsProvider } from '../../hooks/useSpecVersions';
-import { AutoDiscoveryInfoProvider } from '../../hooks/useAutoDiscoveryInfo';
-import { AuthFlowsLoader } from '../../components/AuthFlowsLoader';
-import { AuthFlowsProvider } from '../../hooks/useAuthFlows';
-import { AuthServerProvider } from '../../hooks/useAuthServer';
-import { tryDecodeURIComponent } from '../../utils/dom';
-
-const currentAuthPath = (pathname: string): string => {
-  if (matchPath(LOGIN_PATH, pathname)) {
-    return LOGIN_PATH;
-  }
-  if (matchPath(RESET_PASSWORD_PATH, pathname)) {
-    return RESET_PASSWORD_PATH;
-  }
-  if (matchPath(REGISTER_PATH, pathname)) {
-    return REGISTER_PATH;
-  }
-  return LOGIN_PATH;
-};
-
-function AuthLayoutLoading({ message }: { message: string }) {
-  return (
-    <Box justifyContent="Center" alignItems="Center" gap="200">
-      <Spinner size="100" variant="Secondary" />
-      <Text align="Center" size="T300">
-        {message}
-      </Text>
-    </Box>
-  );
-}
-
-function AuthLayoutError({ message }: { message: string }) {
-  return (
-    <Box justifyContent="Center" alignItems="Center" gap="200">
-      <Text align="Center" style={{ color: color.Critical.Main }} size="T300">
-        {message}
-      </Text>
-    </Box>
-  );
-}
-
-export function AuthLayout() {
-  const navigate = useNavigate();
-  const location = useLocation();
-  const { server: urlEncodedServer } = useParams();
-
-  const clientConfig = useClientConfig();
-
-  const defaultServer = clientDefaultServer(clientConfig);
-  let server: string = urlEncodedServer ? tryDecodeURIComponent(urlEncodedServer) : defaultServer;
-
-  if (!clientAllowedServer(clientConfig, server)) {
-    server = defaultServer;
-  }
-
-  const [discoveryState, discoverServer] = useAsyncCallback(
-    useCallback(async (serverName: string) => {
-      const response = await autoDiscovery(fetch, serverName);
-      return {
-        serverName,
-        response,
-      };
-    }, [])
-  );
-
-  useEffect(() => {
-    if (server) discoverServer(server);
-  }, [discoverServer, server]);
-
-  // if server is mismatches with path server, update path
-  useEffect(() => {
-    if (!urlEncodedServer || tryDecodeURIComponent(urlEncodedServer) !== server) {
-      navigate(
-        generatePath(currentAuthPath(location.pathname), {
-          server: encodeURIComponent(server),
-        }),
-        { replace: true }
-      );
-    }
-  }, [urlEncodedServer, navigate, location, server]);
-
-  const selectServer = useCallback(
-    (newServer: string) => {
-      if (newServer === server) {
-        if (discoveryState.status === AsyncStatus.Loading) return;
-        discoverServer(server);
-        return;
-      }
-      navigate(
-        generatePath(currentAuthPath(location.pathname), { server: encodeURIComponent(newServer) })
-      );
-    },
-    [navigate, location, discoveryState, server, discoverServer]
-  );
-
-  const [autoDiscoveryError, autoDiscoveryInfo] =
-    discoveryState.status === AsyncStatus.Success ? discoveryState.data.response : [];
-
-  return (
-    <Scroll variant="Background" visibility="Hover" size="0" hideTrack>
-      <Box
-        className={classNames(css.AuthLayout, PatternsCss.BackgroundDotPattern)}
-        direction="Column"
-        alignItems="Center"
-        justifyContent="SpaceBetween"
-        gap="400"
-      >
-        <Box direction="Column" className={css.AuthCard}>
-          <Header className={css.AuthHeader} size="600" variant="Surface">
-            <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
-              <img className={css.AuthLogo} src={CinnySVG} alt="Cinny Logo" />
-              <Text size="H3">Cinny</Text>
-            </Box>
-          </Header>
-          <Box className={css.AuthCardContent} direction="Column">
-            <Box direction="Column" gap="100">
-              <Text as="label" size="L400" priority="300">
-                Homeserver
-              </Text>
-              <ServerPicker
-                server={server}
-                serverList={clientConfig.homeserverList ?? []}
-                allowCustomServer={clientConfig.allowCustomHomeservers}
-                onServerChange={selectServer}
-              />
-            </Box>
-            {discoveryState.status === AsyncStatus.Loading && (
-              <AuthLayoutLoading message="Looking for homeserver..." />
-            )}
-            {discoveryState.status === AsyncStatus.Error && (
-              <AuthLayoutError message="Failed to find homeserver." />
-            )}
-            {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
-              <AuthLayoutError
-                message={`Failed to connect. Homeserver configuration found with ${autoDiscoveryError.host} appears unusable.`}
-              />
-            )}
-            {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
-              <AuthLayoutError message="Failed to connect. Homeserver configuration base_url appears invalid." />
-            )}
-            {discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
-              <AuthServerProvider value={discoveryState.data.serverName}>
-                <AutoDiscoveryInfoProvider value={autoDiscoveryInfo}>
-                  <SpecVersionsLoader
-                    baseUrl={autoDiscoveryInfo['m.homeserver'].base_url}
-                    fallback={() => (
-                      <AuthLayoutLoading
-                        message={`Connecting to ${autoDiscoveryInfo['m.homeserver'].base_url}`}
-                      />
-                    )}
-                    error={() => (
-                      <AuthLayoutError message="Failed to connect. Either homeserver is unavailable at this moment or does not exist." />
-                    )}
-                  >
-                    {(specVersions) => (
-                      <SpecVersionsProvider value={specVersions}>
-                        <AuthFlowsLoader
-                          fallback={() => (
-                            <AuthLayoutLoading message="Loading authentication flow..." />
-                          )}
-                          error={() => (
-                            <AuthLayoutError message="Failed to get authentication flow information." />
-                          )}
-                        >
-                          {(authFlows) => (
-                            <AuthFlowsProvider value={authFlows}>
-                              <Outlet />
-                            </AuthFlowsProvider>
-                          )}
-                        </AuthFlowsLoader>
-                      </SpecVersionsProvider>
-                    )}
-                  </SpecVersionsLoader>
-                </AutoDiscoveryInfoProvider>
-              </AuthServerProvider>
-            )}
-          </Box>
-        </Box>
-        <AuthFooter />
-      </Box>
-    </Scroll>
-  );
-}
diff --git a/src/app/pages/auth/AuthRoot.tsx b/src/app/pages/auth/AuthRoot.tsx
new file mode 100644
index 00000000..afec36e4
--- /dev/null
+++ b/src/app/pages/auth/AuthRoot.tsx
@@ -0,0 +1,186 @@
+import React, { useCallback, useEffect } from 'react';
+import { Box, Spinner, Text, color } from 'folds';
+import {
+  Outlet,
+  generatePath,
+  matchPath,
+  useLocation,
+  useNavigate,
+  useParams,
+} from 'react-router-dom';
+
+import {
+  clientAllowedServer,
+  clientDefaultServer,
+  useClientConfig,
+} from '../../hooks/useClientConfig';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { LOGIN_PATH, REGISTER_PATH, RESET_PASSWORD_PATH } from '../paths';
+import { ServerPicker } from './ServerPicker';
+import { AutoDiscoveryAction, autoDiscovery } from '../../cs-api';
+import { SpecVersionsLoader } from '../../components/SpecVersionsLoader';
+import { SpecVersionsProvider } from '../../hooks/useSpecVersions';
+import { AutoDiscoveryInfoProvider } from '../../hooks/useAutoDiscoveryInfo';
+import { AuthFlowsLoader } from '../../components/AuthFlowsLoader';
+import { AuthFlowsProvider } from '../../hooks/useAuthFlows';
+import { AuthServerProvider } from '../../hooks/useAuthServer';
+import { tryDecodeURIComponent } from '../../utils/dom';
+import { AuthLayout } from '../../components/auth-layout';
+import { useUnauthThemeManager } from '../ThemeManager';
+
+const currentAuthPath = (pathname: string): string => {
+  if (matchPath(LOGIN_PATH, pathname)) {
+    return LOGIN_PATH;
+  }
+  if (matchPath(RESET_PASSWORD_PATH, pathname)) {
+    return RESET_PASSWORD_PATH;
+  }
+  if (matchPath(REGISTER_PATH, pathname)) {
+    return REGISTER_PATH;
+  }
+  return LOGIN_PATH;
+};
+
+function AuthLayoutLoading({ message }: { message: string }) {
+  return (
+    <Box justifyContent="Center" alignItems="Center" gap="200">
+      <Spinner size="100" variant="Secondary" />
+      <Text align="Center" size="T300">
+        {message}
+      </Text>
+    </Box>
+  );
+}
+
+function AuthLayoutError({ message }: { message: string }) {
+  return (
+    <Box justifyContent="Center" alignItems="Center" gap="200">
+      <Text align="Center" style={{ color: color.Critical.Main }} size="T300">
+        {message}
+      </Text>
+    </Box>
+  );
+}
+
+export function AuthRoot() {
+  useUnauthThemeManager();
+  const navigate = useNavigate();
+  const location = useLocation();
+  const { server: urlEncodedServer } = useParams();
+
+  const clientConfig = useClientConfig();
+
+  const defaultServer = clientDefaultServer(clientConfig);
+  let server: string = urlEncodedServer ? tryDecodeURIComponent(urlEncodedServer) : defaultServer;
+
+  if (!clientAllowedServer(clientConfig, server)) {
+    server = defaultServer;
+  }
+
+  const [discoveryState, discoverServer] = useAsyncCallback(
+    useCallback(async (serverName: string) => {
+      const response = await autoDiscovery(fetch, serverName);
+      return {
+        serverName,
+        response,
+      };
+    }, [])
+  );
+
+  useEffect(() => {
+    if (server) discoverServer(server);
+  }, [discoverServer, server]);
+
+  // if server is mismatches with path server, update path
+  useEffect(() => {
+    if (!urlEncodedServer || tryDecodeURIComponent(urlEncodedServer) !== server) {
+      navigate(
+        generatePath(currentAuthPath(location.pathname), {
+          server: encodeURIComponent(server),
+        }),
+        { replace: true }
+      );
+    }
+  }, [urlEncodedServer, navigate, location, server]);
+
+  const selectServer = useCallback(
+    (newServer: string) => {
+      if (newServer === server) {
+        if (discoveryState.status === AsyncStatus.Loading) return;
+        discoverServer(server);
+        return;
+      }
+      navigate(
+        generatePath(currentAuthPath(location.pathname), { server: encodeURIComponent(newServer) })
+      );
+    },
+    [navigate, location, discoveryState, server, discoverServer]
+  );
+
+  const [autoDiscoveryError, autoDiscoveryInfo] =
+    discoveryState.status === AsyncStatus.Success ? discoveryState.data.response : [];
+
+  return (
+    <AuthLayout>
+      <Box direction="Column" gap="100">
+        <Text as="label" size="L400" priority="300">
+          Homeserver
+        </Text>
+        <ServerPicker
+          server={server}
+          serverList={clientConfig.homeserverList ?? []}
+          allowCustomServer={clientConfig.allowCustomHomeservers}
+          onServerChange={selectServer}
+        />
+      </Box>
+      {discoveryState.status === AsyncStatus.Loading && (
+        <AuthLayoutLoading message="Looking for homeserver..." />
+      )}
+      {discoveryState.status === AsyncStatus.Error && (
+        <AuthLayoutError message="Failed to find homeserver." />
+      )}
+      {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_PROMPT && (
+        <AuthLayoutError
+          message={`Failed to connect. Homeserver configuration found with ${autoDiscoveryError.host} appears unusable.`}
+        />
+      )}
+      {autoDiscoveryError?.action === AutoDiscoveryAction.FAIL_ERROR && (
+        <AuthLayoutError message="Failed to connect. Homeserver configuration base_url appears invalid." />
+      )}
+      {discoveryState.status === AsyncStatus.Success && autoDiscoveryInfo && (
+        <AuthServerProvider value={discoveryState.data.serverName}>
+          <AutoDiscoveryInfoProvider value={autoDiscoveryInfo}>
+            <SpecVersionsLoader
+              baseUrl={autoDiscoveryInfo['m.homeserver'].base_url}
+              fallback={() => (
+                <AuthLayoutLoading
+                  message={`Connecting to ${autoDiscoveryInfo['m.homeserver'].base_url}`}
+                />
+              )}
+              error={() => (
+                <AuthLayoutError message="Failed to connect. Either homeserver is unavailable at this moment or does not exist." />
+              )}
+            >
+              {(specVersions) => (
+                <SpecVersionsProvider value={specVersions}>
+                  <AuthFlowsLoader
+                    fallback={() => <AuthLayoutLoading message="Loading authentication flow..." />}
+                    error={() => (
+                      <AuthLayoutError message="Failed to get authentication flow information." />
+                    )}
+                  >
+                    {(authFlows) => (
+                      <AuthFlowsProvider value={authFlows}>
+                        <Outlet />
+                      </AuthFlowsProvider>
+                    )}
+                  </AuthFlowsLoader>
+                </SpecVersionsProvider>
+              )}
+            </SpecVersionsLoader>
+          </AutoDiscoveryInfoProvider>
+        </AuthServerProvider>
+      )}
+    </AuthLayout>
+  );
+}
diff --git a/src/app/pages/auth/index.ts b/src/app/pages/auth/index.ts
index c4bd0476..50a6ce8c 100644
--- a/src/app/pages/auth/index.ts
+++ b/src/app/pages/auth/index.ts
@@ -1,4 +1,4 @@
-export * from './AuthLayout';
+export * from './AuthRoot';
 export * from './login';
 export * from './register';
 export * from './reset-password';
diff --git a/src/app/pages/auth/login/Login.tsx b/src/app/pages/auth/login/Login.tsx
index e6fad6a0..0dab2c16 100644
--- a/src/app/pages/auth/login/Login.tsx
+++ b/src/app/pages/auth/login/Login.tsx
@@ -7,7 +7,7 @@ import { useParsedLoginFlows } from '../../../hooks/useParsedLoginFlows';
 import { PasswordLoginForm } from './PasswordLoginForm';
 import { SSOLogin } from '../SSOLogin';
 import { TokenLogin } from './TokenLogin';
-import { OrDivider } from '../OrDivider';
+import { OrDivider } from '../../../components/OrDivider';
 import { getLoginPath, getRegisterPath, withSearchParam } from '../../pathUtils';
 import { usePathWithOrigin } from '../../../hooks/usePathWithOrigin';
 import { LoginPathSearchParams } from '../../paths';
@@ -90,7 +90,7 @@ export function Login() {
           <span data-spacing-node />
         </>
       )}
-      <Text align="Center">
+      <Text size="T300" align="Center">
         Do not have an account? <Link to={getRegisterPath(server)}>Register</Link>
       </Text>
     </Box>
diff --git a/src/app/pages/auth/login/PasswordLoginForm.tsx b/src/app/pages/auth/login/PasswordLoginForm.tsx
index 89204a89..1777bc2a 100644
--- a/src/app/pages/auth/login/PasswordLoginForm.tsx
+++ b/src/app/pages/auth/login/PasswordLoginForm.tsx
@@ -18,7 +18,8 @@ import {
   config,
 } from 'folds';
 import FocusTrap from 'focus-trap-react';
-import { Link } from 'react-router-dom';
+import { Link, useNavigate } from 'react-router-dom';
+import { useSetAtom } from 'jotai';
 import { getMxIdLocalPart, getMxIdServer, isUserId } from '../../../utils/matrix';
 import { EMAIL_REGEX } from '../../../utils/regex';
 import { useAutoDiscoveryInfo } from '../../../hooks/useAutoDiscoveryInfo';
@@ -28,9 +29,11 @@ import { useClientConfig } from '../../../hooks/useClientConfig';
 import { LoginError, factoryGetBaseUrl, login, useLoginComplete } from './loginUtil';
 import { PasswordInput } from '../../../components/password-input';
 import { FieldError } from '../FiledError';
-import { getResetPasswordPath } from '../../pathUtils';
+import { getHomePath, getResetPasswordPath } from '../../pathUtils';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getInitialDeviceDisplayName } from '../../../utils/user-agent';
+import { sessionUserIdAtom } from '../../../state/sessions';
+import { userHasSession } from '../../../../client/sessions';
 
 function UsernameHint({ server }: { server: string }) {
   const [anchor, setAnchor] = useState<RectCords>();
@@ -108,6 +111,9 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
   const server = useAuthServer();
   const clientConfig = useClientConfig();
 
+  const navigate = useNavigate();
+  const setSessionUserId = useSetAtom(sessionUserIdAtom);
+
   const serverDiscovery = useAutoDiscoveryInfo();
   const baseUrl = serverDiscovery['m.homeserver'].base_url;
 
@@ -115,9 +121,20 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
   const [loginError, customLoginResponse] =
     loginState.status === AsyncStatus.Success ? loginState.data : [];
 
-  useLoginComplete(customLoginResponse);
+  const handleLoginComplete = useLoginComplete();
+
+  const openExisting = (userId: string) => {
+    setSessionUserId(userId);
+    navigate(getHomePath(), { replace: true });
+  };
 
   const handleUsernameLogin = (username: string, password: string) => {
+    const userId = `@${username}:${server}`;
+    if (userHasSession(userId)) {
+      openExisting(userId);
+      return;
+    }
+
     startLogin(baseUrl, {
       type: 'm.login.password',
       identifier: {
@@ -126,10 +143,17 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
       },
       password,
       initial_device_display_name: getInitialDeviceDisplayName(),
+    }).then(([, data]) => {
+      if (data) handleLoginComplete(data);
     });
   };
 
   const handleMxIdLogin = async (mxId: string, password: string) => {
+    if (userHasSession(mxId)) {
+      openExisting(mxId);
+      return;
+    }
+
     const mxIdServer = getMxIdServer(mxId);
     const mxIdUsername = getMxIdLocalPart(mxId);
     if (!mxIdServer || !mxIdUsername) return;
@@ -144,6 +168,8 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
       },
       password,
       initial_device_display_name: getInitialDeviceDisplayName(),
+    }).then(([, data]) => {
+      if (data) handleLoginComplete(data);
     });
   };
   const handleEmailLogin = (email: string, password: string) => {
@@ -156,6 +182,8 @@ export function PasswordLoginForm({ defaultUsername, defaultEmail }: PasswordLog
       },
       password,
       initial_device_display_name: getInitialDeviceDisplayName(),
+    }).then(([, data]) => {
+      if (data) handleLoginComplete(data);
     });
   };
 
diff --git a/src/app/pages/auth/login/TokenLogin.tsx b/src/app/pages/auth/login/TokenLogin.tsx
index 33f73e62..49eeb2ca 100644
--- a/src/app/pages/auth/login/TokenLogin.tsx
+++ b/src/app/pages/auth/login/TokenLogin.tsx
@@ -49,18 +49,19 @@ export function TokenLogin({ token }: TokenLoginProps) {
 
   const [loginState, startLogin] = useAsyncCallback(useCallback(login, []));
 
+  const handleLoginComplete = useLoginComplete();
+
   useEffect(() => {
     startLogin(baseUrl, {
       type: 'm.login.token',
       token,
       initial_device_display_name: getInitialDeviceDisplayName(),
+    }).then(([, data]) => {
+      if (data) handleLoginComplete(data);
     });
-  }, [baseUrl, token, startLogin]);
+  }, [baseUrl, token, startLogin, handleLoginComplete]);
 
-  const [loginError, customLoginResponse] =
-    loginState.status === AsyncStatus.Success ? loginState.data : [];
-
-  useLoginComplete(customLoginResponse);
+  const [loginError] = loginState.status === AsyncStatus.Success ? loginState.data : [];
 
   return (
     <>
diff --git a/src/app/pages/auth/login/loginUtil.ts b/src/app/pages/auth/login/loginUtil.ts
index 0922572a..4c2c77a7 100644
--- a/src/app/pages/auth/login/loginUtil.ts
+++ b/src/app/pages/auth/login/loginUtil.ts
@@ -1,8 +1,10 @@
 import to from 'await-to-js';
-import { useEffect } from 'react';
+import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { postLogin, PostLoginBody, PostLoginOK } from 'neurone/lib/api/matrix/client/v3/login';
 import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { useSetAtom } from 'jotai';
+import { postLogout } from 'neurone/lib/api/matrix/client/v3/logout';
 import { ClientConfig, clientAllowedServer } from '../../../hooks/useClientConfig';
 import { autoDiscovery, specVersions } from '../../../cs-api';
 import { ErrorCode } from '../../../cs-errorcode';
@@ -11,8 +13,9 @@ import {
   getAfterLoginRedirectPath,
 } from '../../afterLoginRedirectPath';
 import { getHomePath } from '../../pathUtils';
-import { setFallbackSession } from '../../../state/sessions';
-import { getJSONRequest } from '../../../../client/request';
+import { getAuthJSONRequest, getJSONRequest } from '../../../../client/request';
+import { sessionsAtom, sessionUserIdAtom } from '../../../state/sessions';
+import { userHasSession } from '../../../../client/sessions';
 
 export enum GetBaseUrlError {
   NotAllow = 'NotAllow',
@@ -106,16 +109,43 @@ export const login = async (
   ];
 };
 
-export const useLoginComplete = (data?: CustomLoginResponse) => {
+export const useLoginComplete = () => {
   const navigate = useNavigate();
+  const setSession = useSetAtom(sessionsAtom);
+  const setSessionUserId = useSetAtom(sessionUserIdAtom);
 
-  useEffect(() => {
-    if (data) {
+  const handleLoginComplete = useCallback(
+    (data: CustomLoginResponse) => {
       const { response: loginRes, baseUrl: loginBaseUrl } = data;
-      setFallbackSession(loginRes.access_token, loginRes.device_id, loginRes.user_id, loginBaseUrl);
+
+      setSessionUserId(loginRes.user_id);
+
+      if (userHasSession(loginRes.user_id)) {
+        // user login with session that already exists.
+        // this could happen if user login via SSO or OAuth.
+        // open existing session and logout this request.
+        const request = getAuthJSONRequest(loginBaseUrl, loginRes.access_token);
+        request(postLogout({}));
+      } else {
+        setSession({
+          type: 'PUT',
+          session: {
+            accessToken: loginRes.access_token,
+            deviceId: loginRes.device_id,
+            userId: loginRes.user_id,
+            baseUrl: loginBaseUrl,
+            expiresInMs: loginRes.expires_in_ms,
+            refreshToken: loginRes.refresh_token,
+          },
+        });
+      }
+
       const afterLoginRedirectUrl = getAfterLoginRedirectPath();
       deleteAfterLoginRedirectPath();
       navigate(afterLoginRedirectUrl ?? getHomePath(), { replace: true });
-    }
-  }, [data, navigate]);
+    },
+    [navigate, setSession, setSessionUserId]
+  );
+
+  return handleLoginComplete;
 };
diff --git a/src/app/pages/auth/register/PasswordRegisterForm.tsx b/src/app/pages/auth/register/PasswordRegisterForm.tsx
index 30667963..aef0b1d3 100644
--- a/src/app/pages/auth/register/PasswordRegisterForm.tsx
+++ b/src/app/pages/auth/register/PasswordRegisterForm.tsx
@@ -197,13 +197,13 @@ export function PasswordRegisterForm({
     Error,
     [PostRegisterBody]
   >(useCallback(async (registerReqData) => register(baseUrl, registerReqData), [baseUrl]));
-  const [ongoingAuthData, registerError, customRegisterResp] =
+  const [ongoingAuthData, registerError] =
     registerState.status === AsyncStatus.Success ? registerState.data : [];
 
   const registerRequestError =
     registerState.status === AsyncStatus.Error ? registerState.error : undefined;
 
-  useRegisterComplete(customRegisterResp);
+  const handleRegisterComplete = useRegisterComplete();
 
   const handleSubmit: ChangeEventHandler<HTMLFormElement> = (evt) => {
     evt.preventDefault();
@@ -250,6 +250,9 @@ export function PasswordRegisterForm({
         session: authData.session,
       },
       initial_device_display_name: getInitialDeviceDisplayName(),
+    }).then((result) => {
+      const [, , data] = result;
+      if (data) handleRegisterComplete(data);
     });
   };
 
diff --git a/src/app/pages/auth/register/Register.tsx b/src/app/pages/auth/register/Register.tsx
index f937dca0..29fc3af2 100644
--- a/src/app/pages/auth/register/Register.tsx
+++ b/src/app/pages/auth/register/Register.tsx
@@ -5,7 +5,7 @@ import { useAuthServer } from '../../../hooks/useAuthServer';
 import { RegisterFlowStatus, useAuthFlows } from '../../../hooks/useAuthFlows';
 import { useParsedLoginFlows } from '../../../hooks/useParsedLoginFlows';
 import { PasswordRegisterForm, SUPPORTED_REGISTER_STAGES } from '../register/PasswordRegisterForm';
-import { OrDivider } from '../OrDivider';
+import { OrDivider } from '../../../components/OrDivider';
 import { SSOLogin } from '../SSOLogin';
 import { SupportedUIAFlowsLoader } from '../../../components/SupportedUIAFlowsLoader';
 import { getLoginPath } from '../../pathUtils';
@@ -89,7 +89,7 @@ export function Register() {
           <span data-spacing-node />
         </>
       )}
-      <Text align="Center">
+      <Text size="T300" align="Center">
         Already have an account? <Link to={getLoginPath(server)}>Login</Link>
       </Text>
     </Box>
diff --git a/src/app/pages/auth/register/registerUtil.ts b/src/app/pages/auth/register/registerUtil.ts
index 24e7a8c0..9c276953 100644
--- a/src/app/pages/auth/register/registerUtil.ts
+++ b/src/app/pages/auth/register/registerUtil.ts
@@ -4,8 +4,9 @@ import {
   PostRegisterOK,
 } from 'neurone/lib/api/matrix/client/v3/register';
 import { parseMatrixResp } from 'neurone/lib/matrix-request';
-import { useEffect } from 'react';
+import { useCallback } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useSetAtom } from 'jotai';
 import { LoginPathSearchParams } from '../../paths';
 import { ErrorCode } from '../../../cs-errorcode';
 import {
@@ -14,9 +15,9 @@ import {
 } from '../../afterLoginRedirectPath';
 import { getHomePath, getLoginPath, withSearchParam } from '../../pathUtils';
 import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
-import { setFallbackSession } from '../../../state/sessions';
 import { AuthResponse } from '../../../utils/matrix-uia';
 import { getJSONRequest } from '../../../../client/request';
+import { sessionsAtom, sessionUserIdAtom } from '../../../state/sessions';
 
 export enum RegisterError {
   UserTaken = 'UserTaken',
@@ -136,11 +137,13 @@ export const register = async (
   ];
 };
 
-export const useRegisterComplete = (data?: CustomRegisterResponse) => {
+export const useRegisterComplete = () => {
   const navigate = useNavigate();
+  const setSession = useSetAtom(sessionsAtom);
+  const setSessionUserId = useSetAtom(sessionUserIdAtom);
 
-  useEffect(() => {
-    if (data) {
+  const handleRegisterComplete = useCallback(
+    (data: CustomRegisterResponse) => {
       const { response, baseUrl } = data;
 
       const userId = response.user_id;
@@ -148,7 +151,19 @@ export const useRegisterComplete = (data?: CustomRegisterResponse) => {
       const deviceId = response.device_id;
 
       if (accessToken && deviceId) {
-        setFallbackSession(accessToken, deviceId, userId, baseUrl);
+        setSessionUserId(userId);
+        setSession({
+          type: 'PUT',
+          session: {
+            accessToken,
+            deviceId,
+            userId,
+            baseUrl,
+            expiresInMs: response.expires_in_ms,
+            refreshToken: response.refresh_token,
+          },
+        });
+
         const afterLoginRedirectPath = getAfterLoginRedirectPath();
         deleteAfterLoginRedirectPath();
         navigate(afterLoginRedirectPath ?? getHomePath(), { replace: true });
@@ -162,6 +177,9 @@ export const useRegisterComplete = (data?: CustomRegisterResponse) => {
           { replace: true }
         );
       }
-    }
-  }, [data, navigate]);
+    },
+    [navigate, setSession, setSessionUserId]
+  );
+
+  return handleRegisterComplete;
 };
diff --git a/src/app/pages/client/ClientInitStorageAtom.tsx b/src/app/pages/client/ClientInitStorageAtom.tsx
index de5438cf..15b83840 100644
--- a/src/app/pages/client/ClientInitStorageAtom.tsx
+++ b/src/app/pages/client/ClientInitStorageAtom.tsx
@@ -7,16 +7,17 @@ import { makeNavToActivePathAtom } from '../../state/navToActivePath';
 import { NavToActivePathProvider } from '../../state/hooks/navToActivePath';
 import { makeOpenedSidebarFolderAtom } from '../../state/openedSidebarFolder';
 import { OpenedSidebarFolderProvider } from '../../state/hooks/openedSidebarFolder';
-import { useClient } from '../../hooks/useClient';
 import { makeCallPreferencesAtom } from '../../state/callPreferences';
 import { CallPreferencesProvider } from '../../state/hooks/callPreferences';
+import { makeSettingsAtom } from '../../state/settings';
+import { SettingsAtomProvider } from '../../state/hooks/settings';
+import { useSession } from '../../hooks/useSessions';
 
 type ClientInitStorageAtomProps = {
   children: ReactNode;
 };
 export function ClientInitStorageAtom({ children }: ClientInitStorageAtomProps) {
-  const ct = useClient();
-  const { userId } = ct.session;
+  const { userId } = useSession();
 
   const closedNavCategoriesAtom = useMemo(() => makeClosedNavCategoriesAtom(userId), [userId]);
 
@@ -28,13 +29,15 @@ export function ClientInitStorageAtom({ children }: ClientInitStorageAtomProps)
 
   const callPreferencesAtom = useMemo(() => makeCallPreferencesAtom(userId), [userId]);
 
+  const settingsAtom = useMemo(() => makeSettingsAtom(userId), [userId]);
+
   return (
     <ClosedNavCategoriesProvider value={closedNavCategoriesAtom}>
       <ClosedLobbyCategoriesProvider value={closedLobbyCategoriesAtom}>
         <NavToActivePathProvider value={navToActivePathAtom}>
           <OpenedSidebarFolderProvider value={openedSidebarFolderAtom}>
             <CallPreferencesProvider value={callPreferencesAtom}>
-              {children}
+              <SettingsAtomProvider value={settingsAtom}>{children}</SettingsAtomProvider>
             </CallPreferencesProvider>
           </OpenedSidebarFolderProvider>
         </NavToActivePathProvider>
diff --git a/src/app/pages/client/ClientNonUIFeatures.tsx b/src/app/pages/client/ClientNonUIFeatures.tsx
index 0df6f9f0..0c21785a 100644
--- a/src/app/pages/client/ClientNonUIFeatures.tsx
+++ b/src/app/pages/client/ClientNonUIFeatures.tsx
@@ -1,9 +1,8 @@
 import React from 'react';
 import { useSetting } from '../../state/hooks/settings';
-import { settingsAtom } from '../../state/settings';
 
 function SystemEmojiFeature() {
-  const [twitterEmoji] = useSetting(settingsAtom, 'twitterEmoji');
+  const [twitterEmoji] = useSetting('twitterEmoji');
 
   if (twitterEmoji) {
     document.documentElement.style.setProperty('--font-emoji', 'Twemoji');
@@ -15,7 +14,7 @@ function SystemEmojiFeature() {
 }
 
 function PageZoomFeature() {
-  const [pageZoom] = useSetting(settingsAtom, 'pageZoom');
+  const [pageZoom] = useSetting('pageZoom');
 
   if (pageZoom === 100) {
     document.documentElement.style.removeProperty('font-size');
diff --git a/src/app/pages/client/ClientRoot.tsx b/src/app/pages/client/ClientRoot.tsx
index a63a98fb..4cb1091f 100644
--- a/src/app/pages/client/ClientRoot.tsx
+++ b/src/app/pages/client/ClientRoot.tsx
@@ -8,29 +8,22 @@ import { SpecVersions } from './SpecVersions';
 import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
 import { SyncStatus } from './SyncStatus';
 import { AuthMetadataProvider } from '../../hooks/useAuthMetadata';
-import { getFallbackSession } from '../../state/sessions';
-import { initializeClient } from '../../../client/initialize';
-import { ClientContext } from '../../../client/context';
+import { initializeClient, InitializeClientResult } from '../../../client/initialize';
 import { ClientContextProvider } from '../../hooks/useClient';
 import { InitialSyncSplashScreen } from './InitialSyncSplashScreen';
 import { AutoDiscovery } from './AutoDiscovery';
 import { ClientRootOptions } from './ClientRootOptions';
 import { FlickerText } from '../../styles/Animations.css';
+import { useSession } from '../../hooks/useSessions';
 
 type ClientRootProps = {
   children: ReactNode;
 };
 export function ClientRoot({ children }: ClientRootProps) {
-  const { baseUrl, userId } = getFallbackSession() ?? {};
+  const session = useSession();
 
-  const [initState, initialize] = useAsyncCallback<ClientContext, Error, []>(
-    useCallback(() => {
-      const session = getFallbackSession();
-      if (!session) {
-        throw new Error('No session Found!');
-      }
-      return initializeClient(session);
-    }, [])
+  const [initState, initialize] = useAsyncCallback<InitializeClientResult, Error, []>(
+    useCallback(() => initializeClient(session), [session])
   );
 
   useEffect(() => {
@@ -40,16 +33,18 @@ export function ClientRoot({ children }: ClientRootProps) {
   }, [initState, initialize]);
 
   useEffect(() => {
-    if (initState.status === AsyncStatus.Success) {
-      const ct = initState.data;
-      ct.sync.controller.start();
-    }
+    const { ct, dispose } = initState.status === AsyncStatus.Success ? initState.data : {};
+    ct?.sync.controller.start();
+
+    return () => {
+      dispose?.();
+    };
   }, [initState]);
 
   return (
-    <AutoDiscovery userId={userId!} baseUrl={baseUrl!}>
-      {initState.status !== AsyncStatus.Success && <ClientRootOptions userId={userId!} />}
-      <SpecVersions baseUrl={baseUrl!}>
+    <AutoDiscovery userId={session.userId} baseUrl={session.baseUrl}>
+      {initState.status !== AsyncStatus.Success && <ClientRootOptions />}
+      <SpecVersions baseUrl={session.baseUrl}>
         {initState.status === AsyncStatus.Error && (
           <SplashScreen>
             <Box
@@ -98,7 +93,7 @@ export function ClientRoot({ children }: ClientRootProps) {
           />
         )}
         {initState.status === AsyncStatus.Success && (
-          <ClientContextProvider value={initState.data}>
+          <ClientContextProvider value={initState.data.ct}>
             <InitialSyncSplashScreen>
               <SyncStatus />
               <ServerConfigsLoader>
diff --git a/src/app/pages/client/ClientRootOptions.tsx b/src/app/pages/client/ClientRootOptions.tsx
index eecf7d34..20b3f7d4 100644
--- a/src/app/pages/client/ClientRootOptions.tsx
+++ b/src/app/pages/client/ClientRootOptions.tsx
@@ -17,8 +17,12 @@ import { stopPropagation } from '../../utils/keyboard';
 import { deleteClientStorage } from '../../../client/storage';
 import { clearNavToActivePathStore } from '../../state/navToActivePath';
 import { deleteClientCryptoStorage } from '../../../client/crypto';
+import { useSession } from '../../hooks/useSessions';
+import { clearUserLocalStorage } from '../../../client/localStorage';
+import { removeSession } from '../../../client/sessions';
 
-export function ClientRootOptions({ userId, ct }: { userId: string; ct?: ClientContext }) {
+export function ClientRootOptions({ ct }: { ct?: ClientContext }) {
+  const session = useSession();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
 
   const handleToggle: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -29,24 +33,27 @@ export function ClientRootOptions({ userId, ct }: { userId: string; ct?: ClientC
     });
   };
 
-  const handleClearCache = () => {
-    clearNavToActivePathStore(userId);
+  const handleClearCache = async () => {
+    clearNavToActivePathStore(session.userId);
     if (ct) {
       ct.clearCacheAndReload();
       return;
     }
-    deleteClientStorage(userId);
+    await deleteClientStorage(session);
+    window.location.reload();
   };
 
   const handleLogout = async () => {
     if (ct) {
-      ct.logout();
+      await ct.logout();
       return;
     }
 
-    localStorage.clear();
-    await deleteClientCryptoStorage(userId);
-    await deleteClientStorage(userId);
+    await deleteClientCryptoStorage(session);
+    await deleteClientStorage(session);
+    clearUserLocalStorage(session.userId);
+    removeSession(session);
+    window.location.reload();
   };
 
   return (
diff --git a/src/app/pages/client/InitialSyncSplashScreen.tsx b/src/app/pages/client/InitialSyncSplashScreen.tsx
index 6bfc8c81..5884fd2d 100644
--- a/src/app/pages/client/InitialSyncSplashScreen.tsx
+++ b/src/app/pages/client/InitialSyncSplashScreen.tsx
@@ -121,7 +121,7 @@ export function InitialSyncSplashScreen({ children }: { children: ReactNode }) {
   if (initialSync) {
     return (
       <>
-        <ClientRootOptions userId={ct.session.userId} />
+        <ClientRootOptions ct={ct} />
         <InitialSyncProgressScreen sync={ct.sync} progressObservable={initialSync.progress} />;
       </>
     );
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index c9a27cfa..9463692d 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -42,7 +42,6 @@ import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCatego
 import { markAsRead } from '../../../utils/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
@@ -66,7 +65,7 @@ type DirectMenuProps = {
   requestClose: () => void;
 };
 const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(({ requestClose }, ref) => {
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [hideActivity] = useSetting('hideActivity');
   const directRooms = useDirectRooms();
   const roomsNotifications = useRoomsNotifications(directRooms, roomToNotificationsAtom);
   const notifications = useRoomsTotalNotifications(roomsNotifications);
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index 2a849eb8..cc1b8fe0 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -52,7 +52,6 @@ import { PageNav, PageNavHeader, PageNavContent } from '../../../components/page
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
@@ -79,7 +78,7 @@ type HomeMenuProps = {
 };
 const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(({ requestClose }, ref) => {
   const orphanRooms = useHomeRooms();
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [hideActivity] = useSetting('hideActivity');
   const roomsNotifications = useRoomsNotifications(orphanRooms, roomToNotificationsAtom);
   const notifications = useRoomsTotalNotifications(roomsNotifications);
 
diff --git a/src/app/pages/client/inbox/Invites.tsx b/src/app/pages/client/inbox/Invites.tsx
index 1c92bb56..35a5c27e 100644
--- a/src/app/pages/client/inbox/Invites.tsx
+++ b/src/app/pages/client/inbox/Invites.tsx
@@ -49,10 +49,9 @@ import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { getIgnoredUsersContent, useIgnoredUsers } from '../../../hooks/useIgnoredUsers';
 import { useReportRoomSupported } from '../../../hooks/useReportRoomSupported';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import { InviteData, useInviteRooms } from '../../../hooks/storage/useInviteRooms';
 import { useClient } from '../../../hooks/useClient';
-import { getJoinRoomMemberId, JoinRoomMemberObject } from '../../../../client/storage/collections';
+import { getJoinRoomMemberId } from '../../../../client/storage/collections';
 import { useObservableValuePromise } from '../../../hooks/useObservableValue';
 import { Membership } from '../../../../types/matrix/room';
 import { AccountDataType } from '../../../../types/matrix/accountData';
@@ -708,8 +707,8 @@ export function Invites() {
   );
   const screenSize = useScreenSizeContext();
 
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [hour24Clock] = useSetting('hour24Clock');
+  const [dateFormatString] = useSetting('dateFormatString');
 
   const handleNavigate = (roomId: string, space: boolean) => {
     if (space) {
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index 77ebe3d1..c870bb89 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -64,7 +64,6 @@ import {
 } from '../../../plugins/react-custom-html-parser';
 import { RenderMessageContent } from '../../../components/RenderMessageContent';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import { Image } from '../../../components/media';
 import { ImageViewer } from '../../../components/image-viewer';
 import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/matrix/room';
@@ -561,12 +560,12 @@ const DEFAULT_REFRESH_MS = 7000;
 
 export function Notifications() {
   const mx = useMatrixClient();
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
-  const [mediaAutoLoad] = useSetting(settingsAtom, 'mediaAutoLoad');
-  const [urlPreview] = useSetting(settingsAtom, 'urlPreview');
-  const [legacyUsernameColor] = useSetting(settingsAtom, 'legacyUsernameColor');
-  const [hour24Clock] = useSetting(settingsAtom, 'hour24Clock');
-  const [dateFormatString] = useSetting(settingsAtom, 'dateFormatString');
+  const [hideActivity] = useSetting('hideActivity');
+  const [mediaAutoLoad] = useSetting('mediaAutoLoad');
+  const [urlPreview] = useSetting('urlPreview');
+  const [legacyUsernameColor] = useSetting('legacyUsernameColor');
+  const [hour24Clock] = useSetting('hour24Clock');
+  const [dateFormatString] = useSetting('dateFormatString');
   const screenSize = useScreenSizeContext();
   const mDirects = useAtomValue(mDirectAtom);
 
diff --git a/src/app/pages/client/sidebar/DirectTab.tsx b/src/app/pages/client/sidebar/DirectTab.tsx
index b5249917..2c2be29e 100644
--- a/src/app/pages/client/sidebar/DirectTab.tsx
+++ b/src/app/pages/client/sidebar/DirectTab.tsx
@@ -17,7 +17,6 @@ import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useDirectRooms } from '../direct/useDirectRooms';
 import { markAsRead } from '../../../utils/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
-import { settingsAtom } from '../../../state/settings';
 import { useSetting } from '../../../state/hooks/settings';
 import {
   TotalNotifications,
@@ -39,7 +38,7 @@ type DirectMenuProps = {
 };
 const DirectMenu = forwardRef<HTMLDivElement, DirectMenuProps>(
   ({ directRooms, roomToNotifications, notifications, requestClose }, ref) => {
-    const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+    const [hideActivity] = useSetting('hideActivity');
 
     const handleMarkAsRead = () => {
       directRooms.forEach((rId) => {
diff --git a/src/app/pages/client/sidebar/HomeTab.tsx b/src/app/pages/client/sidebar/HomeTab.tsx
index 2ba53ceb..b694af6a 100644
--- a/src/app/pages/client/sidebar/HomeTab.tsx
+++ b/src/app/pages/client/sidebar/HomeTab.tsx
@@ -18,7 +18,6 @@ import { useHomeRooms } from '../home/useHomeRooms';
 import { markAsRead } from '../../../utils/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import {
   TotalNotifications,
   useRoomsNotifications,
@@ -39,7 +38,7 @@ type HomeMenuProps = {
 };
 const HomeMenu = forwardRef<HTMLDivElement, HomeMenuProps>(
   ({ homeRooms, roomToNotifications, notifications, requestClose }, ref) => {
-    const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+    const [hideActivity] = useSetting('hideActivity');
 
     const handleMarkAsRead = () => {
       homeRooms.forEach((rId) => {
diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index f9c0ef6e..a21a9039 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -1,8 +1,25 @@
-import React, { useState } from 'react';
-import { Text } from 'folds';
+import React, { MouseEventHandler, useState } from 'react';
+import {
+  Avatar,
+  Box,
+  config,
+  Icon,
+  Icons,
+  Line,
+  Menu,
+  MenuItem,
+  PopOut,
+  RectCords,
+  Scroll,
+  Text,
+  toRem,
+} from 'folds';
+import { useNavigate } from 'react-router-dom';
+import FocusTrap from 'focus-trap-react';
+import { useSetAtom } from 'jotai';
 import { SidebarItem, SidebarItemTooltip, SidebarAvatar } from '../../../components/sidebar';
 import { UserAvatar } from '../../../components/user-avatar';
-import { getMxIdLocalPart } from '../../../utils/matrix';
+import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
 import { nameInitials } from '../../../utils/common';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { Settings } from '../../../features/settings';
@@ -10,6 +27,137 @@ import { useUserProfile } from '../../../hooks/useUserProfile';
 import { Modal500 } from '../../../components/Modal500';
 import { useClient } from '../../../hooks/useClient';
 import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { getRootPath } from '../../pathUtils';
+import { stopPropagation } from '../../../utils/keyboard';
+import { useSession, useSessions } from '../../../hooks/useSessions';
+import { sessionUserIdAtom } from '../../../state/sessions';
+import { Session } from '../../../../client/sessions';
+
+type AccountTileProps = {
+  session: Session;
+};
+function AccountTile({ session }: AccountTileProps) {
+  const { userId } = session;
+
+  const currentSession = useSession();
+  const currentSelected = userId === currentSession.userId;
+
+  const setSessionUserId = useSetAtom(sessionUserIdAtom);
+
+  const profile = useUserProfile(userId);
+
+  const username = getMxIdLocalPart(userId) ?? userId;
+  const server = getMxIdServer(userId) ?? userId;
+
+  const displayName = profile?.displayName ?? username;
+  const avatarUrl = profile?.avatarUrl
+    ? mxcToHttp(session.baseUrl, profile.avatarUrl, true).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
+    : undefined;
+
+  return (
+    <MenuItem
+      size="400"
+      radii="300"
+      onClick={currentSelected ? undefined : () => setSessionUserId(userId)}
+      variant={currentSelected ? 'Success' : 'Surface'}
+      aria-pressed={currentSelected}
+      before={
+        <Avatar size="200" radii="Pill">
+          <UserAvatar
+            userId={userId}
+            src={avatarUrl}
+            alt={userId}
+            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+          />
+        </Avatar>
+      }
+      after={
+        <Text style={{ maxWidth: toRem(100) }} as="span" size="L400" truncate>
+          {server}
+        </Text>
+      }
+    >
+      <Text style={{ flexGrow: 1 }} as="span" size="B300" truncate>
+        {displayName}
+      </Text>
+    </MenuItem>
+  );
+}
+
+type AccountSwitcherProps = {
+  cords: RectCords;
+  requestClose: () => void;
+};
+function AccountSwitcher({ cords, requestClose }: AccountSwitcherProps) {
+  const navigate = useNavigate();
+  const setSessionUserId = useSetAtom(sessionUserIdAtom);
+
+  const sessions = useSessions();
+
+  const handleManageAccounts = () => {
+    setSessionUserId(undefined);
+    navigate(getRootPath());
+  };
+
+  return (
+    <PopOut
+      anchor={cords}
+      position="Right"
+      align="End"
+      offset={6}
+      content={
+        <FocusTrap
+          focusTrapOptions={{
+            initialFocus: false,
+            returnFocusOnDeactivate: false,
+            onDeactivate: () => requestClose(),
+            clickOutsideDeactivates: true,
+            isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+            isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+            escapeDeactivates: stopPropagation,
+          }}
+        >
+          <Menu style={{ maxWidth: toRem(250), width: '100vw' }}>
+            {sessions.length > 0 && (
+              <>
+                <Scroll style={{ maxHeight: toRem(300) }} size="300" hideTrack>
+                  <Box
+                    direction="Column"
+                    gap="0"
+                    style={{
+                      padding: `${config.space.S200} 0 ${config.space.S200} ${config.space.S200}`,
+                    }}
+                  >
+                    {sessions.map((session) => (
+                      <AccountTile key={session.userId} session={session} />
+                    ))}
+                  </Box>
+                </Scroll>
+                <Line size="300" />
+              </>
+            )}
+            <Box direction="Column" gap="0" style={{ padding: config.space.S100 }}>
+              <MenuItem
+                size="300"
+                radii="300"
+                after={<Icon size="100" src={Icons.User} />}
+                onClick={handleManageAccounts}
+              >
+                <Text style={{ flexGrow: 1 }} as="span" size="B300" truncate>
+                  Manage Accounts
+                </Text>
+              </MenuItem>
+            </Box>
+          </Menu>
+        </FocusTrap>
+      }
+    />
+  );
+}
 
 export function SettingsTab() {
   const ct = useClient();
@@ -28,14 +176,43 @@ export function SettingsTab() {
       })
     : undefined;
 
-  const openSettings = () => setSettings(true);
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+
+  const openSettings = () => {
+    setMenuAnchor(undefined);
+    setSettings(true);
+  };
   const closeSettings = () => setSettings(false);
 
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    const cords = evt.currentTarget.getBoundingClientRect();
+    setMenuAnchor((currentState) => {
+      if (currentState) return undefined;
+      return cords;
+    });
+  };
+
+  const [switcherAnchor, setSwitcherAnchor] = useState<RectCords>();
+
+  const handleOpenAccountSwitcher: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    evt.preventDefault();
+    const cords = evt.currentTarget.getBoundingClientRect();
+    setSwitcherAnchor((currentState) => {
+      if (currentState) return undefined;
+      return cords;
+    });
+  };
+
   return (
     <SidebarItem active={settings}>
-      <SidebarItemTooltip tooltip="User Settings">
+      <SidebarItemTooltip tooltip="User Menu">
         {(triggerRef) => (
-          <SidebarAvatar as="button" ref={triggerRef} onClick={openSettings}>
+          <SidebarAvatar
+            as="button"
+            ref={triggerRef}
+            onClick={handleOpenMenu}
+            onContextMenu={handleOpenAccountSwitcher}
+          >
             <UserAvatar
               userId={userId}
               src={avatarUrl}
@@ -44,11 +221,65 @@ export function SettingsTab() {
           </SidebarAvatar>
         )}
       </SidebarItemTooltip>
+      <PopOut
+        anchor={menuAnchor}
+        position="Right"
+        align="End"
+        offset={6}
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              returnFocusOnDeactivate: false,
+              onDeactivate: () => setMenuAnchor(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <Menu style={{ maxWidth: toRem(200), width: '100vw' }}>
+              <Box direction="Column" gap="0" style={{ padding: config.space.S100 }}>
+                <MenuItem
+                  size="300"
+                  radii="300"
+                  onClick={openSettings}
+                  after={<Icon size="100" src={Icons.Setting} />}
+                >
+                  <Text style={{ flexGrow: 1 }} as="span" size="B300" truncate>
+                    Settings
+                  </Text>
+                </MenuItem>
+                <MenuItem
+                  size="300"
+                  radii="300"
+                  after={<Icon size="100" src={Icons.ArrowUpDown} />}
+                  onClick={handleOpenAccountSwitcher}
+                  aria-pressed={!!switcherAnchor}
+                >
+                  <Text style={{ flexGrow: 1 }} as="span" size="B300" truncate>
+                    Switch Accounts
+                  </Text>
+                </MenuItem>
+              </Box>
+            </Menu>
+          </FocusTrap>
+        }
+      />
       {settings && (
         <Modal500 requestClose={closeSettings}>
           <Settings requestClose={closeSettings} />
         </Modal500>
       )}
+      {switcherAnchor && (
+        <AccountSwitcher
+          cords={switcherAnchor}
+          requestClose={() => {
+            setMenuAnchor(undefined);
+            setSwitcherAnchor(undefined);
+          }}
+        />
+      )}
     </SidebarItem>
   );
 }
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index f7d343d0..93c3f1a5 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -86,7 +86,6 @@ import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import { useOpenSpaceSettings } from '../../../state/hooks/spaceSettings';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
@@ -115,7 +114,7 @@ type SpaceMenuProps = {
 const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(
   ({ spaceId, requestClose, onUnpin, notifications }, ref) => {
     const ct = useClient();
-    const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+    const [hideActivity] = useSetting('hideActivity');
     const powerLevelState = usePowerLevelsState(spaceId);
     const powerLevels = usePowerLevels(powerLevelState.value);
     const creators = useRoomCreators(spaceId);
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index e20d1246..bbd5d489 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -65,7 +65,6 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
 import { getViaServers } from '../../../plugins/via-servers';
 import { useSetting } from '../../../state/hooks/settings';
-import { settingsAtom } from '../../../state/settings';
 import {
   getRoomNotificationMode,
   useRoomsNotificationPreferencesContext,
@@ -101,7 +100,7 @@ const SpaceMenu = forwardRef<HTMLDivElement, SpaceMenuProps>(({ requestClose },
   const ct = useClient();
   const { userId } = ct.session;
   const spaceId = useSpace();
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [hideActivity] = useSetting('hideActivity');
   const roomToParents = useAtomValue(roomToParentsAtom);
   const powerLevelsStateResult = usePowerLevelsState(spaceId);
   const powerLevels = usePowerLevels(powerLevelsStateResult.value);
diff --git a/src/app/state/callPreferences.ts b/src/app/state/callPreferences.ts
index a8e82067..8e412796 100644
--- a/src/app/state/callPreferences.ts
+++ b/src/app/state/callPreferences.ts
@@ -1,9 +1,6 @@
 import { WritableAtom } from 'jotai';
-import {
-  atomWithLocalStorage,
-  getLocalStorageItem,
-  setLocalStorageItem,
-} from './utils/atomWithLocalStorage';
+import { atomWithLocalStorage } from './utils/atomWithLocalStorage';
+import { getLocalStorageItem, setLocalStorageItem } from '../../client/localStorage';
 
 export type CallPreferences = {
   microphone: boolean;
@@ -19,10 +16,12 @@ const DEFAULT_PREFERENCES: CallPreferences = {
   sound: true,
 };
 
-export type CallPreferencesAtom = WritableAtom<CallPreferences, [CallPreferences], undefined>;
+export type CallPreferencesAtom = WritableAtom<CallPreferences, [CallPreferences], void>;
+
+const getStoreKey = (userId: string) => `${CALL_PREFERENCES}${userId}`;
 
 export const makeCallPreferencesAtom = (userId: string): CallPreferencesAtom => {
-  const storeKey = `${CALL_PREFERENCES}${userId}`;
+  const storeKey = getStoreKey(userId);
 
   const callPreferencesAtom = atomWithLocalStorage<CallPreferences>(
     storeKey,
@@ -37,3 +36,7 @@ export const makeCallPreferencesAtom = (userId: string): CallPreferencesAtom =>
 
   return callPreferencesAtom;
 };
+
+export const clearCallPreferenceStore = (userId: string) => {
+  localStorage.removeItem(getStoreKey(userId));
+};
diff --git a/src/app/state/closedLobbyCategories.ts b/src/app/state/closedLobbyCategories.ts
index 40ecd163..0b72c2c9 100644
--- a/src/app/state/closedLobbyCategories.ts
+++ b/src/app/state/closedLobbyCategories.ts
@@ -1,10 +1,7 @@
 import { WritableAtom, atom } from 'jotai';
 import produce from 'immer';
-import {
-  atomWithLocalStorage,
-  getLocalStorageItem,
-  setLocalStorageItem,
-} from './utils/atomWithLocalStorage';
+import { atomWithLocalStorage } from './utils/atomWithLocalStorage';
+import { getLocalStorageItem, setLocalStorageItem } from '../../client/localStorage';
 
 const CLOSED_LOBBY_CATEGORY = 'closedLobbyCategories';
 
@@ -24,8 +21,10 @@ export type ClosedLobbyCategoriesAtom = WritableAtom<
   undefined
 >;
 
+const getStoreKey = (userId: string) => `${CLOSED_LOBBY_CATEGORY}${userId}`;
+
 export const makeClosedLobbyCategoriesAtom = (userId: string): ClosedLobbyCategoriesAtom => {
-  const storeKey = `${CLOSED_LOBBY_CATEGORY}${userId}`;
+  const storeKey = getStoreKey(userId);
 
   const baseClosedLobbyCategoriesAtom = atomWithLocalStorage<Set<string>>(
     storeKey,
@@ -66,3 +65,7 @@ export const makeClosedLobbyCategoriesAtom = (userId: string): ClosedLobbyCatego
 };
 
 export const makeLobbyCategoryId = (...args: string[]): string => args.join('|');
+
+export const clearClosedLobbyCategoriesStore = (userId: string) => {
+  localStorage.removeItem(getStoreKey(userId));
+};
diff --git a/src/app/state/closedNavCategories.ts b/src/app/state/closedNavCategories.ts
index ea61cb2e..d2a804c1 100644
--- a/src/app/state/closedNavCategories.ts
+++ b/src/app/state/closedNavCategories.ts
@@ -1,10 +1,7 @@
 import { WritableAtom, atom } from 'jotai';
 import produce from 'immer';
-import {
-  atomWithLocalStorage,
-  getLocalStorageItem,
-  setLocalStorageItem,
-} from './utils/atomWithLocalStorage';
+import { atomWithLocalStorage } from './utils/atomWithLocalStorage';
+import { getLocalStorageItem, setLocalStorageItem } from '../../client/localStorage';
 
 const CLOSED_NAV_CATEGORY = 'closedNavCategories';
 
@@ -24,8 +21,10 @@ export type ClosedNavCategoriesAtom = WritableAtom<
   undefined
 >;
 
+const getStoreKey = (userId: string) => `${CLOSED_NAV_CATEGORY}${userId}`;
+
 export const makeClosedNavCategoriesAtom = (userId: string): ClosedNavCategoriesAtom => {
-  const storeKey = `${CLOSED_NAV_CATEGORY}${userId}`;
+  const storeKey = getStoreKey(userId);
 
   const baseClosedNavCategoriesAtom = atomWithLocalStorage<Set<string>>(
     storeKey,
@@ -66,3 +65,7 @@ export const makeClosedNavCategoriesAtom = (userId: string): ClosedNavCategories
 };
 
 export const makeNavCategoryId = (...args: string[]): string => args.join('|');
+
+export const clearClosedNavCategoriesStore = (userId: string) => {
+  localStorage.removeItem(getStoreKey(userId));
+};
diff --git a/src/app/state/hooks/settings.ts b/src/app/state/hooks/settings.ts
index d90c7664..56994607 100644
--- a/src/app/state/hooks/settings.ts
+++ b/src/app/state/hooks/settings.ts
@@ -1,13 +1,34 @@
 import { atom, useAtomValue, useSetAtom } from 'jotai';
 import { selectAtom } from 'jotai/utils';
-import { useMemo } from 'react';
-import { Settings, settingsAtom as sAtom } from '../settings';
+import { createContext, useContext, useMemo } from 'react';
+import { Settings, SettingsAtom } from '../settings';
+
+const SettingsAtomContext = createContext<SettingsAtom | null>(null);
+
+export const SettingsAtomProvider = SettingsAtomContext.Provider;
+export const useSettingsAtom = () => {
+  const settingsAtom = useContext(SettingsAtomContext);
+
+  if (!settingsAtom) {
+    throw new Error('Settings atom not provided!');
+  }
+
+  return settingsAtom;
+};
+
+export const useSettings = () => {
+  const settingsAtom = useSettingsAtom();
+
+  return useAtomValue(settingsAtom);
+};
 
 export type SettingSetter<K extends keyof Settings> =
   | Settings[K]
   | ((s: Settings[K]) => Settings[K]);
 
-export const useSetSetting = <K extends keyof Settings>(settingsAtom: typeof sAtom, key: K) => {
+export const useSetSetting = <K extends keyof Settings>(key: K) => {
+  const settingsAtom = useSettingsAtom();
+
   const setterAtom = useMemo(
     () =>
       atom<null, [SettingSetter<K>], undefined>(null, (get, set, value) => {
@@ -22,12 +43,15 @@ export const useSetSetting = <K extends keyof Settings>(settingsAtom: typeof sAt
 };
 
 export const useSetting = <K extends keyof Settings>(
-  settingsAtom: typeof sAtom,
   key: K
 ): [Settings[K], ReturnType<typeof useSetSetting<K>>] => {
+  const settingsAtom = useSettingsAtom();
+
   const selector = useMemo(() => (s: Settings) => s[key], [key]);
+
   const setting = useAtomValue(selectAtom(settingsAtom, selector));
 
-  const setter = useSetSetting(settingsAtom, key);
+  const setter = useSetSetting(key);
+
   return [setting, setter];
 };
diff --git a/src/app/state/navToActivePath.ts b/src/app/state/navToActivePath.ts
index a7405898..d4d4c18b 100644
--- a/src/app/state/navToActivePath.ts
+++ b/src/app/state/navToActivePath.ts
@@ -1,11 +1,8 @@
 import { WritableAtom, atom } from 'jotai';
 import produce from 'immer';
 import { Path } from 'react-router-dom';
-import {
-  atomWithLocalStorage,
-  getLocalStorageItem,
-  setLocalStorageItem,
-} from './utils/atomWithLocalStorage';
+import { atomWithLocalStorage } from './utils/atomWithLocalStorage';
+import { getLocalStorageItem, setLocalStorageItem } from '../../client/localStorage';
 
 const NAV_TO_ACTIVE_PATH = 'navToActivePath';
 
diff --git a/src/app/state/openedSidebarFolder.ts b/src/app/state/openedSidebarFolder.ts
index 70373b3b..5d18c217 100644
--- a/src/app/state/openedSidebarFolder.ts
+++ b/src/app/state/openedSidebarFolder.ts
@@ -1,10 +1,7 @@
 import { WritableAtom, atom } from 'jotai';
 import produce from 'immer';
-import {
-  atomWithLocalStorage,
-  getLocalStorageItem,
-  setLocalStorageItem,
-} from './utils/atomWithLocalStorage';
+import { atomWithLocalStorage } from './utils/atomWithLocalStorage';
+import { getLocalStorageItem, setLocalStorageItem } from '../../client/localStorage';
 
 const OPENED_SIDEBAR_FOLDER = 'openedSidebarFolder';
 
@@ -24,8 +21,10 @@ export type OpenedSidebarFolderAtom = WritableAtom<
   undefined
 >;
 
+const getStoreKey = (userId: string) => `${OPENED_SIDEBAR_FOLDER}${userId}`;
+
 export const makeOpenedSidebarFolderAtom = (userId: string): OpenedSidebarFolderAtom => {
-  const storeKey = `${OPENED_SIDEBAR_FOLDER}${userId}`;
+  const storeKey = getStoreKey(userId);
 
   const baseOpenedSidebarFolderAtom = atomWithLocalStorage<Set<string>>(
     storeKey,
@@ -64,3 +63,7 @@ export const makeOpenedSidebarFolderAtom = (userId: string): OpenedSidebarFolder
 
   return openedSidebarFolderAtom;
 };
+
+export const clearOpenedSidebarFolderStore = (userId: string) => {
+  localStorage.removeItem(getStoreKey(userId));
+};
diff --git a/src/app/state/sessions.ts b/src/app/state/sessions.ts
index a9c34ce9..4ffc1025 100644
--- a/src/app/state/sessions.ts
+++ b/src/app/state/sessions.ts
@@ -1,140 +1,69 @@
-// import { atom } from 'jotai';
-// import {
-//   atomWithLocalStorage,
-//   getLocalStorageItem,
-//   setLocalStorageItem,
-// } from './utils/atomWithLocalStorage';
+import { atom } from 'jotai';
+import { atomWithLocalStorage } from './utils/atomWithLocalStorage';
+import {
+  CLIENT_SESSIONS_STORE_KEY,
+  getFallbackSession,
+  removeFallbackSession,
+  Session,
+  Sessions,
+} from '../../client/sessions';
+import { getLocalStorageItem, setLocalStorageItem } from '../../client/localStorage';
 
-export type Session = {
-  baseUrl: string;
-  userId: string;
-  deviceId: string;
-  accessToken: string;
-  expiresInMs?: number;
-  refreshToken?: string;
-  fallbackSdkStores?: boolean;
-};
+const baseSessionsAtom = atomWithLocalStorage<Sessions>(
+  CLIENT_SESSIONS_STORE_KEY,
+  (key) => {
+    const defaultSessions: Sessions = [];
+    const sessions = getLocalStorageItem(key, defaultSessions);
 
-export type Sessions = Session[];
-export type SessionStoreName = {
-  sync: string;
-  crypto: string;
-};
+    // Before multi account support session was stored
+    // as multiple item in local storage.
+    // So we need these migration code.
+    const fallbackSession = getFallbackSession();
+    if (fallbackSession) {
+      sessions.push(fallbackSession);
+      setLocalStorageItem(key, sessions);
+      removeFallbackSession();
+    }
+    return sessions;
+  },
+  (key, value) => {
+    setLocalStorageItem(key, value);
+  }
+);
 
-/**
- * Migration code for old session
- */
-// const FALLBACK_STORE_NAME: SessionStoreName = {
-//   sync: 'web-sync-store',
-//   crypto: 'crypto-store',
-// } as const;
-
-export function setFallbackSession(
-  accessToken: string,
-  deviceId: string,
-  userId: string,
-  baseUrl: string
-) {
-  localStorage.setItem('cinny_access_token', accessToken);
-  localStorage.setItem('cinny_device_id', deviceId);
-  localStorage.setItem('cinny_user_id', userId);
-  localStorage.setItem('cinny_hs_base_url', baseUrl);
-}
-export const removeFallbackSession = () => {
-  localStorage.removeItem('cinny_hs_base_url');
-  localStorage.removeItem('cinny_user_id');
-  localStorage.removeItem('cinny_device_id');
-  localStorage.removeItem('cinny_access_token');
-};
-export const getFallbackSession = (): Session | undefined => {
-  const baseUrl = localStorage.getItem('cinny_hs_base_url');
-  const userId = localStorage.getItem('cinny_user_id');
-  const deviceId = localStorage.getItem('cinny_device_id');
-  const accessToken = localStorage.getItem('cinny_access_token');
-
-  if (baseUrl && userId && deviceId && accessToken) {
-    const session: Session = {
-      baseUrl,
-      userId,
-      deviceId,
-      accessToken,
-      fallbackSdkStores: true,
+export type SessionsAction =
+  | {
+      type: 'PUT';
+      session: Session;
+    }
+  | {
+      type: 'DELETE';
+      session: Session;
     };
 
-    return session;
+export const sessionsAtom = atom<Sessions, [SessionsAction], undefined>(
+  (get) => get(baseSessionsAtom),
+  (get, set, action) => {
+    if (action.type === 'PUT') {
+      const sessions = [...get(baseSessionsAtom)];
+      const sessionIndex = sessions.findIndex(
+        (session) => session.userId === action.session.userId
+      );
+      if (sessionIndex === -1) {
+        sessions.push(action.session);
+      } else {
+        sessions.splice(sessionIndex, 1, action.session);
+      }
+      set(baseSessionsAtom, sessions);
+      return;
+    }
+    if (action.type === 'DELETE') {
+      const sessions = get(baseSessionsAtom).filter(
+        (session) => session.userId !== action.session.userId
+      );
+      set(baseSessionsAtom, sessions);
+    }
   }
+);
 
-  return undefined;
-};
-/**
- * End of migration code for old session
- */
-
-// export const getSessionStoreName = (session: Session): SessionStoreName => {
-//   if (session.fallbackSdkStores) {
-//     return FALLBACK_STORE_NAME;
-//   }
-
-//   return {
-//     sync: `sync${session.userId}`,
-//     crypto: `crypto${session.userId}`,
-//   };
-// };
-
-// export const MATRIX_SESSIONS_KEY = 'matrixSessions';
-// const baseSessionsAtom = atomWithLocalStorage<Sessions>(
-//   MATRIX_SESSIONS_KEY,
-//   (key) => {
-//     const defaultSessions: Sessions = [];
-//     const sessions = getLocalStorageItem(key, defaultSessions);
-
-//     // Before multi account support session was stored
-//     // as multiple item in local storage.
-//     // So we need these migration code.
-//     const fallbackSession = getFallbackSession();
-//     if (fallbackSession) {
-//       removeFallbackSession();
-//       sessions.push(fallbackSession);
-//       setLocalStorageItem(key, sessions);
-//     }
-//     return sessions;
-//   },
-//   (key, value) => {
-//     setLocalStorageItem(key, value);
-//   }
-// );
-
-// export type SessionsAction =
-//   | {
-//       type: 'PUT';
-//       session: Session;
-//     }
-//   | {
-//       type: 'DELETE';
-//       session: Session;
-//     };
-
-// export const sessionsAtom = atom<Sessions, [SessionsAction], undefined>(
-//   (get) => get(baseSessionsAtom),
-//   (get, set, action) => {
-//     if (action.type === 'PUT') {
-//       const sessions = [...get(baseSessionsAtom)];
-//       const sessionIndex = sessions.findIndex(
-//         (session) => session.userId === action.session.userId
-//       );
-//       if (sessionIndex === -1) {
-//         sessions.push(action.session);
-//       } else {
-//         sessions.splice(sessionIndex, 1, action.session);
-//       }
-//       set(baseSessionsAtom, sessions);
-//       return;
-//     }
-//     if (action.type === 'DELETE') {
-//       const sessions = get(baseSessionsAtom).filter(
-//         (session) => session.userId !== action.session.userId
-//       );
-//       set(baseSessionsAtom, sessions);
-//     }
-//   }
-// );
+export const sessionUserIdAtom = atom<string | undefined>(undefined);
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index 9fbad4ff..6849aa7b 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -1,6 +1,7 @@
-import { atom } from 'jotai';
+import { WritableAtom } from 'jotai';
+import { atomWithLocalStorage } from './utils/atomWithLocalStorage';
+import { getLocalStorageItem, setLocalStorageItem } from '../../client/localStorage';
 
-const STORAGE_KEY = 'settings';
 export type DateFormat =
   | 'D MMM YYYY'
   | 'DD/MM/YYYY'
@@ -83,24 +84,31 @@ const defaultSettings: Settings = {
   developerTools: false,
 };
 
-export const getSettings = () => {
-  const settings = localStorage.getItem(STORAGE_KEY);
-  if (settings === null) return defaultSettings;
-  return {
-    ...defaultSettings,
-    ...(JSON.parse(settings) as Settings),
-  };
+const STORAGE_KEY = 'settings';
+const getStoreKey = (userId: string): string => `${STORAGE_KEY}${userId}`;
+
+// export const settingsAtom = atomWithLocalStorage<Settings>(
+//   STORAGE_KEY,
+//   (key) => getLocalStorageItem<Settings>(key, defaultSettings),
+//   (key, settings) => {
+//     setLocalStorageItem(key, settings);
+//   }
+// );
+
+export type SettingsAtom = WritableAtom<Settings, [Settings], void>;
+
+export const makeSettingsAtom = (userId: string): SettingsAtom => {
+  const settingsAtom = atomWithLocalStorage<Settings>(
+    getStoreKey(userId),
+    (key) => getLocalStorageItem<Settings>(key, defaultSettings),
+    (key, settings) => {
+      setLocalStorageItem(key, settings);
+    }
+  );
+
+  return settingsAtom;
 };
 
-export const setSettings = (settings: Settings) => {
-  localStorage.setItem(STORAGE_KEY, JSON.stringify(settings));
+export const clearSettingsStore = (userId: string) => {
+  localStorage.removeItem(getStoreKey(userId));
 };
-
-const baseSettings = atom<Settings>(getSettings());
-export const settingsAtom = atom<Settings, [Settings], undefined>(
-  (get) => get(baseSettings),
-  (get, set, update) => {
-    set(baseSettings, update);
-    setSettings(update);
-  }
-);
diff --git a/src/app/state/spaceRooms.ts b/src/app/state/spaceRooms.ts
index ab6584e7..d8b827c4 100644
--- a/src/app/state/spaceRooms.ts
+++ b/src/app/state/spaceRooms.ts
@@ -1,10 +1,7 @@
 import { atom } from 'jotai';
 import produce from 'immer';
-import {
-  atomWithLocalStorage,
-  getLocalStorageItem,
-  setLocalStorageItem,
-} from './utils/atomWithLocalStorage';
+import { atomWithLocalStorage } from './utils/atomWithLocalStorage';
+import { getLocalStorageItem, setLocalStorageItem } from '../../client/localStorage';
 
 const SPACE_ROOMS = 'spaceRooms';
 
diff --git a/src/app/state/typingMembers.ts b/src/app/state/typingMembers.ts
index 5ff57af6..1aa7104a 100644
--- a/src/app/state/typingMembers.ts
+++ b/src/app/state/typingMembers.ts
@@ -2,7 +2,6 @@ import { atom, useSetAtom } from 'jotai';
 import { useEffect } from 'react';
 import { roomTypingEphemeral } from 'neurone/lib/utils/sync/v3/join';
 import { useSetting } from './hooks/settings';
-import { settingsAtom } from './settings';
 import { ClientContext } from '../../client/context';
 
 export type IRoomIdToTypingMembers = Map<string, string[]>;
@@ -14,7 +13,7 @@ export const useBindRoomIdToTypingMembersAtom = (
   typingMembersAtom: typeof roomIdToTypingMembersAtom
 ) => {
   const setTypingMembers = useSetAtom(typingMembersAtom);
-  const [hideActivity] = useSetting(settingsAtom, 'hideActivity');
+  const [hideActivity] = useSetting('hideActivity');
 
   useEffect(() => {
     const unsubscribe = ct.sync.observable.subscribe((syncValue) => {
diff --git a/src/app/state/utils/atomWithLocalStorage.ts b/src/app/state/utils/atomWithLocalStorage.ts
index f17d3a3d..0f5ee96c 100644
--- a/src/app/state/utils/atomWithLocalStorage.ts
+++ b/src/app/state/utils/atomWithLocalStorage.ts
@@ -1,20 +1,5 @@
 import { atom } from 'jotai';
 
-export const getLocalStorageItem = <T>(key: string, defaultValue: T): T => {
-  const item = localStorage.getItem(key);
-  if (item === null) return defaultValue;
-  if (item === 'undefined') return undefined as T;
-  try {
-    return JSON.parse(item) as T;
-  } catch {
-    return defaultValue;
-  }
-};
-
-export const setLocalStorageItem = <T>(key: string, value: T) => {
-  localStorage.setItem(key, JSON.stringify(value));
-};
-
 export type GetLocalStorageItem<T> = (key: string) => T;
 export type SetLocalStorageItem<T> = (key: string, value: T) => void;
 
@@ -39,7 +24,7 @@ export const atomWithLocalStorage = <T>(
     };
   };
 
-  const localStorageAtom = atom<T, [T], undefined>(
+  const localStorageAtom = atom<T, [T], void>(
     (get) => get(baseAtom),
     (get, set, newValue) => {
       set(baseAtom, newValue);
diff --git a/src/client/LogoutManager.ts b/src/client/LogoutManager.ts
index 220442e3..0ee59b59 100644
--- a/src/client/LogoutManager.ts
+++ b/src/client/LogoutManager.ts
@@ -40,7 +40,6 @@ export class LogoutManager implements Disposable {
 
   private async clearStoresAndRefresh(): Promise<void> {
     await this.deleteStorage();
-    window.localStorage.clear();
     window.location.reload();
   }
 
diff --git a/src/client/context.ts b/src/client/context.ts
index 0507e1a0..7d043cb6 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -23,7 +23,7 @@ import {
 } from './storage/collections';
 import { Storage } from './storage';
 import { SyncContext, SyncValue } from './sync';
-import { Session } from '../app/state/sessions';
+import { Session } from './sessions';
 import { JoinRule, SpaceChildContent, StateEventType } from '../types/matrix/room';
 import { GetTxnId } from './txn';
 import { Timeline } from './room';
diff --git a/src/client/crypto.ts b/src/client/crypto.ts
index fd92ab26..7102b494 100644
--- a/src/client/crypto.ts
+++ b/src/client/crypto.ts
@@ -2,13 +2,10 @@ import { deleteDB } from 'idb';
 import { Machine, OutgoingRequestSender } from 'neurone/lib/crypto/machine';
 import { MatrixRequest } from 'neurone/lib/matrix-request';
 import { MatrixRequestRetrier, sleep } from 'neurone/lib/utils';
-import { Session } from '../app/state/sessions';
-
-const getCryptoStoreName = (userId: string): string => `crypto${userId}`;
+import { FALLBACK_SYNC_STORE_NAME_FULL, getSessionStoreName, Session } from './sessions';
 
 // the matrix-crypto-sdk add postfix to storeName
-const getCryptoDBName = (userId: string): string =>
-  `${getCryptoStoreName(userId)}::matrix-sdk-crypto`;
+const getCryptoDBName = (storeName: string): string => `${storeName}::matrix-sdk-crypto`;
 
 let closeMachineRef: (() => void) | undefined;
 
@@ -20,7 +17,7 @@ export const initializeCrypto = async (
   deleteCryptoStorage: () => Promise<void>;
   closeMachine: () => void;
 }> => {
-  const storeName = getCryptoStoreName(session.userId);
+  const storeName = getSessionStoreName(session).crypto;
 
   const { olmMachine, closeMachine: closeMachineInner } = await Machine.init(
     session.userId,
@@ -43,13 +40,22 @@ export const initializeCrypto = async (
 
   const deleteCryptoStorage = async () => {
     closeMachine();
-    await deleteDB(getCryptoDBName(session.userId));
+    await deleteDB(getCryptoDBName(storeName));
   };
 
   return { machine, deleteCryptoStorage, closeMachine };
 };
 
-export const deleteClientCryptoStorage = async (userId: string): Promise<void> => {
+export const deleteClientCryptoStorage = async (session: Session): Promise<void> => {
   closeMachineRef?.();
-  await deleteDB(getCryptoDBName(userId));
+  await deleteDB(getSessionStoreName(session).crypto);
+
+  if (session.fallbackSdkStores) {
+    try {
+      // migration code from matrix-js-sdk
+      await deleteDB(FALLBACK_SYNC_STORE_NAME_FULL);
+    } catch (e) {
+      console.log(e);
+    }
+  }
 };
diff --git a/src/client/initMatrix.ts b/src/client/initMatrix.ts
deleted file mode 100644
index d11dd484..00000000
--- a/src/client/initMatrix.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-import { createClient, MatrixClient, IndexedDBStore, IndexedDBCryptoStore } from 'matrix-js-sdk';
-
-import { clearNavToActivePathStore } from '../app/state/navToActivePath';
-import { pushSessionToSW } from '../sw-session';
-
-type Session = {
-  baseUrl: string;
-  accessToken: string;
-  userId: string;
-  deviceId: string;
-};
-
-export const initClient = async (session: Session): Promise<MatrixClient> => {
-  const indexedDBStore = new IndexedDBStore({
-    indexedDB: global.indexedDB,
-    localStorage: global.localStorage,
-    dbName: 'web-sync-store',
-  });
-
-  const legacyCryptoStore = new IndexedDBCryptoStore(global.indexedDB, 'crypto-store');
-
-  const mx = createClient({
-    baseUrl: session.baseUrl,
-    accessToken: session.accessToken,
-    userId: session.userId,
-    store: indexedDBStore,
-    cryptoStore: legacyCryptoStore,
-    deviceId: session.deviceId,
-    timelineSupport: true,
-    verificationMethods: ['m.sas.v1'],
-  });
-
-  await indexedDBStore.startup();
-  await mx.initRustCrypto();
-
-  mx.setMaxListeners(50);
-
-  return mx;
-};
-
-export const startClient = async (mx: MatrixClient) => {
-  await mx.startClient({
-    lazyLoadMembers: true,
-  });
-};
-
-export const clearCacheAndReload = async (mx: MatrixClient) => {
-  mx.stopClient();
-  clearNavToActivePathStore(mx.getSafeUserId());
-  await mx.store.deleteAllData();
-  window.location.reload();
-};
-
-export const logoutClient = async (mx: MatrixClient) => {
-  pushSessionToSW();
-  mx.stopClient();
-  try {
-    await mx.logout();
-  } catch {
-    // ignore if failed to logout
-  }
-  await mx.clearStores();
-  window.localStorage.clear();
-  window.location.reload();
-};
-
-export const clearLoginData = async () => {
-  const dbs = await window.indexedDB.databases();
-
-  dbs.forEach((idbInfo) => {
-    const { name } = idbInfo;
-    if (name) {
-      window.indexedDB.deleteDatabase(name);
-    }
-  });
-
-  window.localStorage.clear();
-  window.location.reload();
-};
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index d857f4c6..fa08e7a7 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -1,6 +1,6 @@
 import { MatrixRequest } from 'neurone/lib/matrix-request';
 import { Disposer } from 'neurone/lib/utils/disposable';
-import { Session } from '../app/state/sessions';
+import { removeSession, Session } from './sessions';
 import {
   ClientContext,
   createSecretsObservable,
@@ -38,15 +38,23 @@ import { MachineManager } from './MachineManager';
 import { DecryptionManager } from './decryption';
 import { initializeCrypto } from './crypto';
 import { MegolmBackup } from './MegolmBackup';
+import { clearUserLocalStorage } from './localStorage';
 
-export const initializeClient = async (session: Session): Promise<ClientContext> => {
+export type InitializeClientResult = {
+  ct: ClientContext;
+  dispose: () => void;
+};
+export const initializeClient = async (session: Session): Promise<InitializeClientResult> => {
   const disposer = new Disposer();
 
-  const { storage, deleteStorage } = await createStorage(session.userId);
+  const { storage, deleteStorage, disconnectStorage } = await createStorage(session);
 
   const requestAuthJSON: MatrixRequest = getAuthJSONRequest(session.baseUrl, session.accessToken);
 
-  const { machine, deleteCryptoStorage } = await initializeCrypto(session, requestAuthJSON);
+  const { machine, deleteCryptoStorage, closeMachine } = await initializeCrypto(
+    session,
+    requestAuthJSON
+  );
   await machine.outgoingRequests.processAll();
 
   const state = await createStateContext(storage, disposer);
@@ -98,6 +106,8 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     disposer.run();
     await deleteCryptoStorage();
     await deleteStorage();
+    clearUserLocalStorage(session.userId);
+    removeSession(session);
   });
 
   const clearCacheAndReload = async () => {
@@ -160,6 +170,8 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
   });
 
   disposer.collect(
+    disconnectStorage,
+    closeMachine,
     megolmBackup,
     decryption,
     syncObservable,
@@ -172,5 +184,8 @@ export const initializeClient = async (session: Session): Promise<ClientContext>
     syncResponseManager
   );
 
-  return ct;
+  return {
+    ct,
+    dispose: () => disposer.run(),
+  };
 };
diff --git a/src/client/localStorage.ts b/src/client/localStorage.ts
new file mode 100644
index 00000000..3a593285
--- /dev/null
+++ b/src/client/localStorage.ts
@@ -0,0 +1,30 @@
+import { clearCallPreferenceStore } from '../app/state/callPreferences';
+import { clearClosedLobbyCategoriesStore } from '../app/state/closedLobbyCategories';
+import { clearClosedNavCategoriesStore } from '../app/state/closedNavCategories';
+import { clearNavToActivePathStore } from '../app/state/navToActivePath';
+import { clearOpenedSidebarFolderStore } from '../app/state/openedSidebarFolder';
+import { clearSettingsStore } from '../app/state/settings';
+
+export const getLocalStorageItem = <T>(key: string, defaultValue: T): T => {
+  const item = window.localStorage.getItem(key);
+  if (item === null) return defaultValue;
+  if (item === 'undefined') return undefined as T;
+  try {
+    return JSON.parse(item) as T;
+  } catch {
+    return defaultValue;
+  }
+};
+
+export const setLocalStorageItem = <T>(key: string, value: T) => {
+  window.localStorage.setItem(key, JSON.stringify(value));
+};
+
+export const clearUserLocalStorage = (userId: string) => {
+  clearClosedNavCategoriesStore(userId);
+  clearClosedLobbyCategoriesStore(userId);
+  clearNavToActivePathStore(userId);
+  clearOpenedSidebarFolderStore(userId);
+  clearCallPreferenceStore(userId);
+  clearSettingsStore(userId);
+};
diff --git a/src/client/sessions.ts b/src/client/sessions.ts
new file mode 100644
index 00000000..8fd8d8f0
--- /dev/null
+++ b/src/client/sessions.ts
@@ -0,0 +1,97 @@
+import { getLocalStorageItem, setLocalStorageItem } from './localStorage';
+
+export const CLIENT_SESSIONS_STORE_KEY = 'client-sessions';
+
+export type Session = {
+  baseUrl: string;
+  userId: string;
+  deviceId: string;
+  accessToken: string;
+  expiresInMs?: number;
+  refreshToken?: string;
+  fallbackSdkStores?: boolean;
+};
+
+export type Sessions = Session[];
+export type SessionStoreName = {
+  client: string;
+  crypto: string;
+};
+
+/**
+ * Migration code for old session
+ */
+const FALLBACK_CRYPTO_STORE_NAME = 'matrix-js-sdk';
+export const FALLBACK_SYNC_STORE_NAME_FULL = 'matrix-js-sdk::web-sync-store';
+
+export function setFallbackSession(
+  accessToken: string,
+  deviceId: string,
+  userId: string,
+  baseUrl: string
+) {
+  localStorage.setItem('cinny_access_token', accessToken);
+  localStorage.setItem('cinny_device_id', deviceId);
+  localStorage.setItem('cinny_user_id', userId);
+  localStorage.setItem('cinny_hs_base_url', baseUrl);
+}
+export const removeFallbackSession = () => {
+  localStorage.removeItem('cinny_hs_base_url');
+  localStorage.removeItem('cinny_user_id');
+  localStorage.removeItem('cinny_device_id');
+  localStorage.removeItem('cinny_access_token');
+};
+export const getFallbackSession = (): Session | undefined => {
+  const baseUrl = localStorage.getItem('cinny_hs_base_url');
+  const userId = localStorage.getItem('cinny_user_id');
+  const deviceId = localStorage.getItem('cinny_device_id');
+  const accessToken = localStorage.getItem('cinny_access_token');
+
+  if (baseUrl && userId && deviceId && accessToken) {
+    const session: Session = {
+      baseUrl,
+      userId,
+      deviceId,
+      accessToken,
+      fallbackSdkStores: true,
+    };
+
+    return session;
+  }
+
+  return undefined;
+};
+/**
+ * End of migration code for old session
+ */
+
+export const getSessionStoreName = (session: Session): SessionStoreName => {
+  if (session.fallbackSdkStores) {
+    // if session is recovered from fallback
+    // reuse the current crypto store.
+    // old sdk uses the same sdk/idb as new one.
+    return {
+      client: `client${session.userId}`,
+      crypto: FALLBACK_CRYPTO_STORE_NAME,
+    };
+  }
+
+  return {
+    client: `client${session.userId}`,
+    crypto: `crypto${session.userId}`,
+  };
+};
+
+export const userHasSession = (userId: string): boolean => {
+  const sessions = getLocalStorageItem<Sessions>(CLIENT_SESSIONS_STORE_KEY, []);
+
+  return sessions.some((s) => s.userId === userId);
+};
+
+export const removeSession = (session: Session): void => {
+  const sessions = getLocalStorageItem<Sessions>(CLIENT_SESSIONS_STORE_KEY, []);
+
+  const newSessions = sessions.filter((s) => s.userId === session.userId);
+
+  setLocalStorageItem(CLIENT_SESSIONS_STORE_KEY, newSessions);
+};
diff --git a/src/client/storage/index.ts b/src/client/storage/index.ts
index e79d3e63..6ca0f8a7 100644
--- a/src/client/storage/index.ts
+++ b/src/client/storage/index.ts
@@ -47,6 +47,7 @@ import {
   createJoinRoomLatestEventCollection,
   prepareJoinRoomLatestEventStore,
 } from './collections';
+import { getSessionStoreName, Session } from '../sessions';
 
 export * from './utils';
 
@@ -78,20 +79,18 @@ export interface Storage {
   presence: PresenceCollection;
 }
 
-const getDBName = (userId: string): string => `client${userId}`;
-
 // create a reference to opened database close callback.
 // used in clearing cache if client failed to initilize.
 let disconnectStorageRef: (() => void) | undefined;
 
 export const createStorage = async (
-  userId: string
+  session: Session
 ): Promise<{
   storage: Storage;
   deleteStorage: () => Promise<void>;
   disconnectStorage: () => void;
 }> => {
-  const dbName = getDBName(userId);
+  const dbName = getSessionStoreName(session).client;
 
   // TODO: handle all openDB callbacks.
   const idb = await openDB(dbName, DATABASE_VERSION, {
@@ -165,8 +164,8 @@ export const createStorage = async (
   return { storage, deleteStorage, disconnectStorage };
 };
 
-export const deleteClientStorage = async (userId: string) => {
+export const deleteClientStorage = async (session: Session) => {
   disconnectStorageRef?.();
-  const dbName = getDBName(userId);
+  const dbName = getSessionStoreName(session).client;
   await deleteDB(dbName);
 };
diff --git a/src/index.tsx b/src/index.tsx
index 6cc0ca38..89c650b4 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -15,10 +15,13 @@ import App from './app/pages/App';
 
 // import i18n (needs to be bundled ;))
 import './app/i18n';
-import { pushSessionToSW } from './sw-session';
-import { getFallbackSession } from './app/state/sessions';
+import { ContainerColor } from './app/styles/ContainerColor.css';
 
-document.body.classList.add(configClass, varsClass);
+document.documentElement.classList.add(
+  configClass,
+  varsClass,
+  ...ContainerColor({ variant: 'Background' }).split(' ')
+);
 
 // Register Service Worker
 if ('serviceWorker' in navigator) {
@@ -27,21 +30,7 @@ if ('serviceWorker' in navigator) {
       ? `${trimTrailingSlash(import.meta.env.BASE_URL)}/sw.js`
       : `/dev-sw.js?dev-sw`;
 
-  const sendSessionToSW = () => {
-    const session = getFallbackSession();
-    pushSessionToSW(session?.baseUrl, session?.accessToken);
-  };
-
-  navigator.serviceWorker.register(swUrl).then(sendSessionToSW);
-  navigator.serviceWorker.ready.then(sendSessionToSW);
-
-  navigator.serviceWorker.addEventListener('message', (ev) => {
-    const { type } = ev.data ?? {};
-
-    if (type === 'requestSession') {
-      sendSessionToSW();
-    }
-  });
+  navigator.serviceWorker.register(swUrl);
 }
 
 const mountApp = () => {
diff --git a/src/sw-session.ts b/src/sw-session.ts
deleted file mode 100644
index 4b2ec055..00000000
--- a/src/sw-session.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export function pushSessionToSW(baseUrl?: string, accessToken?: string) {
-  if (!('serviceWorker' in navigator)) return;
-  if (!navigator.serviceWorker.controller) return;
-
-  navigator.serviceWorker.controller.postMessage({
-    type: 'setSession',
-    accessToken,
-    baseUrl,
-  });
-}
diff --git a/src/sw.ts b/src/sw.ts
index 69293b1d..4eb0c63e 100644
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -8,69 +8,30 @@ type SessionInfo = {
   baseUrl: string;
 };
 
-/**
- * Store session per client (tab)
- */
-const sessions = new Map<string, SessionInfo>();
+let _requestId = 0;
+const getRequestId = () => {
+  _requestId += 1;
+  return _requestId;
+};
 
-const clientToResolve = new Map<string, (value: SessionInfo | undefined) => void>();
-const clientToSessionPromise = new Map<string, Promise<SessionInfo | undefined>>();
+const pendingSessionRequests = new Map<number, (sessionInfo: SessionInfo | undefined) => void>();
 
-async function cleanupDeadClients() {
-  const activeClients = await self.clients.matchAll();
-  const activeIds = new Set(activeClients.map((c) => c.id));
-
-  Array.from(sessions.keys()).forEach((id) => {
-    if (!activeIds.has(id)) {
-      sessions.delete(id);
-      clientToResolve.delete(id);
-      clientToSessionPromise.delete(id);
-    }
-  });
-}
-
-function setSession(clientId: string, accessToken: any, baseUrl: any) {
-  if (typeof accessToken === 'string' && typeof baseUrl === 'string') {
-    sessions.set(clientId, { accessToken, baseUrl });
-  } else {
-    // Logout or invalid session
-    sessions.delete(clientId);
-  }
-
-  const resolveSession = clientToResolve.get(clientId);
-  if (resolveSession) {
-    resolveSession(sessions.get(clientId));
-    clientToResolve.delete(clientId);
-    clientToSessionPromise.delete(clientId);
-  }
-}
-
-function requestSession(client: Client): Promise<SessionInfo | undefined> {
-  const promise =
-    clientToSessionPromise.get(client.id) ??
-    new Promise((resolve) => {
-      clientToResolve.set(client.id, resolve);
-      client.postMessage({ type: 'requestSession' });
-    });
-
-  if (!clientToSessionPromise.has(client.id)) {
-    clientToSessionPromise.set(client.id, promise);
-  }
-
-  return promise;
-}
-
-async function requestSessionWithTimeout(
-  clientId: string,
-  timeoutMs = 3000
-): Promise<SessionInfo | undefined> {
+async function requestSession(clientId: string): Promise<SessionInfo | undefined> {
   const client = await self.clients.get(clientId);
   if (!client) return undefined;
 
-  const sessionPromise = requestSession(client);
+  const id = getRequestId();
+
+  const sessionPromise = new Promise<SessionInfo | undefined>((resolve) => {
+    pendingSessionRequests.set(id, resolve);
+    client.postMessage({ type: 'session-request', id });
+  });
 
   const timeout = new Promise<undefined>((resolve) => {
-    setTimeout(() => resolve(undefined), timeoutMs);
+    setTimeout(() => {
+      resolve(undefined);
+      pendingSessionRequests.delete(id);
+    }, 3000);
   });
 
   return Promise.race([sessionPromise, timeout]);
@@ -84,7 +45,6 @@ self.addEventListener('activate', (event: ExtendableEvent) => {
   event.waitUntil(
     (async () => {
       await self.clients.claim();
-      await cleanupDeadClients();
     })()
   );
 });
@@ -96,11 +56,12 @@ self.addEventListener('message', (event: ExtendableMessageEvent) => {
   const client = event.source as Client | null;
   if (!client) return;
 
-  const { type, accessToken, baseUrl } = event.data || {};
+  const { type, id, accessToken, baseUrl } = event.data || {};
 
-  if (type === 'setSession') {
-    setSession(client.id, accessToken, baseUrl);
-    cleanupDeadClients();
+  if (type === 'session-request') {
+    const requestResolver = pendingSessionRequests.get(id);
+    pendingSessionRequests.delete(id);
+    requestResolver?.({ accessToken, baseUrl });
   }
 });
 
@@ -139,16 +100,8 @@ self.addEventListener('fetch', (event: FetchEvent) => {
   const { clientId } = event;
   if (!clientId) return;
 
-  const session = sessions.get(clientId);
-  if (session) {
-    if (validMediaRequest(url, session.baseUrl)) {
-      event.respondWith(fetch(url, fetchConfig(session.accessToken)));
-    }
-    return;
-  }
-
   event.respondWith(
-    requestSessionWithTimeout(clientId).then((s) => {
+    requestSession(clientId).then((s) => {
       if (s && validMediaRequest(url, s.baseUrl)) {
         return fetch(url, fetchConfig(s.accessToken));
       }

From 6b0506a2ce62a582095ee5d8622b3fe832fb141c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 11:01:37 +0530
Subject: [PATCH 089/158] add accounts button on login screen

---
 src/app/components/auth-layout/AuthLayout.tsx | 14 ++++-----
 src/app/components/auth-layout/styles.css.ts  |  3 +-
 src/app/pages/AccountSelector.tsx             |  2 +-
 src/app/pages/auth/AuthRoot.tsx               | 29 +++++++++++++++++--
 4 files changed, 35 insertions(+), 13 deletions(-)

diff --git a/src/app/components/auth-layout/AuthLayout.tsx b/src/app/components/auth-layout/AuthLayout.tsx
index a57e7963..d90a6847 100644
--- a/src/app/components/auth-layout/AuthLayout.tsx
+++ b/src/app/components/auth-layout/AuthLayout.tsx
@@ -1,5 +1,5 @@
 import React, { ReactNode } from 'react';
-import { Box, Header, Scroll, Text } from 'folds';
+import { Box, Header, Scroll } from 'folds';
 import classNames from 'classnames';
 
 import * as css from './styles.css';
@@ -12,11 +12,11 @@ export function AuthLogo({ large }: { large?: boolean }) {
 }
 
 type AuthLayoutProps = {
-  hideHeader?: boolean;
   center?: boolean;
   children?: ReactNode;
+  header?: ReactNode;
 };
-export function AuthLayout({ hideHeader, center, children }: AuthLayoutProps) {
+export function AuthLayout({ center, header, children }: AuthLayoutProps) {
   return (
     <Scroll variant="Background" visibility="Hover" size="0" hideTrack>
       <Box
@@ -32,14 +32,12 @@ export function AuthLayout({ hideHeader, center, children }: AuthLayoutProps) {
           direction="Column"
         >
           <Box direction="Column" className={css.AuthCard}>
-            {!hideHeader && (
+            {header && (
               <Header className={css.AuthHeader} size="600" variant="Surface">
-                <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
-                  <AuthLogo />
-                  <Text size="H3">Cinny</Text>
-                </Box>
+                {header}
               </Header>
             )}
+
             <Box className={css.AuthCardContent} direction="Column">
               {children}
             </Box>
diff --git a/src/app/components/auth-layout/styles.css.ts b/src/app/components/auth-layout/styles.css.ts
index 649c4beb..b359d09a 100644
--- a/src/app/components/auth-layout/styles.css.ts
+++ b/src/app/components/auth-layout/styles.css.ts
@@ -44,7 +44,8 @@ export const AuthLogo = recipe({
 });
 
 export const AuthHeader = style({
-  padding: `0 ${config.space.S400}`,
+  paddingLeft: config.space.S400,
+  paddingRight: config.space.S300,
   borderBottomWidth: config.borderWidth.B300,
 });
 
diff --git a/src/app/pages/AccountSelector.tsx b/src/app/pages/AccountSelector.tsx
index 9b012cce..303bcf8b 100644
--- a/src/app/pages/AccountSelector.tsx
+++ b/src/app/pages/AccountSelector.tsx
@@ -116,7 +116,7 @@ export function AccountSelector() {
   }
 
   return (
-    <AuthLayout hideHeader>
+    <AuthLayout>
       <Box style={{ position: 'relative' }} direction="Column" gap="500">
         <span data-spacing-node />
         <Box direction="Column" gap="400" alignItems="Center">
diff --git a/src/app/pages/auth/AuthRoot.tsx b/src/app/pages/auth/AuthRoot.tsx
index afec36e4..cf6441be 100644
--- a/src/app/pages/auth/AuthRoot.tsx
+++ b/src/app/pages/auth/AuthRoot.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { Box, Spinner, Text, color } from 'folds';
+import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, color } from 'folds';
 import {
   Outlet,
   generatePath,
@@ -25,8 +25,10 @@ import { AuthFlowsLoader } from '../../components/AuthFlowsLoader';
 import { AuthFlowsProvider } from '../../hooks/useAuthFlows';
 import { AuthServerProvider } from '../../hooks/useAuthServer';
 import { tryDecodeURIComponent } from '../../utils/dom';
-import { AuthLayout } from '../../components/auth-layout';
+import { AuthLayout, AuthLogo } from '../../components/auth-layout';
 import { useUnauthThemeManager } from '../ThemeManager';
+import { useSessions } from '../../hooks/useSessions';
+import { getRootPath } from '../pathUtils';
 
 const currentAuthPath = (pathname: string): string => {
   if (matchPath(LOGIN_PATH, pathname)) {
@@ -67,6 +69,7 @@ export function AuthRoot() {
   const navigate = useNavigate();
   const location = useLocation();
   const { server: urlEncodedServer } = useParams();
+  const sessions = useSessions();
 
   const clientConfig = useClientConfig();
 
@@ -121,7 +124,27 @@ export function AuthRoot() {
     discoveryState.status === AsyncStatus.Success ? discoveryState.data.response : [];
 
   return (
-    <AuthLayout>
+    <AuthLayout
+      header={
+        <Box grow="Yes" direction="Row" gap="300" alignItems="Center">
+          <AuthLogo />
+          <Box grow="Yes">
+            <Text size="H3">Cinny</Text>
+          </Box>
+          {sessions.length > 0 && (
+            <Chip
+              variant="Surface"
+              fill="None"
+              radii="Pill"
+              before={<Icon src={Icons.ArrowUpDown} size="50" />}
+              onClick={() => navigate(getRootPath())}
+            >
+              <Text size="L400">Accounts</Text>
+            </Chip>
+          )}
+        </Box>
+      }
+    >
       <Box direction="Column" gap="100">
         <Text as="label" size="L400" priority="300">
           Homeserver

From f69f6f697081348aa6b1ffd5e87a6f7aaf2b631a Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 11:01:55 +0530
Subject: [PATCH 090/158] remove unused imports

---
 src/app/pages/auth/AuthRoot.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/auth/AuthRoot.tsx b/src/app/pages/auth/AuthRoot.tsx
index cf6441be..f940324e 100644
--- a/src/app/pages/auth/AuthRoot.tsx
+++ b/src/app/pages/auth/AuthRoot.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect } from 'react';
-import { Box, Chip, Icon, IconButton, Icons, Spinner, Text, color } from 'folds';
+import { Box, Chip, Icon, Icons, Spinner, Text, color } from 'folds';
 import {
   Outlet,
   generatePath,

From 94d05c72c3fa45af3e15e5adfc76706063826487 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 11:33:20 +0530
Subject: [PATCH 091/158] always open last used account on reloads

---
 src/app/hooks/useDocumentVisibilityChange.ts | 13 ++++++++++++
 src/app/pages/AccountSelector.tsx            | 22 ++++++++++++++++++--
 src/app/state/sessions.ts                    |  3 ++-
 src/client/sessions.ts                       | 11 ++++++++++
 4 files changed, 46 insertions(+), 3 deletions(-)
 create mode 100644 src/app/hooks/useDocumentVisibilityChange.ts

diff --git a/src/app/hooks/useDocumentVisibilityChange.ts b/src/app/hooks/useDocumentVisibilityChange.ts
new file mode 100644
index 00000000..0d929bd0
--- /dev/null
+++ b/src/app/hooks/useDocumentVisibilityChange.ts
@@ -0,0 +1,13 @@
+import { useEffect } from 'react';
+
+export const useDocumentVisibilityChange = (onChange: (visible: boolean) => void) => {
+  useEffect(() => {
+    const handleChange = () => {
+      onChange(document.visibilityState === 'visible');
+    };
+    document.addEventListener('visibilitychange', handleChange);
+    return () => {
+      document.removeEventListener('visibilitychange', handleChange);
+    };
+  }, [onChange]);
+};
diff --git a/src/app/pages/AccountSelector.tsx b/src/app/pages/AccountSelector.tsx
index 303bcf8b..0f37a57c 100644
--- a/src/app/pages/AccountSelector.tsx
+++ b/src/app/pages/AccountSelector.tsx
@@ -1,4 +1,4 @@
-import React, { useMemo, useRef } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef } from 'react';
 import { Avatar, Box, Button, config, Icon, Icons, Text } from 'folds';
 import { Link, Navigate, Outlet, useNavigate } from 'react-router-dom';
 import { useAtom, useAtomValue } from 'jotai';
@@ -23,12 +23,13 @@ import {
   getAfterLoginRedirectPath,
   setAfterLoginRedirectPath,
 } from './afterLoginRedirectPath';
-import { Session } from '../../client/sessions';
+import { Session, setLastActiveUserId } from '../../client/sessions';
 import { OrDivider } from '../components/OrDivider';
 import { getAuthJSONRequest } from '../../client/request';
 import { useUserProfileRequest } from '../hooks/useUserProfile';
 import { mxcToHttp } from '../../client/mxcToHttp';
 import { useSessionRequest } from '../hooks/sw/useSessionRequest';
+import { useDocumentVisibilityChange } from '../hooks/useDocumentVisibilityChange';
 
 function AccountCard({ session }: { session: Session }) {
   const { userId } = session;
@@ -176,6 +177,23 @@ export function ClientAccountSelector() {
 
   useSessionRequest(session ?? sessions[0]);
 
+  useDocumentVisibilityChange(
+    useCallback(
+      (visible) => {
+        if (visible && session) {
+          setLastActiveUserId(session.userId);
+        }
+      },
+      [session]
+    )
+  );
+
+  useEffect(() => {
+    if (session) {
+      setLastActiveUserId(session.userId);
+    }
+  }, [session]);
+
   if (!session) {
     return <AccountSelector />;
   }
diff --git a/src/app/state/sessions.ts b/src/app/state/sessions.ts
index 4ffc1025..b12c4587 100644
--- a/src/app/state/sessions.ts
+++ b/src/app/state/sessions.ts
@@ -3,6 +3,7 @@ import { atomWithLocalStorage } from './utils/atomWithLocalStorage';
 import {
   CLIENT_SESSIONS_STORE_KEY,
   getFallbackSession,
+  getLastActiveUserId,
   removeFallbackSession,
   Session,
   Sessions,
@@ -66,4 +67,4 @@ export const sessionsAtom = atom<Sessions, [SessionsAction], undefined>(
   }
 );
 
-export const sessionUserIdAtom = atom<string | undefined>(undefined);
+export const sessionUserIdAtom = atom<string | undefined>(getLastActiveUserId());
diff --git a/src/client/sessions.ts b/src/client/sessions.ts
index 8fd8d8f0..e57a110d 100644
--- a/src/client/sessions.ts
+++ b/src/client/sessions.ts
@@ -2,6 +2,8 @@ import { getLocalStorageItem, setLocalStorageItem } from './localStorage';
 
 export const CLIENT_SESSIONS_STORE_KEY = 'client-sessions';
 
+const LAST_ACTIVE_USERID = 'last-active-userId';
+
 export type Session = {
   baseUrl: string;
   userId: string;
@@ -95,3 +97,12 @@ export const removeSession = (session: Session): void => {
 
   setLocalStorageItem(CLIENT_SESSIONS_STORE_KEY, newSessions);
 };
+
+export const setLastActiveUserId = (userId: string) => {
+  setLocalStorageItem(LAST_ACTIVE_USERID, userId);
+};
+
+export const getLastActiveUserId = (): string | undefined => {
+  const userId = getLocalStorageItem<string | undefined>(LAST_ACTIVE_USERID, undefined);
+  return userId;
+};

From 40ec962106b52727676cc7196bef047a7840ce07 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 11:47:32 +0530
Subject: [PATCH 092/158] add last used badge in account selector

---
 src/app/pages/AccountSelector.tsx | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/AccountSelector.tsx b/src/app/pages/AccountSelector.tsx
index 0f37a57c..f7361ecc 100644
--- a/src/app/pages/AccountSelector.tsx
+++ b/src/app/pages/AccountSelector.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useMemo, useRef } from 'react';
-import { Avatar, Box, Button, config, Icon, Icons, Text } from 'folds';
+import { Avatar, Badge, Box, Button, config, Icon, Icons, Text } from 'folds';
 import { Link, Navigate, Outlet, useNavigate } from 'react-router-dom';
 import { useAtom, useAtomValue } from 'jotai';
 import { AuthLayout, AuthLogo } from '../components/auth-layout';
@@ -23,7 +23,7 @@ import {
   getAfterLoginRedirectPath,
   setAfterLoginRedirectPath,
 } from './afterLoginRedirectPath';
-import { Session, setLastActiveUserId } from '../../client/sessions';
+import { getLastActiveUserId, Session, setLastActiveUserId } from '../../client/sessions';
 import { OrDivider } from '../components/OrDivider';
 import { getAuthJSONRequest } from '../../client/request';
 import { useUserProfileRequest } from '../hooks/useUserProfile';
@@ -35,6 +35,7 @@ function AccountCard({ session }: { session: Session }) {
   const { userId } = session;
   const navigate = useNavigate();
   const [sessionUserId, setSessionUserId] = useAtom(sessionUserIdAtom);
+  const lastUserId = getLastActiveUserId();
 
   const request = useMemo(
     () => getAuthJSONRequest(session.baseUrl, session.accessToken),
@@ -90,6 +91,13 @@ function AccountCard({ session }: { session: Session }) {
             <Text truncate>
               <b>{displayName}</b>
             </Text>
+            {lastUserId === userId && (
+              <Badge variant="Primary" fill="Soft" outlined radii="300">
+                <Text as="span" size="L400">
+                  Last used
+                </Text>
+              </Badge>
+            )}
           </Box>
           <Box gap="200" justifyContent="SpaceBetween">
             <Text size="T200" truncate>

From a32b92c3c84202e1faf82fe750657cf83ba7ddd9 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 11:51:43 +0530
Subject: [PATCH 093/158] allow browser back button to load session when
 accounts opened

---
 src/app/pages/client/sidebar/SettingsTab.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index a21a9039..a6919ea4 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -94,12 +94,10 @@ type AccountSwitcherProps = {
 };
 function AccountSwitcher({ cords, requestClose }: AccountSwitcherProps) {
   const navigate = useNavigate();
-  const setSessionUserId = useSetAtom(sessionUserIdAtom);
 
   const sessions = useSessions();
 
   const handleManageAccounts = () => {
-    setSessionUserId(undefined);
     navigate(getRootPath());
   };
 

From 308b7db854110af24931add93c970201270fb667 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 12:57:16 +0530
Subject: [PATCH 094/158] fix logout fails by twice close machine calls

---
 src/app/pages/AccountSelector.tsx | 26 ++++++++++++++------------
 src/app/state/sessions.ts         | 20 ++++----------------
 src/client/crypto.ts              |  1 -
 src/client/sessions.ts            | 20 +++++++++++---------
 src/client/storage/index.ts       |  1 -
 5 files changed, 29 insertions(+), 39 deletions(-)

diff --git a/src/app/pages/AccountSelector.tsx b/src/app/pages/AccountSelector.tsx
index f7361ecc..b3c1dfe2 100644
--- a/src/app/pages/AccountSelector.tsx
+++ b/src/app/pages/AccountSelector.tsx
@@ -30,6 +30,7 @@ import { useUserProfileRequest } from '../hooks/useUserProfile';
 import { mxcToHttp } from '../../client/mxcToHttp';
 import { useSessionRequest } from '../hooks/sw/useSessionRequest';
 import { useDocumentVisibilityChange } from '../hooks/useDocumentVisibilityChange';
+import { useDocumentFocusChange } from '../hooks/useDocumentFocusChange';
 
 function AccountCard({ session }: { session: Session }) {
   const { userId } = session;
@@ -185,22 +186,23 @@ export function ClientAccountSelector() {
 
   useSessionRequest(session ?? sessions[0]);
 
-  useDocumentVisibilityChange(
-    useCallback(
-      (visible) => {
-        if (visible && session) {
-          setLastActiveUserId(session.userId);
-        }
-      },
-      [session]
-    )
+  const handleVisibility = useCallback(
+    (visible: boolean) => {
+      if (visible && userId) {
+        setLastActiveUserId(userId);
+      }
+    },
+    [userId]
   );
 
+  useDocumentVisibilityChange(handleVisibility);
+  useDocumentFocusChange(handleVisibility);
+
   useEffect(() => {
-    if (session) {
-      setLastActiveUserId(session.userId);
+    if (userId) {
+      setLastActiveUserId(userId);
     }
-  }, [session]);
+  }, [userId]);
 
   if (!session) {
     return <AccountSelector />;
diff --git a/src/app/state/sessions.ts b/src/app/state/sessions.ts
index b12c4587..695e3acf 100644
--- a/src/app/state/sessions.ts
+++ b/src/app/state/sessions.ts
@@ -32,15 +32,10 @@ const baseSessionsAtom = atomWithLocalStorage<Sessions>(
   }
 );
 
-export type SessionsAction =
-  | {
-      type: 'PUT';
-      session: Session;
-    }
-  | {
-      type: 'DELETE';
-      session: Session;
-    };
+export type SessionsAction = {
+  type: 'PUT';
+  session: Session;
+};
 
 export const sessionsAtom = atom<Sessions, [SessionsAction], undefined>(
   (get) => get(baseSessionsAtom),
@@ -56,13 +51,6 @@ export const sessionsAtom = atom<Sessions, [SessionsAction], undefined>(
         sessions.splice(sessionIndex, 1, action.session);
       }
       set(baseSessionsAtom, sessions);
-      return;
-    }
-    if (action.type === 'DELETE') {
-      const sessions = get(baseSessionsAtom).filter(
-        (session) => session.userId !== action.session.userId
-      );
-      set(baseSessionsAtom, sessions);
     }
   }
 );
diff --git a/src/client/crypto.ts b/src/client/crypto.ts
index 7102b494..6953413f 100644
--- a/src/client/crypto.ts
+++ b/src/client/crypto.ts
@@ -39,7 +39,6 @@ export const initializeCrypto = async (
   const machine = new Machine(olmMachine, outgoingSender, outgoingRequestRetrier);
 
   const deleteCryptoStorage = async () => {
-    closeMachine();
     await deleteDB(getCryptoDBName(storeName));
   };
 
diff --git a/src/client/sessions.ts b/src/client/sessions.ts
index e57a110d..69672831 100644
--- a/src/client/sessions.ts
+++ b/src/client/sessions.ts
@@ -84,6 +84,15 @@ export const getSessionStoreName = (session: Session): SessionStoreName => {
   };
 };
 
+export const setLastActiveUserId = (userId: string | undefined) => {
+  setLocalStorageItem(LAST_ACTIVE_USERID, userId);
+};
+
+export const getLastActiveUserId = (): string | undefined => {
+  const userId = getLocalStorageItem<string | undefined>(LAST_ACTIVE_USERID, undefined);
+  return userId;
+};
+
 export const userHasSession = (userId: string): boolean => {
   const sessions = getLocalStorageItem<Sessions>(CLIENT_SESSIONS_STORE_KEY, []);
 
@@ -93,16 +102,9 @@ export const userHasSession = (userId: string): boolean => {
 export const removeSession = (session: Session): void => {
   const sessions = getLocalStorageItem<Sessions>(CLIENT_SESSIONS_STORE_KEY, []);
 
-  const newSessions = sessions.filter((s) => s.userId === session.userId);
+  const newSessions = sessions.filter((s) => s.userId !== session.userId);
 
   setLocalStorageItem(CLIENT_SESSIONS_STORE_KEY, newSessions);
-};
 
-export const setLastActiveUserId = (userId: string) => {
-  setLocalStorageItem(LAST_ACTIVE_USERID, userId);
-};
-
-export const getLastActiveUserId = (): string | undefined => {
-  const userId = getLocalStorageItem<string | undefined>(LAST_ACTIVE_USERID, undefined);
-  return userId;
+  setLastActiveUserId(undefined);
 };
diff --git a/src/client/storage/index.ts b/src/client/storage/index.ts
index 6ca0f8a7..b69edc6e 100644
--- a/src/client/storage/index.ts
+++ b/src/client/storage/index.ts
@@ -157,7 +157,6 @@ export const createStorage = async (
   };
 
   const deleteStorage = async () => {
-    disconnectStorage();
     await deleteDB(dbName);
   };
 

From 2d7fb283bdf78fc850dc92d35bcb8cf194dc6831 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 15:00:13 +0530
Subject: [PATCH 095/158] allow single session tab

---
 src/app/hooks/useSingleSessionTab.ts | 36 ++++++++++++++++++++++++++++
 src/app/pages/AccountSelector.tsx    |  2 ++
 2 files changed, 38 insertions(+)
 create mode 100644 src/app/hooks/useSingleSessionTab.ts

diff --git a/src/app/hooks/useSingleSessionTab.ts b/src/app/hooks/useSingleSessionTab.ts
new file mode 100644
index 00000000..ab8da517
--- /dev/null
+++ b/src/app/hooks/useSingleSessionTab.ts
@@ -0,0 +1,36 @@
+import { useEffect, useMemo } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { getRootPath } from '../pages/pathUtils';
+
+export const useSingleSessionTab = (userId?: string) => {
+  const broadcast = useMemo(() => new BroadcastChannel('in.cinny.broadcast'), []);
+
+  const tabId = useMemo(() => crypto.randomUUID(), []);
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    const handleBroadcast = (event: MessageEvent) => {
+      if (!userId) return;
+      const { type, userId: messageUserId, tabId: messageTabId } = event.data ?? {};
+
+      if (type === 'session-spawn' && messageUserId === userId && messageTabId !== tabId) {
+        // Another tab opened the same session
+        navigate(getRootPath());
+      }
+    };
+
+    broadcast.addEventListener('message', handleBroadcast);
+
+    if (userId) {
+      broadcast.postMessage({
+        type: 'session-spawn',
+        userId,
+        tabId,
+      });
+    }
+
+    return () => {
+      broadcast.removeEventListener('message', handleBroadcast);
+    };
+  }, [broadcast, userId, tabId, navigate]);
+};
diff --git a/src/app/pages/AccountSelector.tsx b/src/app/pages/AccountSelector.tsx
index b3c1dfe2..d155096b 100644
--- a/src/app/pages/AccountSelector.tsx
+++ b/src/app/pages/AccountSelector.tsx
@@ -31,6 +31,7 @@ import { mxcToHttp } from '../../client/mxcToHttp';
 import { useSessionRequest } from '../hooks/sw/useSessionRequest';
 import { useDocumentVisibilityChange } from '../hooks/useDocumentVisibilityChange';
 import { useDocumentFocusChange } from '../hooks/useDocumentFocusChange';
+import { useSingleSessionTab } from '../hooks/useSingleSessionTab';
 
 function AccountCard({ session }: { session: Session }) {
   const { userId } = session;
@@ -185,6 +186,7 @@ export function ClientAccountSelector() {
   const session = useMemo(() => sessions.find((s) => userId === s.userId), [userId, sessions]);
 
   useSessionRequest(session ?? sessions[0]);
+  useSingleSessionTab(session?.userId);
 
   const handleVisibility = useCallback(
     (visible: boolean) => {

From 5272c5d505323bc75b558c1deef7091518941058 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 15:13:48 +0530
Subject: [PATCH 096/158] upsize settings tab menu item text

---
 src/app/pages/client/sidebar/SettingsTab.tsx | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index a6919ea4..45a1fe70 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -81,7 +81,7 @@ function AccountTile({ session }: AccountTileProps) {
         </Text>
       }
     >
-      <Text style={{ flexGrow: 1 }} as="span" size="B300" truncate>
+      <Text style={{ flexGrow: 1 }} as="span" size="B400" truncate>
         {displayName}
       </Text>
     </MenuItem>
@@ -145,7 +145,7 @@ function AccountSwitcher({ cords, requestClose }: AccountSwitcherProps) {
                 after={<Icon size="100" src={Icons.User} />}
                 onClick={handleManageAccounts}
               >
-                <Text style={{ flexGrow: 1 }} as="span" size="B300" truncate>
+                <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
                   Manage Accounts
                 </Text>
               </MenuItem>
@@ -237,15 +237,15 @@ export function SettingsTab() {
             }}
           >
             <Menu style={{ maxWidth: toRem(200), width: '100vw' }}>
-              <Box direction="Column" gap="0" style={{ padding: config.space.S100 }}>
+              <Box direction="Column" gap="100" style={{ padding: config.space.S100 }}>
                 <MenuItem
                   size="300"
                   radii="300"
                   onClick={openSettings}
                   after={<Icon size="100" src={Icons.Setting} />}
                 >
-                  <Text style={{ flexGrow: 1 }} as="span" size="B300" truncate>
-                    Settings
+                  <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
+                    User Settings
                   </Text>
                 </MenuItem>
                 <MenuItem
@@ -255,7 +255,7 @@ export function SettingsTab() {
                   onClick={handleOpenAccountSwitcher}
                   aria-pressed={!!switcherAnchor}
                 >
-                  <Text style={{ flexGrow: 1 }} as="span" size="B300" truncate>
+                  <Text style={{ flexGrow: 1 }} as="span" size="T300" truncate>
                     Switch Accounts
                   </Text>
                 </MenuItem>

From 2a7f0a7bccde485863e59d5d0d0da8d8ba6c41af Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 15:19:13 +0530
Subject: [PATCH 097/158] fix settings tab menu offset

---
 src/app/pages/client/sidebar/SettingsTab.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index 45a1fe70..3b936a58 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -106,7 +106,7 @@ function AccountSwitcher({ cords, requestClose }: AccountSwitcherProps) {
       anchor={cords}
       position="Right"
       align="End"
-      offset={6}
+      offset={5}
       content={
         <FocusTrap
           focusTrapOptions={{
@@ -223,7 +223,6 @@ export function SettingsTab() {
         anchor={menuAnchor}
         position="Right"
         align="End"
-        offset={6}
         content={
           <FocusTrap
             focusTrapOptions={{

From ae551a2eeee28df54bda2637c49e2c0f53d3f621 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 15:30:55 +0530
Subject: [PATCH 098/158] fix account switcher padding

---
 src/app/pages/client/sidebar/SettingsTab.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index 3b936a58..2ccf3a46 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -122,12 +122,12 @@ function AccountSwitcher({ cords, requestClose }: AccountSwitcherProps) {
           <Menu style={{ maxWidth: toRem(250), width: '100vw' }}>
             {sessions.length > 0 && (
               <>
-                <Scroll style={{ maxHeight: toRem(300) }} size="300" hideTrack>
+                <Scroll style={{ maxHeight: toRem(300) }} size="0" hideTrack>
                   <Box
                     direction="Column"
                     gap="0"
                     style={{
-                      padding: `${config.space.S200} 0 ${config.space.S200} ${config.space.S200}`,
+                      padding: config.space.S100,
                     }}
                   >
                     {sessions.map((session) => (

From e05d8b7b9bbcc69c4081a332e1af49bdfd643f10 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 16:33:06 +0530
Subject: [PATCH 099/158] fix account select content for safari browser

---
 src/app/pages/AccountSelector.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/app/pages/AccountSelector.tsx b/src/app/pages/AccountSelector.tsx
index d155096b..47142c8f 100644
--- a/src/app/pages/AccountSelector.tsx
+++ b/src/app/pages/AccountSelector.tsx
@@ -72,6 +72,7 @@ function AccountCard({ session }: { session: Session }) {
       direction="Column"
       style={{ padding: `${config.space.S300} ${config.space.S400}` }}
       variant="SurfaceVariant"
+      alignItems="Stretch"
       as="button"
       type="button"
       onClick={handleClick}

From 9ce9e82eb4489dd051454c8b7e94f7908f59495f Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 17:42:15 +0530
Subject: [PATCH 100/158] fix typo in fallback sync store name

---
 src/client/sessions.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/sessions.ts b/src/client/sessions.ts
index 69672831..9116e85d 100644
--- a/src/client/sessions.ts
+++ b/src/client/sessions.ts
@@ -24,7 +24,7 @@ export type SessionStoreName = {
  * Migration code for old session
  */
 const FALLBACK_CRYPTO_STORE_NAME = 'matrix-js-sdk';
-export const FALLBACK_SYNC_STORE_NAME_FULL = 'matrix-js-sdk::web-sync-store';
+export const FALLBACK_SYNC_STORE_NAME_FULL = 'matrix-js-sdk:web-sync-store';
 
 export function setFallbackSession(
   accessToken: string,

From 79800aeea480cb5f9f0f7a78f8022e459153b594 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 21 Aug 2026 17:54:31 +0530
Subject: [PATCH 101/158] migrate old app settings to multi-account

---
 src/app/state/settings.ts | 20 +++++++++++---------
 1 file changed, 11 insertions(+), 9 deletions(-)

diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index 6849aa7b..c7272d6c 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -87,20 +87,22 @@ const defaultSettings: Settings = {
 const STORAGE_KEY = 'settings';
 const getStoreKey = (userId: string): string => `${STORAGE_KEY}${userId}`;
 
-// export const settingsAtom = atomWithLocalStorage<Settings>(
-//   STORAGE_KEY,
-//   (key) => getLocalStorageItem<Settings>(key, defaultSettings),
-//   (key, settings) => {
-//     setLocalStorageItem(key, settings);
-//   }
-// );
-
 export type SettingsAtom = WritableAtom<Settings, [Settings], void>;
 
 export const makeSettingsAtom = (userId: string): SettingsAtom => {
   const settingsAtom = atomWithLocalStorage<Settings>(
     getStoreKey(userId),
-    (key) => getLocalStorageItem<Settings>(key, defaultSettings),
+    (key) => {
+      // migrate from settings item without username postfix
+      const migrateSettings = getLocalStorageItem<Settings>(STORAGE_KEY, defaultSettings);
+      if (migrateSettings !== defaultSettings) {
+        setLocalStorageItem(key, migrateSettings);
+        localStorage.removeItem(STORAGE_KEY);
+      }
+      // end of migration
+
+      return getLocalStorageItem<Settings>(key, migrateSettings);
+    },
     (key, settings) => {
       setLocalStorageItem(key, settings);
     }

From 1c023c6e620d3345fc5833f18fc49da31166f7ed Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 22 Aug 2026 15:16:53 +0530
Subject: [PATCH 102/158] request session per origin for better multi account
 requests

---
 src/app/hooks/sw/useSessionRequest.ts        | 17 ++++++++++++-----
 src/app/pages/AccountSelector.tsx            |  4 ++--
 src/app/pages/client/sidebar/SettingsTab.tsx | 11 ++++++++---
 src/sw.ts                                    |  6 +++---
 4 files changed, 25 insertions(+), 13 deletions(-)

diff --git a/src/app/hooks/sw/useSessionRequest.ts b/src/app/hooks/sw/useSessionRequest.ts
index cf86eea6..80909617 100644
--- a/src/app/hooks/sw/useSessionRequest.ts
+++ b/src/app/hooks/sw/useSessionRequest.ts
@@ -8,12 +8,19 @@ const getServiceWorker = () => {
   return undefined;
 };
 
-export const useSessionRequest = (session?: Session) => {
+export const useSessionRequest = (sessions: Session[], userId?: string) => {
   useEffect(() => {
-    const handleSWMessages = (ev: MessageEvent<any>) => {
-      if (!session) return;
+    const userSession = sessions.find((s) => s.userId === userId);
 
-      const { type, id } = ev.data ?? {};
+    const handleSWMessages = (ev: MessageEvent<any>) => {
+      const { type, id, origin } = ev.data ?? {};
+
+      const session =
+        userSession && userSession.baseUrl.startsWith(origin)
+          ? userSession
+          : sessions.find((s) => s.baseUrl.startsWith(origin));
+
+      if (!session) return;
 
       if (type === 'session-request') {
         getServiceWorker()?.controller?.postMessage({
@@ -30,5 +37,5 @@ export const useSessionRequest = (session?: Session) => {
     return () => {
       getServiceWorker()?.removeEventListener('message', handleSWMessages);
     };
-  }, [session]);
+  }, [sessions, userId]);
 };
diff --git a/src/app/pages/AccountSelector.tsx b/src/app/pages/AccountSelector.tsx
index 47142c8f..76c0e44b 100644
--- a/src/app/pages/AccountSelector.tsx
+++ b/src/app/pages/AccountSelector.tsx
@@ -121,7 +121,7 @@ export function AccountSelector() {
   const navigate = useNavigate();
 
   const sessions = useSessions();
-  useSessionRequest(sessions[0]);
+  useSessionRequest(sessions);
 
   if (sessions.length === 0) {
     return <Navigate to={getLoginPath()} replace />;
@@ -186,7 +186,7 @@ export function ClientAccountSelector() {
   const sessions = useSessions();
   const session = useMemo(() => sessions.find((s) => userId === s.userId), [userId, sessions]);
 
-  useSessionRequest(session ?? sessions[0]);
+  useSessionRequest(sessions, userId);
   useSingleSessionTab(session?.userId);
 
   const handleVisibility = useCallback(
diff --git a/src/app/pages/client/sidebar/SettingsTab.tsx b/src/app/pages/client/sidebar/SettingsTab.tsx
index 2ccf3a46..9ab36913 100644
--- a/src/app/pages/client/sidebar/SettingsTab.tsx
+++ b/src/app/pages/client/sidebar/SettingsTab.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useState } from 'react';
+import React, { MouseEventHandler, useMemo, useState } from 'react';
 import {
   Avatar,
   Box,
@@ -23,7 +23,7 @@ import { getMxIdLocalPart, getMxIdServer } from '../../../utils/matrix';
 import { nameInitials } from '../../../utils/common';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { Settings } from '../../../features/settings';
-import { useUserProfile } from '../../../hooks/useUserProfile';
+import { useUserProfile, useUserProfileRequest } from '../../../hooks/useUserProfile';
 import { Modal500 } from '../../../components/Modal500';
 import { useClient } from '../../../hooks/useClient';
 import { mxcToHttp } from '../../../../client/mxcToHttp';
@@ -32,6 +32,7 @@ import { stopPropagation } from '../../../utils/keyboard';
 import { useSession, useSessions } from '../../../hooks/useSessions';
 import { sessionUserIdAtom } from '../../../state/sessions';
 import { Session } from '../../../../client/sessions';
+import { getAuthJSONRequest } from '../../../../client/request';
 
 type AccountTileProps = {
   session: Session;
@@ -44,7 +45,11 @@ function AccountTile({ session }: AccountTileProps) {
 
   const setSessionUserId = useSetAtom(sessionUserIdAtom);
 
-  const profile = useUserProfile(userId);
+  const request = useMemo(
+    () => getAuthJSONRequest(session.baseUrl, session.accessToken),
+    [session]
+  );
+  const profile = useUserProfileRequest(userId, request);
 
   const username = getMxIdLocalPart(userId) ?? userId;
   const server = getMxIdServer(userId) ?? userId;
diff --git a/src/sw.ts b/src/sw.ts
index 4eb0c63e..d214c077 100644
--- a/src/sw.ts
+++ b/src/sw.ts
@@ -16,7 +16,7 @@ const getRequestId = () => {
 
 const pendingSessionRequests = new Map<number, (sessionInfo: SessionInfo | undefined) => void>();
 
-async function requestSession(clientId: string): Promise<SessionInfo | undefined> {
+async function requestSession(clientId: string, origin: string): Promise<SessionInfo | undefined> {
   const client = await self.clients.get(clientId);
   if (!client) return undefined;
 
@@ -24,7 +24,7 @@ async function requestSession(clientId: string): Promise<SessionInfo | undefined
 
   const sessionPromise = new Promise<SessionInfo | undefined>((resolve) => {
     pendingSessionRequests.set(id, resolve);
-    client.postMessage({ type: 'session-request', id });
+    client.postMessage({ type: 'session-request', id, origin });
   });
 
   const timeout = new Promise<undefined>((resolve) => {
@@ -101,7 +101,7 @@ self.addEventListener('fetch', (event: FetchEvent) => {
   if (!clientId) return;
 
   event.respondWith(
-    requestSession(clientId).then((s) => {
+    requestSession(clientId, new URL(url).origin).then((s) => {
       if (s && validMediaRequest(url, s.baseUrl)) {
         return fetch(url, fetchConfig(s.accessToken));
       }

From 15638851ddf3c06c2e44f6bdfe828698c06fb8f3 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 23 Aug 2026 07:53:49 +0530
Subject: [PATCH 103/158] always pick the latest read receipt between events

---
 src/client/syncWriter/utils.ts | 108 ++++++++++++++++-----------------
 1 file changed, 52 insertions(+), 56 deletions(-)

diff --git a/src/client/syncWriter/utils.ts b/src/client/syncWriter/utils.ts
index 37014a9f..72e7110b 100644
--- a/src/client/syncWriter/utils.ts
+++ b/src/client/syncWriter/utils.ts
@@ -190,7 +190,6 @@ export const writeJoinRoomLatestEvent = async (
 
   await ct.storage.joinRoomLatestEvent.write.putMultiple(roomLatestEventObjects);
 };
-
 export const writeReadReceipt = async (
   ct: ClientContext,
   joinRooms: string[],
@@ -202,16 +201,65 @@ export const writeReadReceipt = async (
 
     if (!event) return [];
 
-    const objects: ReadReceiptObject[] = [];
+    type LatestReceipt = {
+      eventId: string;
+      userId: string;
+      receiptType: ReceiptType;
+      receipt: Receipt;
+    };
 
-    const collectReceipt = (
+    // One latest receipt per user + thread.
+    const latestReceipts = new Map<string, LatestReceipt>();
+
+    const collectLatestReceipt = (
       eventId: string,
       userId: string,
       receiptType: ReceiptType,
       receipt: Receipt
     ) => {
       const threadId = receipt.thread_id ?? ThreadId.Main;
-      const obj: ReadReceiptObject = {
+      const key = `${userId}:${threadId}`;
+      const existing = latestReceipts.get(key);
+
+      const receiptTs = receipt.ts ?? 0;
+      const existingTs = existing?.receipt.ts ?? 0;
+
+      if (!existing || receiptTs > existingTs) {
+        latestReceipts.set(key, {
+          eventId,
+          userId,
+          receiptType,
+          receipt,
+        });
+      }
+    };
+
+    Object.keys(event.content).forEach((eventId) => {
+      const receiptContent = event.content[eventId];
+
+      // Collect public receipts.
+      const userToPublic = receiptContent['m.read'];
+
+      if (userToPublic) {
+        Object.keys(userToPublic).forEach((userId) => {
+          collectLatestReceipt(eventId, userId, 'm.read', userToPublic[userId]);
+        });
+      }
+
+      // Collect private receipts.
+      const userToPrivate = receiptContent['m.read.private'];
+
+      if (userToPrivate) {
+        Object.keys(userToPrivate).forEach((userId) => {
+          collectLatestReceipt(eventId, userId, 'm.read.private', userToPrivate[userId]);
+        });
+      }
+    });
+
+    return Array.from(latestReceipts.values()).map(({ eventId, userId, receiptType, receipt }) => {
+      const threadId = receipt.thread_id ?? ThreadId.Main;
+
+      return {
         id: getReadReceiptId(roomId, userId, threadId),
         roomId,
         userId,
@@ -220,59 +268,7 @@ export const writeReadReceipt = async (
         ts: receipt.ts ?? 0,
         threadId,
       };
-      objects.push(obj);
-    };
-
-    const threadIdToMyPrivateReceipt: Record<
-      string,
-      {
-        eventId: string;
-        receipt: Receipt;
-      }
-    > = {};
-
-    const eventIds = Object.keys(event.content);
-    eventIds.forEach((eventId) => {
-      const receiptContent = event.content[eventId];
-      const userToPrivate = receiptContent['m.read.private'];
-      const receipt = userToPrivate?.[ct.session.userId];
-      if (!receipt) return;
-      const threadId = receipt.thread_id ?? ThreadId.Main;
-      const existing = threadIdToMyPrivateReceipt[threadId];
-      if (!existing || (receipt.ts ?? 0) > (existing.receipt.ts ?? 0)) {
-        threadIdToMyPrivateReceipt[threadId] = { eventId, receipt };
-      }
     });
-    eventIds.forEach((eventId) => {
-      const receiptContent = event.content[eventId];
-      const userToPublic = receiptContent['m.read'];
-
-      if (userToPublic) {
-        Object.keys(userToPublic).forEach((userId) => {
-          const receipt = userToPublic[userId];
-          if (userId === ct.session.userId) {
-            // use latest receipt between private/public
-            const threadId = receipt.thread_id ?? ThreadId.Main;
-            const privateReceipt =
-              threadId in threadIdToMyPrivateReceipt
-                ? threadIdToMyPrivateReceipt[threadId]
-                : undefined;
-            if (privateReceipt && (privateReceipt.receipt.ts ?? 0) >= (receipt.ts ?? 0)) {
-              collectReceipt(
-                privateReceipt.eventId,
-                userId,
-                'm.read.private',
-                privateReceipt.receipt
-              );
-              return;
-            }
-          }
-          collectReceipt(eventId, userId, 'm.read', receipt);
-        });
-      }
-    });
-
-    return objects;
   });
 
   await ct.storage.readReceipt.write.putMultiple(readReceiptObjects);

From f1267d23388fff9b54e8e47a2925d75e80d0e2be Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 23 Aug 2026 14:36:42 +0530
Subject: [PATCH 104/158] pass decrypted reply event type to content renderer

---
 src/app/components/message/Reply.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index a568fc54..e1b6fd26 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -207,7 +207,7 @@ export function Reply({
             {(contentEvent) => (
               <RenderReplyContent
                 displayName={getMemberName(event.sender)}
-                eventType={event.type}
+                eventType={contentEvent.type}
                 edited={!!editedEvent}
                 content={rContent.newContent(contentEvent.content) ?? contentEvent.content}
                 htmlReactParserOptions={htmlReactParserOptions}

From fcb3577cf622a4b72dde1f438a02c58aa732ad00 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 23 Aug 2026 17:56:53 +0530
Subject: [PATCH 105/158] fix infinite re-renders with malformed encrypted
 event

---
 src/app/components/encrypted-event/EncryptedEvent.tsx | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/app/components/encrypted-event/EncryptedEvent.tsx b/src/app/components/encrypted-event/EncryptedEvent.tsx
index 9c160aeb..fea75c10 100644
--- a/src/app/components/encrypted-event/EncryptedEvent.tsx
+++ b/src/app/components/encrypted-event/EncryptedEvent.tsx
@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, useMemo } from 'react';
 import { as, Box, color, config, Icon, Icons, Text } from 'folds';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import {
@@ -53,7 +53,13 @@ export function EncryptedMessageEvent({
   reply,
   children,
 }: EncryptedMessageEventProps) {
-  const encryptedEvent = decryptionManager.decryptableMessageEvent(roomId, event);
+  // Memoize the result because it can return new EncryptedEvent
+  // on every call if event content is missing sessionId.
+  // It can cause infinite re-renders in pair with `decryption`
+  const encryptedEvent = useMemo(
+    () => decryptionManager.decryptableMessageEvent(roomId, event),
+    [roomId, event, decryptionManager]
+  );
   if (encryptedEvent.decryption.read instanceof EventDecryptionIdle) {
     encryptedEvent.decrypt();
   }

From 73c4caf2e18c8ca1d74eeb83da2acf755cad4a45 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 23 Aug 2026 18:39:30 +0530
Subject: [PATCH 106/158] fix encrypted video not rendering

---
 src/app/components/message/MsgTypeRenderers.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index a1654ecb..e9ebe841 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -311,7 +311,7 @@ type MVideoProps = {
 };
 export function MVideo({ content, mediaAutoLoad, outlined }: MVideoProps) {
   const videoInfo = rContent.info(content);
-  const mxcUrl = rEncryptedFile.url(rContent.file) ?? rContent.url(content);
+  const mxcUrl = rEncryptedFile.url(rContent.file(content)) ?? rContent.url(content);
   const safeMimeType = getBlobSafeMimeType(rInfo.mimetype(videoInfo) ?? '');
 
   if (!videoInfo || !safeMimeType.startsWith('video') || typeof mxcUrl !== 'string') {

From c727f76466c757c901547452414f893f9524cf8d Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 23 Aug 2026 22:48:26 +0530
Subject: [PATCH 107/158] fix tombstone space not opening new space

---
 src/app/hooks/router/useSelectedSpace.ts | 5 +----
 src/client/context.ts                    | 6 ++++++
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/app/hooks/router/useSelectedSpace.ts b/src/app/hooks/router/useSelectedSpace.ts
index d140525f..85e09b21 100644
--- a/src/app/hooks/router/useSelectedSpace.ts
+++ b/src/app/hooks/router/useSelectedSpace.ts
@@ -13,10 +13,7 @@ export const useSelectedSpace = (): string | undefined => {
   if (!spaceIdOrAlias) return undefined;
 
   const spaceId = isRoomAlias(spaceIdOrAlias)
-    ? ct.rooms.join.read.find(
-        (roomId) =>
-          roomToAlias.get(roomId) === spaceIdOrAlias && !ct.roomToReplacement.read.has(roomId)
-      )
+    ? ct.rooms.join.read.find((roomId) => roomToAlias.get(roomId) === spaceIdOrAlias)
     : spaceIdOrAlias;
 
   return spaceId;
diff --git a/src/client/context.ts b/src/client/context.ts
index 7d043cb6..791d3191 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -618,6 +618,11 @@ export const createRoomToAliasObservable = (
       const roomToAlias = new Map<string, string>();
 
       const addAlias = (obj: RoomStateObject) => {
+        if (state.join.tombstone.read.some((ev) => ev.roomId === obj.roomId)) {
+          // skip tombstone rooms to prevent multiple rooms having same alias.
+          // duplicate aliases cause problem finding correct roomId from alias.
+          return;
+        }
         const { content, state_key: stateKey } = obj.event;
         if (
           stateKey === '' &&
@@ -640,6 +645,7 @@ export const createRoomToAliasObservable = (
       state.invite.canonicalAlias,
       state.knock.canonicalAlias,
       state.leave.canonicalAlias,
+      state.join.tombstone,
     ]);
 
   disposer.collect(roomToAliasObservable);

From 8ef2ecb4194a3aea10020ceba0afca201640828c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 25 Aug 2026 11:25:30 +0530
Subject: [PATCH 108/158] move notifications to new sdk

---
 src/app/hooks/useRoomMembers.ts              |  49 +-
 src/app/pages/client/inbox/Notifications.tsx | 726 +++++++++----------
 src/app/utils/room.ts                        |   4 +-
 3 files changed, 396 insertions(+), 383 deletions(-)

diff --git a/src/app/hooks/useRoomMembers.ts b/src/app/hooks/useRoomMembers.ts
index e7532dd5..6574016f 100644
--- a/src/app/hooks/useRoomMembers.ts
+++ b/src/app/hooks/useRoomMembers.ts
@@ -3,7 +3,7 @@ import { PendingObservableResult } from 'neurone/lib/utils/observable';
 import { RoomMembership } from 'neurone/lib/api/types';
 import { useClient } from './useClient';
 import { useObservableValuePromise } from './useObservableValue';
-import { JoinRoomMemberObject } from '../../client/storage/collections';
+import { getJoinRoomMemberId, JoinRoomMemberObject } from '../../client/storage/collections';
 import { getMxIdLocalPart } from '../utils/matrix';
 import {
   roomMemberContentAvatarUrl,
@@ -23,14 +23,9 @@ export type RoomMembersAPI = {
   memberEventsResult: PendingObservableResult<JoinRoomMemberObject[]>;
 };
 
-export const useCreateRoomMembersAPI = (roomId: string): RoomMembersAPI => {
-  const ct = useClient();
-  const memberEventsPromise = useMemo(
-    () => ct.storage.joinRoomMember.observableRead.queryIndex('roomId', roomId),
-    [ct, roomId]
-  );
-
-  const memberEventsResult = useObservableValuePromise(memberEventsPromise);
+const useMemberEvents = (
+  memberEventsResult: PendingObservableResult<JoinRoomMemberObject[]>
+): RoomMembersAPI => {
   const memberEvents = memberEventsResult.value;
 
   const userIdToMemberEvent = useMemo(() => {
@@ -92,6 +87,18 @@ export const useCreateRoomMembersAPI = (roomId: string): RoomMembersAPI => {
   return api;
 };
 
+export const useCreateRoomMembersAPI = (roomId: string): RoomMembersAPI => {
+  const ct = useClient();
+  const memberEventsPromise = useMemo(
+    () => ct.storage.joinRoomMember.observableRead.queryIndex('roomId', roomId),
+    [ct, roomId]
+  );
+
+  const memberEventsResult = useObservableValuePromise(memberEventsPromise);
+
+  return useMemberEvents(memberEventsResult);
+};
+
 const RoomMembersAPIContext = createContext<RoomMembersAPI | null>(null);
 export const RoomMembersAPIProvider = RoomMembersAPIContext.Provider;
 
@@ -103,3 +110,27 @@ export const useRoomMembersAPI = (): RoomMembersAPI => {
 
   return api;
 };
+
+export const useRoomMembers = (roomId: string, users: string[]) => {
+  const ct = useClient();
+  const memberEventsPromise = useMemo(
+    () =>
+      ct.storage.joinRoomMember.observableRead.getMultiple(
+        users.map((userId) => getJoinRoomMemberId(roomId, userId))
+      ),
+    [ct, roomId, users]
+  );
+
+  const memberEventsResult = useObservableValuePromise(memberEventsPromise);
+
+  const memberEvents = useMemo(() => {
+    if (memberEventsResult.value) {
+      return {
+        value: memberEventsResult.value.filter((i) => i !== undefined),
+      };
+    }
+    return memberEventsResult;
+  }, [memberEventsResult]);
+
+  return useMemberEvents(memberEvents);
+};
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index c870bb89..ef4d19e6 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -1,5 +1,13 @@
 /* eslint-disable react/destructuring-assignment */
-import React, { MouseEventHandler, useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, {
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
 import {
   Avatar,
   Box,
@@ -14,75 +22,50 @@ import {
   toRem,
 } from 'folds';
 import { useSearchParams } from 'react-router-dom';
-import {
-  INotification,
-  INotificationsResponse,
-  IRoomEvent,
-  JoinRule,
-  Method,
-  RelationType,
-  Room,
-} from 'matrix-js-sdk';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { HTMLReactParserOptions } from 'html-react-parser';
-import { Opts as LinkifyOpts } from 'linkifyjs';
 import { useAtomValue } from 'jotai';
+import {
+  getNotifications,
+  GetNotificationsOK,
+} from 'neurone/lib/api/matrix/client/v3/notifications';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { NotificationChunk } from 'neurone/lib/api/types';
 import { Page, PageContent, PageContentCenter, PageHeader } from '../../../components/page';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
 import { InboxNotificationsPathSearchParams } from '../../paths';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { SequenceCard } from '../../../components/sequence-card';
 import { RoomAvatar, RoomIcon } from '../../../components/room-avatar';
-import {
-  getEditedEvent,
-  getMemberAvatarMxc,
-  getMemberDisplayName,
-  getRoomAvatarUrl,
-} from '../../../utils/room';
 import { ScrollTopContainer } from '../../../components/scroll-top-container';
 import { useInterval } from '../../../hooks/useInterval';
 import {
   AvatarBase,
-  ImageContent,
-  MSticker,
-  MessageNotDecryptedContent,
-  MessageUnsupportedContent,
   ModernLayout,
   RedactedContent,
-  Reply,
   Time,
   Username,
   UsernameBold,
 } from '../../../components/message';
-import {
-  factoryRenderLinkifyWithMention,
-  getReactCustomHtmlParser,
-  LINKIFY_OPTS,
-  makeMentionCustomProps,
-  renderMatrixMention,
-} from '../../../plugins/react-custom-html-parser';
-import { RenderMessageContent } from '../../../components/RenderMessageContent';
-import { useSetting } from '../../../state/hooks/settings';
-import { Image } from '../../../components/media';
-import { ImageViewer } from '../../../components/image-viewer';
-import { GetContentCallback, MessageEvent, StateEvent } from '../../../../types/matrix/room';
-import { useMatrixEventRenderer } from '../../../hooks/useMatrixEventRenderer';
-import * as customHtmlCss from '../../../styles/CustomHtml.css';
+import { useSettings } from '../../../state/hooks/settings';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
-import { markAsRead } from '../../../utils/notifications';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
 import { VirtualTile } from '../../../components/virtualizer';
 import { UserAvatar } from '../../../components/user-avatar';
-import { EncryptedContent } from '../../../features/room/message';
-import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
-import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
-import { usePowerLevels } from '../../../hooks/usePowerLevels';
-import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import {
+  PowerLevelsContextProvider,
+  usePowerLevels,
+  usePowerLevelsContext,
+  usePowerLevelsState,
+} from '../../../hooks/usePowerLevels';
+import {
+  PowerLevelTagsContextProvider,
+  usePowerLevelTags,
+  usePowerLevelTagsContext,
+  usePowerLevelTagsState,
+} from '../../../hooks/usePowerLevelTags';
 import { useTheme } from '../../../hooks/useTheme';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
@@ -94,10 +77,33 @@ import {
 } from '../../../hooks/useMemberPowerTag';
 import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
+import { useClient } from '../../../hooks/useClient';
+import {
+  RoomMembersAPIProvider,
+  useRoomMembers,
+  useRoomMembersAPI,
+} from '../../../hooks/useRoomMembers';
+import { useMessageParserOptions } from '../../../hooks/useMessageParserOptions';
+import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
+import { GetRoomNameCallback, useGetRoomName } from '../../../hooks/storage/useGetRoomName';
+import { GetRoomAvatarCallback, useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { useRoomUnread } from '../../../state/hooks/unread';
+import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
+import { ErrorCode } from '../../../cs-errorcode';
+import {
+  useObservableValue,
+  useObservableValueOptionally,
+} from '../../../hooks/useObservableValue';
+import { Timeline } from '../../../../client/room';
+import { MessageContent } from '../../../components/MessageContent';
+import { getLatestEditEvent } from '../../../utils/room';
+import { RenderMessageContent } from '../../../components/RenderMessageContent';
+import { rContent } from '../../../../client/reader';
 
 type RoomNotificationsGroup = {
   roomId: string;
-  notifications: INotification[];
+  notifications: NotificationChunk[];
 };
 type NotificationTimeline = {
   nextToken?: string;
@@ -107,7 +113,7 @@ type LoadTimeline = (from?: string) => Promise<void>;
 type SilentReloadTimeline = () => Promise<void>;
 
 const groupNotifications = (
-  notifications: INotification[],
+  notifications: NotificationChunk[],
   allowRooms: Set<string>
 ): RoomNotificationsGroup[] => {
   const groups: RoomNotificationsGroup[] = [];
@@ -132,7 +138,7 @@ const useNotificationTimeline = (
   paginationLimit: number,
   onlyHighlight?: boolean
 ): [NotificationTimeline, LoadTimeline, SilentReloadTimeline] => {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const allRooms = useAtomValue(allRoomsAtom);
   const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
 
@@ -141,15 +147,21 @@ const useNotificationTimeline = (
   });
 
   const fetchNotifications = useCallback(
-    (from?: string, limit?: number, only?: 'highlight') => {
-      const queryParams = { from, limit, only };
-      return mx.http.authedRequest<INotificationsResponse>(
-        Method.Get,
-        '/notifications',
-        queryParams
+    async (from?: string, limit?: number, only?: 'highlight') => {
+      const resp = await ct.requestAuthJSON(
+        getNotifications({ searchParams: { from, limit, only } })
       );
+      const [err, result] = await parseMatrixResp<GetNotificationsOK>(resp);
+      if (err) {
+        if (err.data.errcode === ErrorCode.M_UNRECOGNIZED) {
+          throw new Error('This feature is not supported by your homeserver!');
+        }
+        throw new Error(err.data.error ?? err.data.errcode);
+      }
+
+      return result;
     },
-    [mx]
+    [ct]
   );
 
   const loadTimeline: LoadTimeline = useCallback(
@@ -178,8 +190,12 @@ const useNotificationTimeline = (
   );
 
   /**
-   * Reload timeline silently i.e without setting to default
-   * before fetching notifications from start
+   * Reload timeline silently i.e without resetting to default.
+   * Fetches the first page and diffs it against current state:
+   * - if nothing new, keeps the existing state reference untouched
+   * - if there are new notifications, only prepends them to the top
+   *   (merging into the first existing group when it's the same room)
+   *   instead of re-fetching/rebuilding the whole timeline.
    */
   const silentReloadTimeline: SilentReloadTimeline = useCallback(async () => {
     const data = await fetchNotifications(
@@ -187,221 +203,256 @@ const useNotificationTimeline = (
       paginationLimit,
       onlyHighlight ? 'highlight' : undefined
     );
-    const groups = groupNotifications(data.notifications, allJoinedRooms);
-    setNotificationTimeline({
-      nextToken: data.next_token,
-      groups,
+
+    setNotificationTimeline((currentTimeline) => {
+      // Nothing loaded yet, just seed the state normally.
+      if (currentTimeline.groups.length === 0) {
+        return {
+          nextToken: data.next_token,
+          groups: groupNotifications(data.notifications, allJoinedRooms),
+        };
+      }
+
+      const existingIds = new Set<string>();
+      currentTimeline.groups.forEach((group) => {
+        group.notifications.forEach((n) => existingIds.add(n.event.event_id));
+      });
+
+      const newNotifications = data.notifications.filter((n) => !existingIds.has(n.event.event_id));
+
+      // Nothing changed — return the same reference so consumers relying
+      // on identity (e.g. memoized lists) don't needlessly re-render.
+      if (newNotifications.length === 0) {
+        return currentTimeline;
+      }
+
+      const newGroups = groupNotifications(newNotifications, allJoinedRooms);
+
+      const lastNewGroup = newGroups[newGroups.length - 1];
+      const firstExistingGroup = currentTimeline.groups[0];
+
+      // Merge into the existing first group if it's the same room, so we
+      // don't end up with two adjacent groups for the same room.
+      if (lastNewGroup && firstExistingGroup?.roomId === lastNewGroup.roomId) {
+        const mergedGroup: RoomNotificationsGroup = {
+          roomId: firstExistingGroup.roomId,
+          notifications: [...lastNewGroup.notifications, ...firstExistingGroup.notifications],
+        };
+        return {
+          nextToken: currentTimeline.nextToken,
+          groups: [...newGroups.slice(0, -1), mergedGroup, ...currentTimeline.groups.slice(1)],
+        };
+      }
+
+      return {
+        nextToken: currentTimeline.nextToken,
+        groups: [...newGroups, ...currentTimeline.groups],
+      };
     });
   }, [paginationLimit, onlyHighlight, fetchNotifications, allJoinedRooms]);
 
   return [notificationTimeline, loadTimeline, silentReloadTimeline];
 };
 
-type RoomNotificationsGroupProps = {
-  room: Room;
-  notifications: INotification[];
+type RoomNotificationsProps = {
+  roomId: string;
+  timeline?: Timeline;
+  notifications: NotificationChunk[];
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
-  hideActivity: boolean;
-  onOpen: (roomId: string, eventId: string) => void;
   legacyUsernameColor?: boolean;
   hour24Clock: boolean;
   dateFormatString: string;
+  getRoomName: GetRoomNameCallback;
+  onOpen: (roomId: string, eventId: string) => void;
 };
-function RoomNotificationsGroupComp({
-  room,
+function RoomNotifications({
+  roomId,
+  timeline,
   notifications,
   mediaAutoLoad,
   urlPreview,
-  hideActivity,
-  onOpen,
   legacyUsernameColor,
   hour24Clock,
   dateFormatString,
-}: RoomNotificationsGroupProps) {
-  const mx = useMatrixClient();
+  getRoomName,
+  onOpen,
+}: RoomNotificationsProps) {
+  const ct = useClient();
+  const membersAPI = useRoomMembersAPI();
   const useAuthentication = useMediaAuthentication();
-  // const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
 
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
+  const redacted = useObservableValueOptionally(timeline?.relations.redacted);
+  const edits = useObservableValueOptionally(timeline?.relations.edits.eventToRelations);
 
+  const creators = useRoomCreators(roomId);
+  const powerLevels = usePowerLevelsContext();
+  const getMemberPowerTag = useGetMemberPowerTag(creators, powerLevels);
   const creatorsTag = useRoomCreatorsTag();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const powerLevelTags = usePowerLevelTagsContext();
 
   const theme = useTheme();
   const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);
 
-  const mentionClickHandler = useMentionClickHandler(room.roomId);
-  const spoilerClickHandler = useSpoilerClickHandler();
-
-  const linkifyOpts = useMemo<LinkifyOpts>(
-    () => ({
-      ...LINKIFY_OPTS,
-      render: factoryRenderLinkifyWithMention((href) =>
-        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
-      ),
-    }),
-    [mx, room, mentionClickHandler]
-  );
-  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
-    () =>
-      getReactCustomHtmlParser(mx, room.roomId, {
-        linkifyOpts,
-        useAuthentication,
-        handleSpoilerClick: spoilerClickHandler,
-        handleMentionClick: mentionClickHandler,
-      }),
-    [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
-  );
-
-  const renderMatrixEvent = useMatrixEventRenderer<[IRoomEvent, string, GetContentCallback]>(
-    {
-      [MessageEvent.RoomMessage]: (event, displayName, getContent) => {
-        if (event.unsigned?.redacted_because) {
-          return <RedactedContent reason={event.unsigned?.redacted_because.content.reason} />;
-        }
-
-        return (
-          <RenderMessageContent
-            displayName={displayName}
-            msgType={event.content.msgtype ?? ''}
-            ts={event.origin_server_ts}
-            getContent={getContent}
-            mediaAutoLoad={mediaAutoLoad}
-            urlPreview={urlPreview}
-            htmlReactParserOptions={htmlReactParserOptions}
-            linkifyOpts={linkifyOpts}
-            outlineAttachment
-          />
-        );
-      },
-      [MessageEvent.RoomMessageEncrypted]: (evt, displayName) => {
-        const evtTimeline = room.getTimelineForEvent(evt.event_id);
-
-        const mEvent = evtTimeline?.getEvents().find((e) => e.getId() === evt.event_id);
-
-        if (!mEvent || !evtTimeline) {
-          return (
-            <Box grow="Yes" direction="Column">
-              <Text size="T400" priority="300">
-                <code className={customHtmlCss.Code}>{evt.type}</code>
-                {' event'}
-              </Text>
-            </Box>
-          );
-        }
-
-        return (
-          <EncryptedContent mEvent={mEvent}>
-            {() => {
-              if (mEvent.isRedacted()) return <RedactedContent />;
-              if (mEvent.getType() === MessageEvent.Sticker)
-                return (
-                  <MSticker
-                    content={mEvent.getContent()}
-                    renderImageContent={(props) => (
-                      <ImageContent
-                        {...props}
-                        autoPlay={mediaAutoLoad}
-                        renderImage={(p) => <Image {...p} loading="lazy" />}
-                        renderViewer={(p) => <ImageViewer {...p} />}
-                      />
-                    )}
-                  />
-                );
-              if (mEvent.getType() === MessageEvent.RoomMessage) {
-                const editedEvent = getEditedEvent(
-                  evt.event_id,
-                  mEvent,
-                  evtTimeline.getTimelineSet()
-                );
-                const getContent = (() =>
-                  editedEvent?.getContent()['m.new_content'] ??
-                  mEvent.getContent()) as GetContentCallback;
-
-                return (
-                  <RenderMessageContent
-                    displayName={displayName}
-                    msgType={mEvent.getContent().msgtype ?? ''}
-                    ts={mEvent.getTs()}
-                    edited={!!editedEvent}
-                    getContent={getContent}
-                    mediaAutoLoad={mediaAutoLoad}
-                    urlPreview={urlPreview}
-                    htmlReactParserOptions={htmlReactParserOptions}
-                    linkifyOpts={linkifyOpts}
-                  />
-                );
-              }
-              if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
-                return (
-                  <Text>
-                    <MessageNotDecryptedContent />
-                  </Text>
-                );
-              return (
-                <Text>
-                  <MessageUnsupportedContent />
-                </Text>
-              );
-            }}
-          </EncryptedContent>
-        );
-      },
-      [MessageEvent.Sticker]: (event, displayName, getContent) => {
-        if (event.unsigned?.redacted_because) {
-          return <RedactedContent reason={event.unsigned?.redacted_because.content.reason} />;
-        }
-        return (
-          <MSticker
-            content={getContent()}
-            renderImageContent={(props) => (
-              <ImageContent
-                {...props}
-                autoPlay={mediaAutoLoad}
-                renderImage={(p) => <Image {...p} loading="lazy" />}
-                renderViewer={(p) => <ImageViewer {...p} />}
-              />
-            )}
-          />
-        );
-      },
-      [StateEvent.RoomTombstone]: (event) => {
-        const { content } = event;
-        return (
-          <Box grow="Yes" direction="Column">
-            <Text size="T400" priority="300">
-              Room Tombstone. {content.body}
-            </Text>
-          </Box>
-        );
-      },
-    },
-    undefined,
-    (event) => {
-      if (event.unsigned?.redacted_because) {
-        return <RedactedContent reason={event.unsigned?.redacted_because.content.reason} />;
-      }
-      return (
-        <Box grow="Yes" direction="Column">
-          <Text size="T400" priority="300">
-            <code className={customHtmlCss.Code}>{event.type}</code>
-            {' event'}
-          </Text>
-        </Box>
-      );
-    }
+  const { linkifyOpts, htmlReactParserOptions } = useMessageParserOptions(
+    roomId,
+    getRoomName,
+    membersAPI.getName
   );
 
   const handleOpenClick: MouseEventHandler = (evt) => {
     const eventId = evt.currentTarget.getAttribute('data-event-id');
     if (!eventId) return;
-    onOpen(room.roomId, eventId);
+    onOpen(roomId, eventId);
   };
+
+  return (
+    <Box direction="Column" gap="100">
+      {notifications.map((notification) => {
+        const { event } = notification;
+
+        const displayName = membersAPI.getName(event.sender);
+
+        const senderAvatarMxc = membersAPI.getAvatar(event.sender);
+
+        const memberPowerTag = getMemberPowerTag(event.sender);
+        const tagColor = memberPowerTag?.color
+          ? accessibleTagColors?.get(memberPowerTag.color)
+          : undefined;
+        const tagIconSrc = memberPowerTag?.icon
+          ? getPowerTagIconSrc(ct, useAuthentication, memberPowerTag.icon)
+          : undefined;
+
+        const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
+
+        const editEvents = edits?.get(event.event_id);
+        const editedEvent = editEvents && getLatestEditEvent(event.sender, editEvents, redacted);
+
+        return (
+          <SequenceCard
+            key={notification.event.event_id}
+            style={{ padding: `${config.space.S300} ${config.space.S400}` }}
+            variant="SurfaceVariant"
+            direction="Column"
+          >
+            <ModernLayout
+              before={
+                <AvatarBase>
+                  <Avatar size="300">
+                    <UserAvatar
+                      userId={event.sender}
+                      src={
+                        senderAvatarMxc
+                          ? mxcToHttp(
+                              ct.session.baseUrl,
+                              senderAvatarMxc,
+                              useAuthentication
+                            ).thumbnail({ width: 96, height: 96, method: 'crop' })
+                          : undefined
+                      }
+                      alt={displayName}
+                      renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+                    />
+                  </Avatar>
+                </AvatarBase>
+              }
+            >
+              <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
+                <Box gap="200" alignItems="Baseline">
+                  <Box alignItems="Center" gap="200">
+                    <Username style={{ color: usernameColor }}>
+                      <Text as="span" truncate>
+                        <UsernameBold>{displayName}</UsernameBold>
+                      </Text>
+                    </Username>
+                    {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+                  </Box>
+                  <Time
+                    ts={event.origin_server_ts}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
+                  />
+                </Box>
+                <Box shrink="No" gap="200" alignItems="Center">
+                  <Chip
+                    data-event-id={event.event_id}
+                    onClick={handleOpenClick}
+                    variant="Secondary"
+                    radii="400"
+                  >
+                    <Text size="T200">Open</Text>
+                  </Chip>
+                </Box>
+              </Box>
+              {redacted?.has(event.event_id) ? (
+                <RedactedContent />
+              ) : (
+                <MessageContent
+                  event={event}
+                  editedEvent={editedEvent}
+                  roomId={roomId}
+                  decryptionManager={ct.decryption}
+                >
+                  {(contentEvent) => (
+                    <RenderMessageContent
+                      displayName={membersAPI.getName(event.sender)}
+                      eventType={contentEvent.type}
+                      ts={event.origin_server_ts}
+                      edited={!!editedEvent}
+                      content={rContent.newContent(contentEvent.content) ?? contentEvent.content}
+                      mediaAutoLoad={mediaAutoLoad}
+                      urlPreview={urlPreview}
+                      htmlReactParserOptions={htmlReactParserOptions}
+                      linkifyOpts={linkifyOpts}
+                    />
+                  )}
+                </MessageContent>
+              )}
+            </ModernLayout>
+          </SequenceCard>
+        );
+      })}
+    </Box>
+  );
+}
+
+type RoomNotificationsGroupProps = {
+  roomId: string;
+  notifications: NotificationChunk[];
+  getRoomName: GetRoomNameCallback;
+  getRoomAvatar: GetRoomAvatarCallback;
+  hideActivity: boolean;
+  children: ReactNode;
+};
+function RoomNotificationsGroupComp({
+  roomId,
+  notifications,
+  getRoomName,
+  getRoomAvatar,
+  hideActivity,
+  children,
+}: RoomNotificationsGroupProps) {
+  const ct = useClient();
+  const useAuthentication = useMediaAuthentication();
+  const unread = useRoomUnread(roomId, unreadRoomsAtom);
+
+  const users = useMemo(
+    () => Array.from(new Set(notifications.map((n) => n.event.sender))),
+    [notifications]
+  );
+
+  const avatarMxc = getRoomAvatar(roomId);
+
+  const powerLevelStateResult = usePowerLevelsState(roomId);
+  const powerLevels = usePowerLevels(powerLevelStateResult.value);
+
+  const powerLevelTagsStateResult = usePowerLevelTagsState(roomId);
+  const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsStateResult.value);
+
+  const membersAPI = useRoomMembers(roomId, users);
+
   const handleMarkAsRead = () => {
-    markAsRead(mx, room.roomId, hideActivity);
+    // markAsRead(mx, room.roomId, hideActivity);
   };
 
   return (
@@ -410,21 +461,29 @@ function RoomNotificationsGroupComp({
         <Box gap="200" grow="Yes">
           <Avatar size="200" radii="300">
             <RoomAvatar
-              roomId={room.roomId}
-              src={getRoomAvatarUrl(mx, room, 96, useAuthentication)}
-              alt={room.name}
+              roomId={roomId}
+              src={
+                avatarMxc
+                  ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+                      width: 48,
+                      height: 48,
+                      method: 'crop',
+                    })
+                  : undefined
+              }
+              alt={getRoomName(roomId)}
               renderFallback={() => (
                 <RoomIcon
                   size="50"
-                  roomType={room.getType()}
-                  joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                  roomType={ct.roomToType.read.get(roomId)}
+                  joinRule={ct.roomToJoinRule.read.get(roomId)}
                   filled
                 />
               )}
             />
           </Avatar>
           <Text size="H4" truncate>
-            {room.name}
+            {getRoomName(roomId) ?? 'Unknown'}
           </Text>
         </Box>
         <Box shrink="No">
@@ -440,108 +499,14 @@ function RoomNotificationsGroupComp({
           )}
         </Box>
       </Header>
-      <Box direction="Column" gap="100">
-        {notifications.map((notification) => {
-          const { event } = notification;
 
-          const displayName =
-            getMemberDisplayName(room, event.sender) ??
-            getMxIdLocalPart(event.sender) ??
-            event.sender;
-          const senderAvatarMxc = getMemberAvatarMxc(room, event.sender);
-          const getContent = (() => event.content) as GetContentCallback;
-
-          const relation = event.content['m.relates_to'];
-          const replyEventId = relation?.['m.in_reply_to']?.event_id;
-          const threadRootId =
-            relation?.rel_type === RelationType.Thread ? relation.event_id : undefined;
-
-          const memberPowerTag = getMemberPowerTag(event.sender);
-          const tagColor = memberPowerTag?.color
-            ? accessibleTagColors?.get(memberPowerTag.color)
-            : undefined;
-          const tagIconSrc = memberPowerTag?.icon
-            ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
-            : undefined;
-
-          const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
-
-          return (
-            <SequenceCard
-              key={notification.event.event_id}
-              style={{ padding: config.space.S400 }}
-              variant="SurfaceVariant"
-              direction="Column"
-            >
-              <ModernLayout
-                before={
-                  <AvatarBase>
-                    <Avatar size="300">
-                      <UserAvatar
-                        userId={event.sender}
-                        src={
-                          senderAvatarMxc
-                            ? mxcUrlToHttp(
-                                mx,
-                                senderAvatarMxc,
-                                useAuthentication,
-                                48,
-                                48,
-                                'crop'
-                              ) ?? undefined
-                            : undefined
-                        }
-                        alt={displayName}
-                        renderFallback={() => <Icon size="200" src={Icons.User} filled />}
-                      />
-                    </Avatar>
-                  </AvatarBase>
-                }
-              >
-                <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
-                  <Box gap="200" alignItems="Baseline">
-                    <Box alignItems="Center" gap="200">
-                      <Username style={{ color: usernameColor }}>
-                        <Text as="span" truncate>
-                          <UsernameBold>{displayName}</UsernameBold>
-                        </Text>
-                      </Username>
-                      {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
-                    </Box>
-                    <Time
-                      ts={event.origin_server_ts}
-                      hour24Clock={hour24Clock}
-                      dateFormatString={dateFormatString}
-                    />
-                  </Box>
-                  <Box shrink="No" gap="200" alignItems="Center">
-                    <Chip
-                      data-event-id={event.event_id}
-                      onClick={handleOpenClick}
-                      variant="Secondary"
-                      radii="400"
-                    >
-                      <Text size="T200">Open</Text>
-                    </Chip>
-                  </Box>
-                </Box>
-                {replyEventId && (
-                  <Reply
-                    room={room}
-                    replyEventId={replyEventId}
-                    threadRootId={threadRootId}
-                    onClick={handleOpenClick}
-                    getMemberPowerTag={getMemberPowerTag}
-                    accessibleTagColors={accessibleTagColors}
-                    legacyUsernameColor={legacyUsernameColor}
-                  />
-                )}
-                {renderMatrixEvent(event.type, false, event, displayName, getContent)}
-              </ModernLayout>
-            </SequenceCard>
-          );
-        })}
-      </Box>
+      <RoomMembersAPIProvider value={membersAPI}>
+        <PowerLevelsContextProvider value={powerLevels}>
+          <PowerLevelTagsContextProvider value={powerLevelTags}>
+            {children}
+          </PowerLevelTagsContextProvider>
+        </PowerLevelsContextProvider>
+      </RoomMembersAPIProvider>
     </Box>
   );
 }
@@ -559,13 +524,16 @@ const useNotificationsSearchParams = (
 const DEFAULT_REFRESH_MS = 7000;
 
 export function Notifications() {
-  const mx = useMatrixClient();
-  const [hideActivity] = useSetting('hideActivity');
-  const [mediaAutoLoad] = useSetting('mediaAutoLoad');
-  const [urlPreview] = useSetting('urlPreview');
-  const [legacyUsernameColor] = useSetting('legacyUsernameColor');
-  const [hour24Clock] = useSetting('hour24Clock');
-  const [dateFormatString] = useSetting('dateFormatString');
+  const ct = useClient();
+
+  const {
+    hideActivity,
+    mediaAutoLoad,
+    urlPreview,
+    legacyUsernameColor,
+    hour24Clock,
+    dateFormatString,
+  } = useSettings();
   const screenSize = useScreenSizeContext();
   const mDirects = useAtomValue(mDirectAtom);
 
@@ -579,11 +547,7 @@ export function Notifications() {
   const onlyHighlight = notificationsSearchParams.only === 'highlight';
   const setOnlyHighlighted = (highlight: boolean) => {
     if (highlight) {
-      setSearchParams(
-        new URLSearchParams({
-          only: 'highlight',
-        })
-      );
+      setSearchParams(new URLSearchParams({ only: 'highlight' }));
       return;
     }
     setSearchParams();
@@ -631,6 +595,16 @@ export function Notifications() {
     }
   }, [timelineState, notificationTimeline, lastVItemIndex, loadTimeline]);
 
+  const notificationRooms = useMemo(
+    () => Array.from(new Set(notificationTimeline.groups.map((g) => g.roomId))),
+    [notificationTimeline]
+  );
+
+  const roomToTimeline = useObservableValue(ct.roomToTimeline);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(notificationRooms);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
   return (
     <Page>
       <PageHeader balance>
@@ -710,8 +684,6 @@ export function Notifications() {
                   {vItems.map((vItem) => {
                     const group = notificationTimeline.groups[vItem.index];
                     if (!group) return null;
-                    const groupRoom = mx.getRoom(group.roomId);
-                    if (!groupRoom) return null;
 
                     return (
                       <VirtualTile
@@ -721,18 +693,25 @@ export function Notifications() {
                         key={vItem.index}
                       >
                         <RoomNotificationsGroupComp
-                          room={groupRoom}
+                          roomId={group.roomId}
                           notifications={group.notifications}
-                          mediaAutoLoad={mediaAutoLoad}
-                          urlPreview={urlPreview}
+                          getRoomName={getRoomName}
+                          getRoomAvatar={getRoomAvatar}
                           hideActivity={hideActivity}
-                          onOpen={navigateRoom}
-                          legacyUsernameColor={
-                            legacyUsernameColor || mDirects.has(groupRoom.roomId)
-                          }
-                          hour24Clock={hour24Clock}
-                          dateFormatString={dateFormatString}
-                        />
+                        >
+                          <RoomNotifications
+                            roomId={group.roomId}
+                            timeline={roomToTimeline.get(group.roomId)}
+                            notifications={group.notifications}
+                            mediaAutoLoad={mediaAutoLoad}
+                            urlPreview={urlPreview}
+                            onOpen={navigateRoom}
+                            legacyUsernameColor={legacyUsernameColor || mDirects.has(group.roomId)}
+                            hour24Clock={hour24Clock}
+                            dateFormatString={dateFormatString}
+                            getRoomName={getRoomName}
+                          />
+                        </RoomNotificationsGroupComp>
                       </VirtualTile>
                     );
                   })}
@@ -777,8 +756,11 @@ export function Notifications() {
                     direction="Column"
                     gap="200"
                   >
-                    <Text size="L400">{(timelineState.error as Error).name}</Text>
-                    <Text size="T300">{(timelineState.error as Error).message}</Text>
+                    <Text size="L400">
+                      {timelineState.error instanceof Error
+                        ? timelineState.error.message
+                        : 'Unknown Error'}
+                    </Text>
                   </Box>
                 )}
               </Box>
diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts
index 3a2ef6e1..158905dc 100644
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -463,11 +463,11 @@ export const getReactionGroups = (
 export const getLatestEditEvent = (
   sender: string,
   events: MessageEventWithoutRoomId[],
-  redacted: Set<string>
+  redacted: Set<string> | undefined
 ): MessageEventWithoutRoomId | undefined => {
   let event: MessageEventWithoutRoomId | undefined;
   events.forEach((e) => {
-    if (redacted.has(e.event_id) || sender !== e.sender) return;
+    if (redacted?.has(e.event_id) || sender !== e.sender) return;
     if (!event) {
       event = e;
       return;

From 7fa5ee9fc6567d8e8b4f3fa6ad5f92dc8228b9c3 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 25 Aug 2026 14:45:03 +0530
Subject: [PATCH 109/158] move search messages to new sdk

---
 src/app/components/RenderMessageContent.tsx   |   2 +-
 .../features/message-search/MessageSearch.tsx |  57 ++-
 .../features/message-search/SearchFilters.tsx |  90 ++--
 .../message-search/SearchResultGroup.tsx      | 469 ++++++++----------
 .../message-search/useMessageSearch.ts        |  70 +--
 src/app/hooks/useMessageParserOptions.ts      |   5 +-
 src/app/pages/Router.tsx                      |   4 +-
 src/app/pages/client/space/Search.tsx         |  16 +-
 8 files changed, 364 insertions(+), 349 deletions(-)

diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
index 3e93b213..c9ab38d2 100644
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -55,7 +55,7 @@ export function RenderMessageContent({
   }
 
   if (eventType !== MessageEvent.RoomMessage) {
-    return <UnsupportedContent />;
+    return <UnsupportedContent eventType={eventType} />;
   }
 
   const renderCaption = () => {
diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx
index 3bcf1eed..161c0d20 100644
--- a/src/app/features/message-search/MessageSearch.tsx
+++ b/src/app/features/message-search/MessageSearch.tsx
@@ -4,9 +4,8 @@ import { useAtomValue } from 'jotai';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useInfiniteQuery } from '@tanstack/react-query';
 import { useSearchParams } from 'react-router-dom';
-import { SearchOrderBy } from 'matrix-js-sdk';
+import { SearchEventOrder } from 'neurone/lib/api/types';
 import { PageHero, PageHeroEmpty, PageHeroSection } from '../../components/page';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { _SearchPathSearchParams } from '../../pages/paths';
 import { useSettings } from '../../state/hooks/settings';
 import { SequenceCard } from '../../components/sequence-card';
@@ -18,10 +17,15 @@ import { useRooms } from '../../state/hooks/roomList';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { mDirectAtom } from '../../state/mDirectList';
 import { MessageSearchParams, useMessageSearch } from './useMessageSearch';
-import { SearchResultGroup } from './SearchResultGroup';
+import { SearchGroupMessages, SearchResultGroup } from './SearchResultGroup';
 import { SearchInput } from './SearchInput';
 import { SearchFilters } from './SearchFilters';
 import { VirtualTile } from '../../components/virtualizer';
+import { useClient } from '../../hooks/useClient';
+import { useObservableValue } from '../../hooks/useObservableValue';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
 
 const useSearchPathSearchParams = (searchParams: URLSearchParams): _SearchPathSearchParams =>
   useMemo(
@@ -49,9 +53,9 @@ export function MessageSearch({
   senders,
   scrollRef,
 }: MessageSearchProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const mDirects = useAtomValue(mDirectAtom);
-  const allRooms = useRooms(mx, allRoomsAtom, mDirects);
+  const allRooms = useRooms(ct, allRoomsAtom, mDirects);
   const { mediaAutoLoad, urlPreview, legacyUsernameColor, hour24Clock, dateFormatString } =
     useSettings();
 
@@ -81,9 +85,11 @@ export function MessageSearch({
     const isGlobal = searchPathSearchParams.global === 'true';
     const defaultRooms = isGlobal ? undefined : rooms;
 
+    const { order } = searchPathSearchParams;
+
     return {
       term: searchPathSearchParams.term,
-      order: searchPathSearchParams.order ?? SearchOrderBy.Recent,
+      order: order && order === 'rank' ? 'rank' : 'recent',
       rooms: searchParamRooms ?? defaultRooms,
       senders: searchParamsSenders ?? senders,
     };
@@ -159,7 +165,7 @@ export function MessageSearch({
     });
   };
 
-  const handleOrderChange = (order?: string) => {
+  const handleOrderChange = (order?: SearchEventOrder) => {
     setSearchParams((prevParams) => {
       const newParams = new URLSearchParams(prevParams);
       newParams.delete('order');
@@ -184,6 +190,13 @@ export function MessageSearch({
     }
   }, [lastVItemIndex, lastGroupIndex, fetchNextPage, isFetchingNextPage, hasNextPage]);
 
+  const roomToTimeline = useObservableValue(ct.roomToTimeline);
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(
+    searchPathSearchParams.global === 'true' ? allRooms : rooms
+  );
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
   return (
     <Box direction="Column" gap="700">
       <ScrollTopContainer scrollRef={scrollRef} anchorRef={scrollTopAnchorRef}>
@@ -216,6 +229,7 @@ export function MessageSearch({
           onGlobalChange={handleGlobalChange}
           order={msgSearchParams.order}
           onOrderChange={handleOrderChange}
+          getRoomName={getRoomName}
         />
       </Box>
 
@@ -269,8 +283,6 @@ export function MessageSearch({
             {vItems.map((vItem) => {
               const group = groups[vItem.index];
               if (!group) return null;
-              const groupRoom = mx.getRoom(group.roomId);
-              if (!groupRoom) return null;
 
               return (
                 <VirtualTile
@@ -280,16 +292,25 @@ export function MessageSearch({
                   key={vItem.index}
                 >
                   <SearchResultGroup
-                    room={groupRoom}
-                    highlights={highlights}
+                    roomId={group.roomId}
                     items={group.items}
-                    mediaAutoLoad={mediaAutoLoad}
-                    urlPreview={urlPreview}
-                    onOpen={navigateRoom}
-                    legacyUsernameColor={legacyUsernameColor || mDirects.has(groupRoom.roomId)}
-                    hour24Clock={hour24Clock}
-                    dateFormatString={dateFormatString}
-                  />
+                    getRoomName={getRoomName}
+                    getRoomAvatar={getRoomAvatar}
+                  >
+                    <SearchGroupMessages
+                      roomId={group.roomId}
+                      timeline={roomToTimeline.get(group.roomId)}
+                      highlights={highlights}
+                      items={group.items}
+                      mediaAutoLoad={mediaAutoLoad}
+                      urlPreview={urlPreview}
+                      onOpen={navigateRoom}
+                      legacyUsernameColor={legacyUsernameColor || mDirects.has(group.roomId)}
+                      hour24Clock={hour24Clock}
+                      dateFormatString={dateFormatString}
+                      getRoomName={getRoomName}
+                    />
+                  </SearchResultGroup>
                 </VirtualTile>
               );
             })}
diff --git a/src/app/features/message-search/SearchFilters.tsx b/src/app/features/message-search/SearchFilters.tsx
index 6883e363..3618f170 100644
--- a/src/app/features/message-search/SearchFilters.tsx
+++ b/src/app/features/message-search/SearchFilters.tsx
@@ -25,11 +25,9 @@ import {
   Badge,
   RectCords,
 } from 'folds';
-import { SearchOrderBy } from 'matrix-js-sdk';
 import FocusTrap from 'focus-trap-react';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import { getRoomIconSrc } from '../../utils/room';
+import { SearchEventOrder } from 'neurone/lib/api/types';
 import { factoryRoomIdByAtoZ } from '../../utils/sort';
 import {
   SearchItemStrGetter,
@@ -39,16 +37,19 @@ import {
 import { DebounceOptions, useDebounce } from '../../hooks/useDebounce';
 import { VirtualTile } from '../../components/virtualizer';
 import { stopPropagation } from '../../utils/keyboard';
+import { GetRoomNameCallback } from '../../hooks/storage/useGetRoomName';
+import { useClient } from '../../hooks/useClient';
+import { RoomIcon } from '../../components/room-avatar';
 
 type OrderButtonProps = {
-  order?: string;
-  onChange: (order?: string) => void;
+  order?: SearchEventOrder;
+  onChange: (order?: SearchEventOrder) => void;
 };
 function OrderButton({ order, onChange }: OrderButtonProps) {
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
-  const rankOrder = order === SearchOrderBy.Rank;
+  const rankOrder = order === 'rank';
 
-  const setOrder = (o?: string) => {
+  const setOrder = (o?: SearchEventOrder) => {
     setMenuAnchor(undefined);
     onChange(o);
   };
@@ -86,7 +87,7 @@ function OrderButton({ order, onChange }: OrderButtonProps) {
                 <Text size="T300">Recent</Text>
               </MenuItem>
               <MenuItem
-                onClick={() => setOrder(SearchOrderBy.Rank)}
+                onClick={() => setOrder('rank')}
                 variant="Surface"
                 size="300"
                 radii="300"
@@ -125,16 +126,22 @@ type SelectRoomButtonProps = {
   roomList: string[];
   selectedRooms?: string[];
   onChange: (rooms?: string[]) => void;
+  getRoomName: GetRoomNameCallback;
 };
-function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButtonProps) {
-  const mx = useMatrixClient();
+function SelectRoomButton({
+  roomList,
+  selectedRooms,
+  onChange,
+  getRoomName,
+}: SelectRoomButtonProps) {
+  const ct = useClient();
   const scrollRef = useRef<HTMLDivElement>(null);
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const [localSelected, setLocalSelected] = useState(selectedRooms);
 
   const getRoomNameStr: SearchItemStrGetter<string> = useCallback(
-    (rId) => mx.getRoom(rId)?.name ?? rId,
-    [mx]
+    (rId) => getRoomName(rId) ?? 'Unknown',
+    [getRoomName]
   );
 
   const [searchResult, _searchRoom, resetSearch] = useAsyncSearch(
@@ -142,7 +149,7 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
     getRoomNameStr,
     SEARCH_OPTS
   );
-  const rooms = Array.from(searchResult?.items ?? roomList).sort(factoryRoomIdByAtoZ(mx));
+  const rooms = Array.from(searchResult?.items ?? roomList).sort(factoryRoomIdByAtoZ(getRoomName));
 
   const virtualizer = useVirtualizer({
     count: rooms.length,
@@ -253,8 +260,6 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                   >
                     {vItems.map((vItem) => {
                       const roomId = rooms[vItem.index];
-                      const room = mx.getRoom(roomId);
-                      if (!room) return null;
                       const selected = localSelected?.includes(roomId);
 
                       return (
@@ -272,14 +277,16 @@ function SelectRoomButton({ roomList, selectedRooms, onChange }: SelectRoomButto
                             radii="300"
                             aria-pressed={selected}
                             before={
-                              <Icon
+                              <RoomIcon
                                 size="50"
-                                src={getRoomIconSrc(Icons, room.getType(), room.getJoinRule())}
+                                roomType={ct.roomToType.read.get(roomId)}
+                                joinRule={ct.roomToJoinRule.read.get(roomId)}
+                                filled
                               />
                             }
                           >
                             <Text truncate size="T300">
-                              {room.name}
+                              {getRoomName(roomId) ?? 'Unknown'}
                             </Text>
                           </MenuItem>
                         </VirtualTile>
@@ -333,8 +340,9 @@ type SearchFiltersProps = {
   onSelectedRoomsChange: (selectedRooms?: string[]) => void;
   global?: boolean;
   onGlobalChange: (global?: boolean) => void;
-  order?: string;
-  onOrderChange: (order?: string) => void;
+  order?: SearchEventOrder;
+  onOrderChange: (order?: SearchEventOrder) => void;
+  getRoomName: GetRoomNameCallback;
 };
 export function SearchFilters({
   defaultRoomsFilterName,
@@ -346,8 +354,9 @@ export function SearchFilters({
   order,
   onGlobalChange,
   onOrderChange,
+  getRoomName,
 }: SearchFiltersProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
 
   return (
     <Box direction="Column" gap="100">
@@ -379,29 +388,30 @@ export function SearchFilters({
           variant="Surface"
           size="300"
         />
-        {selectedRooms?.map((roomId) => {
-          const room = mx.getRoom(roomId);
-          if (!room) return null;
-
-          return (
-            <Chip
-              key={roomId}
-              variant="Success"
-              onClick={() => onSelectedRoomsChange(selectedRooms.filter((rId) => rId !== roomId))}
-              radii="Pill"
-              before={
-                <Icon size="50" src={getRoomIconSrc(Icons, room.getType(), room.getJoinRule())} />
-              }
-              after={<Icon size="50" src={Icons.Cross} />}
-            >
-              <Text size="T200">{room.name}</Text>
-            </Chip>
-          );
-        })}
+        {selectedRooms?.map((roomId) => (
+          <Chip
+            key={roomId}
+            variant="Success"
+            onClick={() => onSelectedRoomsChange(selectedRooms.filter((rId) => rId !== roomId))}
+            radii="Pill"
+            before={
+              <RoomIcon
+                size="50"
+                roomType={ct.roomToType.read.get(roomId)}
+                joinRule={ct.roomToJoinRule.read.get(roomId)}
+                filled
+              />
+            }
+            after={<Icon size="50" src={Icons.Cross} />}
+          >
+            <Text size="T200">{getRoomName(roomId)}</Text>
+          </Chip>
+        ))}
         <SelectRoomButton
           roomList={roomList}
           selectedRooms={selectedRooms}
           onChange={onSelectedRoomsChange}
+          getRoomName={getRoomName}
         />
         <Box grow="Yes" data-spacing-node />
         <OrderButton order={order} onChange={onOrderChange} />
diff --git a/src/app/features/message-search/SearchResultGroup.tsx b/src/app/features/message-search/SearchResultGroup.tsx
index 14817cc4..025627bd 100644
--- a/src/app/features/message-search/SearchResultGroup.tsx
+++ b/src/app/features/message-search/SearchResultGroup.tsx
@@ -1,46 +1,34 @@
 /* eslint-disable react/destructuring-assignment */
-import React, { MouseEventHandler, useMemo } from 'react';
-import { IEventWithRoomId, JoinRule, RelationType, Room } from 'matrix-js-sdk';
-import { HTMLReactParserOptions } from 'html-react-parser';
+import React, { MouseEventHandler, ReactNode, useMemo } from 'react';
 import { Avatar, Box, Chip, Header, Icon, Icons, Text, config } from 'folds';
-import { Opts as LinkifyOpts } from 'linkifyjs';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
-import {
-  factoryRenderLinkifyWithMention,
-  getReactCustomHtmlParser,
-  LINKIFY_OPTS,
-  makeHighlightRegex,
-  makeMentionCustomProps,
-  renderMatrixMention,
-} from '../../plugins/react-custom-html-parser';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
-import { useMatrixEventRenderer } from '../../hooks/useMatrixEventRenderer';
-import { GetContentCallback, MessageEvent, StateEvent } from '../../../types/matrix/room';
+import { makeHighlightRegex } from '../../plugins/react-custom-html-parser';
 import {
   AvatarBase,
-  ImageContent,
-  MSticker,
   ModernLayout,
   RedactedContent,
-  Reply,
   Time,
   Username,
   UsernameBold,
 } from '../../components/message';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
-import { Image } from '../../components/media';
-import { ImageViewer } from '../../components/image-viewer';
-import * as customHtmlCss from '../../styles/CustomHtml.css';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
-import { getMemberAvatarMxc, getMemberDisplayName, getRoomAvatarUrl } from '../../utils/room';
+import { getLatestEditEvent } from '../../utils/room';
 import { ResultItem } from './useMessageSearch';
 import { SequenceCard } from '../../components/sequence-card';
 import { UserAvatar } from '../../components/user-avatar';
-import { useMentionClickHandler } from '../../hooks/useMentionClickHandler';
-import { useSpoilerClickHandler } from '../../hooks/useSpoilerClickHandler';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
-import { usePowerLevels } from '../../hooks/usePowerLevels';
-import { usePowerLevelTags } from '../../hooks/usePowerLevelTags';
+import {
+  PowerLevelsContextProvider,
+  usePowerLevels,
+  usePowerLevelsContext,
+  usePowerLevelsState,
+} from '../../hooks/usePowerLevels';
+import {
+  PowerLevelTagsContextProvider,
+  usePowerLevelTags,
+  usePowerLevelTagsContext,
+  usePowerLevelTagsState,
+} from '../../hooks/usePowerLevelTags';
 import { useTheme } from '../../hooks/useTheme';
 import { PowerIcon } from '../../components/power';
 import colorMXID from '../../../util/colorMXID';
@@ -51,279 +39,256 @@ import {
 } from '../../hooks/useMemberPowerTag';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomCreatorsTag } from '../../hooks/useRoomCreatorsTag';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import {
+  RoomMembersAPIProvider,
+  useRoomMembers,
+  useRoomMembersAPI,
+} from '../../hooks/useRoomMembers';
+import { useClient } from '../../hooks/useClient';
+import { GetRoomNameCallback } from '../../hooks/storage/useGetRoomName';
+import { GetRoomAvatarCallback } from '../../hooks/storage/useGetRoomAvatar';
+import { Timeline } from '../../../client/room';
+import { useObservableValueOptionally } from '../../hooks/useObservableValue';
+import { useMessageParserOptions } from '../../hooks/useMessageParserOptions';
+import { MessageContent } from '../../components/MessageContent';
+import { rContent } from '../../../client/reader';
 
-type SearchResultGroupProps = {
-  room: Room;
-  highlights: string[];
+type SearchGroupMessagesProps = {
+  roomId: string;
+  timeline?: Timeline;
   items: ResultItem[];
+  highlights: string[];
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
-  onOpen: (roomId: string, eventId: string) => void;
   legacyUsernameColor?: boolean;
   hour24Clock: boolean;
   dateFormatString: string;
+  getRoomName: GetRoomNameCallback;
+  onOpen: (roomId: string, eventId: string) => void;
 };
-export function SearchResultGroup({
-  room,
-  highlights,
+export function SearchGroupMessages({
+  roomId,
+  timeline,
   items,
+  highlights,
   mediaAutoLoad,
   urlPreview,
-  onOpen,
   legacyUsernameColor,
   hour24Clock,
   dateFormatString,
-}: SearchResultGroupProps) {
-  const mx = useMatrixClient();
+  getRoomName,
+  onOpen,
+}: SearchGroupMessagesProps) {
+  const ct = useClient();
+  const membersAPI = useRoomMembersAPI();
   const useAuthentication = useMediaAuthentication();
   const highlightRegex = useMemo(() => makeHighlightRegex(highlights), [highlights]);
 
-  const powerLevels = usePowerLevels(room);
-  const creators = useRoomCreators(room);
+  const redacted = useObservableValueOptionally(timeline?.relations.redacted);
+  const edits = useObservableValueOptionally(timeline?.relations.edits.eventToRelations);
 
+  const creators = useRoomCreators(roomId);
+  const powerLevels = usePowerLevelsContext();
+  const getMemberPowerTag = useGetMemberPowerTag(creators, powerLevels);
   const creatorsTag = useRoomCreatorsTag();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const powerLevelTags = usePowerLevelTagsContext();
 
   const theme = useTheme();
   const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);
 
-  const mentionClickHandler = useMentionClickHandler(room.roomId);
-  const spoilerClickHandler = useSpoilerClickHandler();
-
-  const linkifyOpts = useMemo<LinkifyOpts>(
-    () => ({
-      ...LINKIFY_OPTS,
-      render: factoryRenderLinkifyWithMention((href) =>
-        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
-      ),
-    }),
-    [mx, room, mentionClickHandler]
-  );
-  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
-    () =>
-      getReactCustomHtmlParser(mx, room.roomId, {
-        linkifyOpts,
-        highlightRegex,
-        useAuthentication,
-        handleSpoilerClick: spoilerClickHandler,
-        handleMentionClick: mentionClickHandler,
-      }),
-    [
-      mx,
-      room,
-      linkifyOpts,
-      highlightRegex,
-      mentionClickHandler,
-      spoilerClickHandler,
-      useAuthentication,
-    ]
-  );
-
-  const renderMatrixEvent = useMatrixEventRenderer<[IEventWithRoomId, string, GetContentCallback]>(
-    {
-      [MessageEvent.RoomMessage]: (event, displayName, getContent) => {
-        if (event.unsigned?.redacted_because) {
-          return <RedactedContent reason={event.unsigned?.redacted_because.content.reason} />;
-        }
-
-        return (
-          <RenderMessageContent
-            displayName={displayName}
-            msgType={event.content.msgtype ?? ''}
-            ts={event.origin_server_ts}
-            getContent={getContent}
-            mediaAutoLoad={mediaAutoLoad}
-            urlPreview={urlPreview}
-            htmlReactParserOptions={htmlReactParserOptions}
-            linkifyOpts={linkifyOpts}
-            highlightRegex={highlightRegex}
-            outlineAttachment
-          />
-        );
-      },
-      [MessageEvent.Reaction]: (event, displayName, getContent) => {
-        if (event.unsigned?.redacted_because) {
-          return <RedactedContent reason={event.unsigned?.redacted_because.content.reason} />;
-        }
-        return (
-          <MSticker
-            content={getContent()}
-            renderImageContent={(props) => (
-              <ImageContent
-                {...props}
-                autoPlay={mediaAutoLoad}
-                renderImage={(p) => <Image {...p} loading="lazy" />}
-                renderViewer={(p) => <ImageViewer {...p} />}
-              />
-            )}
-          />
-        );
-      },
-      [StateEvent.RoomTombstone]: (event) => {
-        const { content } = event;
-        return (
-          <Box grow="Yes" direction="Column">
-            <Text size="T400" priority="300">
-              Room Tombstone. {content.body}
-            </Text>
-          </Box>
-        );
-      },
-    },
-    undefined,
-    (event) => {
-      if (event.unsigned?.redacted_because) {
-        return <RedactedContent reason={event.unsigned?.redacted_because.content.reason} />;
-      }
-      return (
-        <Box grow="Yes" direction="Column">
-          <Text size="T400" priority="300">
-            <code className={customHtmlCss.Code}>{event.type}</code>
-            {' event'}
-          </Text>
-        </Box>
-      );
-    }
+  const { linkifyOpts, htmlReactParserOptions } = useMessageParserOptions(
+    roomId,
+    getRoomName,
+    membersAPI.getName,
+    highlightRegex
   );
 
   const handleOpenClick: MouseEventHandler = (evt) => {
     const eventId = evt.currentTarget.getAttribute('data-event-id');
     if (!eventId) return;
-    onOpen(room.roomId, eventId);
+    onOpen(roomId, eventId);
   };
 
+  return (
+    <Box direction="Column" gap="100">
+      {items.map((item) => {
+        const { event } = item;
+
+        const displayName = membersAPI.getName(event.sender);
+
+        const senderAvatarMxc = membersAPI.getAvatar(event.sender);
+
+        const memberPowerTag = getMemberPowerTag(event.sender);
+        const tagColor = memberPowerTag?.color
+          ? accessibleTagColors?.get(memberPowerTag.color)
+          : undefined;
+        const tagIconSrc = memberPowerTag?.icon
+          ? getPowerTagIconSrc(ct, useAuthentication, memberPowerTag.icon)
+          : undefined;
+
+        const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
+
+        const editEvents = edits?.get(event.event_id);
+        const editedEvent = editEvents && getLatestEditEvent(event.sender, editEvents, redacted);
+
+        return (
+          <SequenceCard
+            key={event.event_id}
+            style={{ padding: `${config.space.S300} ${config.space.S400}` }}
+            variant="SurfaceVariant"
+            direction="Column"
+          >
+            <ModernLayout
+              before={
+                <AvatarBase>
+                  <Avatar size="300">
+                    <UserAvatar
+                      userId={event.sender}
+                      src={
+                        senderAvatarMxc
+                          ? mxcToHttp(
+                              ct.session.baseUrl,
+                              senderAvatarMxc,
+                              useAuthentication
+                            ).thumbnail({ width: 96, height: 96, method: 'crop' })
+                          : undefined
+                      }
+                      alt={displayName}
+                      renderFallback={() => <Icon size="200" src={Icons.User} filled />}
+                    />
+                  </Avatar>
+                </AvatarBase>
+              }
+            >
+              <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
+                <Box gap="200" alignItems="Baseline">
+                  <Box alignItems="Center" gap="200">
+                    <Username style={{ color: usernameColor }}>
+                      <Text as="span" truncate>
+                        <UsernameBold>{displayName}</UsernameBold>
+                      </Text>
+                    </Username>
+                    {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
+                  </Box>
+                  <Time
+                    ts={event.origin_server_ts}
+                    hour24Clock={hour24Clock}
+                    dateFormatString={dateFormatString}
+                  />
+                </Box>
+                <Box shrink="No" gap="200" alignItems="Center">
+                  <Chip
+                    data-event-id={event.event_id}
+                    onClick={handleOpenClick}
+                    variant="Secondary"
+                    radii="400"
+                  >
+                    <Text size="T200">Open</Text>
+                  </Chip>
+                </Box>
+              </Box>
+              {redacted?.has(event.event_id) ? (
+                <RedactedContent />
+              ) : (
+                <MessageContent
+                  event={event}
+                  editedEvent={editedEvent}
+                  roomId={roomId}
+                  decryptionManager={ct.decryption}
+                >
+                  {(contentEvent) => (
+                    <RenderMessageContent
+                      displayName={membersAPI.getName(event.sender)}
+                      eventType={contentEvent.type}
+                      ts={event.origin_server_ts}
+                      edited={!!editedEvent}
+                      content={rContent.newContent(contentEvent.content) ?? contentEvent.content}
+                      mediaAutoLoad={mediaAutoLoad}
+                      urlPreview={urlPreview}
+                      htmlReactParserOptions={htmlReactParserOptions}
+                      linkifyOpts={linkifyOpts}
+                      highlightRegex={highlightRegex}
+                    />
+                  )}
+                </MessageContent>
+              )}
+            </ModernLayout>
+          </SequenceCard>
+        );
+      })}
+    </Box>
+  );
+}
+
+type SearchResultGroupProps = {
+  roomId: string;
+  items: ResultItem[];
+  getRoomName: GetRoomNameCallback;
+  getRoomAvatar: GetRoomAvatarCallback;
+  children: ReactNode;
+};
+export function SearchResultGroup({
+  roomId,
+  items,
+  getRoomName,
+  getRoomAvatar,
+  children,
+}: SearchResultGroupProps) {
+  const ct = useClient();
+  const useAuthentication = useMediaAuthentication();
+
+  const users = useMemo(() => Array.from(new Set(items.map((i) => i.event.sender))), [items]);
+
+  const avatarMxc = getRoomAvatar(roomId);
+
+  const powerLevelStateResult = usePowerLevelsState(roomId);
+  const powerLevels = usePowerLevels(powerLevelStateResult.value);
+
+  const powerLevelTagsStateResult = usePowerLevelTagsState(roomId);
+  const powerLevelTags = usePowerLevelTags(powerLevels, powerLevelTagsStateResult.value);
+
+  const membersAPI = useRoomMembers(roomId, users);
+
   return (
     <Box direction="Column" gap="200">
       <Header size="300">
         <Box gap="200" grow="Yes">
           <Avatar size="200" radii="300">
             <RoomAvatar
-              roomId={room.roomId}
-              src={getRoomAvatarUrl(mx, room, 96, useAuthentication)}
-              alt={room.name}
+              roomId={roomId}
+              src={
+                avatarMxc
+                  ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+                      width: 48,
+                      height: 48,
+                      method: 'crop',
+                    })
+                  : undefined
+              }
+              alt={getRoomName(roomId)}
               renderFallback={() => (
                 <RoomIcon
                   size="50"
-                  roomType={room.getType()}
-                  joinRule={room.getJoinRule() ?? JoinRule.Restricted}
+                  roomType={ct.roomToType.read.get(roomId)}
+                  joinRule={ct.roomToJoinRule.read.get(roomId)}
                   filled
                 />
               )}
             />
           </Avatar>
           <Text size="H4" truncate>
-            {room.name}
+            {getRoomName(roomId) ?? 'Unknown'}
           </Text>
         </Box>
       </Header>
-      <Box direction="Column" gap="100">
-        {items.map((item) => {
-          const { event } = item;
-
-          const displayName =
-            getMemberDisplayName(room, event.sender) ??
-            getMxIdLocalPart(event.sender) ??
-            event.sender;
-          const senderAvatarMxc = getMemberAvatarMxc(room, event.sender);
-
-          const relation = event.content['m.relates_to'];
-          const mainEventId =
-            relation?.rel_type === RelationType.Replace ? relation.event_id : event.event_id;
-
-          const getContent = (() =>
-            event.content['m.new_content'] ?? event.content) as GetContentCallback;
-
-          const replyEventId = relation?.['m.in_reply_to']?.event_id;
-          const threadRootId =
-            relation?.rel_type === RelationType.Thread ? relation.event_id : undefined;
-
-          const memberPowerTag = getMemberPowerTag(event.sender);
-          const tagColor = memberPowerTag?.color
-            ? accessibleTagColors?.get(memberPowerTag.color)
-            : undefined;
-          const tagIconSrc = memberPowerTag?.icon
-            ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
-            : undefined;
-
-          const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
-
-          return (
-            <SequenceCard
-              key={event.event_id}
-              style={{ padding: config.space.S400 }}
-              variant="SurfaceVariant"
-              direction="Column"
-            >
-              <ModernLayout
-                before={
-                  <AvatarBase>
-                    <Avatar size="300">
-                      <UserAvatar
-                        userId={event.sender}
-                        src={
-                          senderAvatarMxc
-                            ? mxcUrlToHttp(
-                                mx,
-                                senderAvatarMxc,
-                                useAuthentication,
-                                48,
-                                48,
-                                'crop'
-                              ) ?? undefined
-                            : undefined
-                        }
-                        alt={displayName}
-                        renderFallback={() => <Icon size="200" src={Icons.User} filled />}
-                      />
-                    </Avatar>
-                  </AvatarBase>
-                }
-              >
-                <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
-                  <Box gap="200" alignItems="Baseline">
-                    <Box alignItems="Center" gap="200">
-                      <Username style={{ color: usernameColor }}>
-                        <Text as="span" truncate>
-                          <UsernameBold>{displayName}</UsernameBold>
-                        </Text>
-                      </Username>
-                      {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
-                    </Box>
-                    <Time
-                      ts={event.origin_server_ts}
-                      hour24Clock={hour24Clock}
-                      dateFormatString={dateFormatString}
-                    />
-                  </Box>
-                  <Box shrink="No" gap="200" alignItems="Center">
-                    <Chip
-                      data-event-id={mainEventId}
-                      onClick={handleOpenClick}
-                      variant="Secondary"
-                      radii="400"
-                    >
-                      <Text size="T200">Open</Text>
-                    </Chip>
-                  </Box>
-                </Box>
-                {replyEventId && (
-                  <Reply
-                    room={room}
-                    replyEventId={replyEventId}
-                    threadRootId={threadRootId}
-                    onClick={handleOpenClick}
-                    getMemberPowerTag={getMemberPowerTag}
-                    accessibleTagColors={accessibleTagColors}
-                    legacyUsernameColor={legacyUsernameColor}
-                  />
-                )}
-                {renderMatrixEvent(event.type, false, event, displayName, getContent)}
-              </ModernLayout>
-            </SequenceCard>
-          );
-        })}
-      </Box>
+      <RoomMembersAPIProvider value={membersAPI}>
+        <PowerLevelsContextProvider value={powerLevels}>
+          <PowerLevelTagsContextProvider value={powerLevelTags}>
+            {children}
+          </PowerLevelTagsContextProvider>
+        </PowerLevelsContextProvider>
+      </RoomMembersAPIProvider>
     </Box>
   );
 }
diff --git a/src/app/features/message-search/useMessageSearch.ts b/src/app/features/message-search/useMessageSearch.ts
index ded6d4b7..1dd7cbac 100644
--- a/src/app/features/message-search/useMessageSearch.ts
+++ b/src/app/features/message-search/useMessageSearch.ts
@@ -1,18 +1,18 @@
-import {
-  IEventWithRoomId,
-  IResultContext,
-  ISearchRequestBody,
-  ISearchResponse,
-  ISearchResult,
-  SearchOrderBy,
-} from 'matrix-js-sdk';
 import { useCallback } from 'react';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
+import {
+  ClientEvent,
+  SearchEventContext,
+  SearchEventOrder,
+  SearchResult,
+} from 'neurone/lib/api/types';
+import { postSearch, PostSearchBody, PostSearchOK } from 'neurone/lib/api/matrix/client/v3/search';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { useClient } from '../../hooks/useClient';
 
 export type ResultItem = {
   rank: number;
-  event: IEventWithRoomId;
-  context: IResultContext;
+  event: ClientEvent;
+  context: SearchEventContext;
 };
 
 export type ResultGroup = {
@@ -20,21 +20,24 @@ export type ResultGroup = {
   items: ResultItem[];
 };
 
-export type SearchResult = {
+export type MessageSearchResult = {
   nextToken?: string;
   highlights: string[];
   groups: ResultGroup[];
 };
 
-const groupSearchResult = (results: ISearchResult[]): ResultGroup[] => {
+const groupSearchResult = (results: SearchResult[]): ResultGroup[] => {
   const groups: ResultGroup[] = [];
 
   results.forEach((item) => {
-    const roomId = item.result.room_id;
+    const { rank, result, context } = item;
+    if (!result || typeof rank !== 'number' || !context) return;
+
+    const roomId = result.room_id;
     const resultItem: ResultItem = {
-      rank: item.rank,
-      event: item.result,
-      context: item.context,
+      rank,
+      event: result,
+      context,
     };
 
     const lastAddedGroup: ResultGroup | undefined = groups[groups.length - 1];
@@ -51,10 +54,10 @@ const groupSearchResult = (results: ISearchResult[]): ResultGroup[] => {
   return groups;
 };
 
-const parseSearchResult = (result: ISearchResponse): SearchResult => {
+const parseSearchResult = (result: PostSearchOK): MessageSearchResult => {
   const roomEvents = result.search_categories.room_events;
 
-  const searchResult: SearchResult = {
+  const searchResult: MessageSearchResult = {
     nextToken: roomEvents?.next_batch,
     highlights: roomEvents?.highlights ?? [],
     groups: groupSearchResult(roomEvents?.results ?? []),
@@ -65,12 +68,12 @@ const parseSearchResult = (result: ISearchResponse): SearchResult => {
 
 export type MessageSearchParams = {
   term?: string;
-  order?: string;
+  order?: SearchEventOrder;
   rooms?: string[];
   senders?: string[];
 };
 export const useMessageSearch = (params: MessageSearchParams) => {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const { term, order, rooms, senders } = params;
 
   const searchMessages = useCallback(
@@ -82,7 +85,7 @@ export const useMessageSearch = (params: MessageSearchParams) => {
         };
       const limit = 20;
 
-      const requestBody: ISearchRequestBody = {
+      const requestBody: PostSearchBody = {
         search_categories: {
           room_events: {
             event_context: {
@@ -96,19 +99,28 @@ export const useMessageSearch = (params: MessageSearchParams) => {
               senders,
             },
             include_state: false,
-            order_by: order as SearchOrderBy.Recent,
+            order_by: order,
             search_term: term,
           },
         },
       };
 
-      const r = await mx.search({
-        body: requestBody,
-        next_batch: nextBatch === '' ? undefined : nextBatch,
-      });
-      return parseSearchResult(r);
+      const resp = await ct.requestAuthJSON(
+        postSearch({
+          searchParams: { next_batch: nextBatch === '' ? undefined : nextBatch },
+          body: requestBody,
+        })
+      );
+
+      const [err, result] = await parseMatrixResp<PostSearchOK>(resp);
+
+      if (err) {
+        throw new Error(err.data.error ?? err.data.errcode);
+      }
+
+      return parseSearchResult(result);
     },
-    [mx, term, order, rooms, senders]
+    [ct, term, order, rooms, senders]
   );
 
   return searchMessages;
diff --git a/src/app/hooks/useMessageParserOptions.ts b/src/app/hooks/useMessageParserOptions.ts
index 6fadca79..de0beeb6 100644
--- a/src/app/hooks/useMessageParserOptions.ts
+++ b/src/app/hooks/useMessageParserOptions.ts
@@ -19,7 +19,8 @@ import { useMediaAuthentication } from './useMediaAuthentication';
 export const useMessageParserOptions = (
   roomId: string,
   getRoomName: GetRoomNameCallback,
-  getMemberName: GetRoomMemberNameCallback
+  getMemberName: GetRoomMemberNameCallback,
+  highlightRegex?: RegExp
 ) => {
   const ct = useClient();
   const useAuthentication = useMediaAuthentication();
@@ -49,6 +50,7 @@ export const useMessageParserOptions = (
       getReactCustomHtmlParser(ct, roomId, {
         linkifyOpts,
         useAuthentication,
+        highlightRegex,
         handleSpoilerClick: spoilerClickHandler,
         handleMentionClick: mentionClickHandler,
         getMemberName,
@@ -58,6 +60,7 @@ export const useMessageParserOptions = (
       ct,
       roomId,
       linkifyOpts,
+      highlightRegex,
       spoilerClickHandler,
       mentionClickHandler,
       useAuthentication,
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 72580f00..72a34755 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -122,7 +122,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
             {mobile ? null : <Route index element={<WelcomePage />} />}
             <Route path={_CREATE_PATH} element={<HomeCreateRoom />} />
             <Route path={_JOIN_PATH} element={<p>join</p>} />
-            {/* <Route path={_SEARCH_PATH} element={<HomeSearch />} /> */}
+            <Route path={_SEARCH_PATH} element={<HomeSearch />} />
             <Route
               path={_ROOM_PATH}
               element={
@@ -187,7 +187,7 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
               />
             )}
             <Route path={_LOBBY_PATH} element={<Lobby />} />
-            {/*<Route path={_SEARCH_PATH} element={<SpaceSearch />} /> */}
+            <Route path={_SEARCH_PATH} element={<SpaceSearch />} />
             <Route
               path={_ROOM_PATH}
               element={
diff --git a/src/app/pages/client/space/Search.tsx b/src/app/pages/client/space/Search.tsx
index 017262b5..4c4a8014 100644
--- a/src/app/pages/client/space/Search.tsx
+++ b/src/app/pages/client/space/Search.tsx
@@ -8,22 +8,22 @@ import { useRecursiveChildRoomScopeFactory, useSpaceChildren } from '../../../st
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { mDirectAtom } from '../../../state/mDirectList';
 import { roomToParentsAtom } from '../../../state/room/roomToParents';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { BackRouteHandler } from '../../../components/BackRouteHandler';
+import { useClient } from '../../../hooks/useClient';
 
 export function SpaceSearch() {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const scrollRef = useRef<HTMLDivElement>(null);
-  const space = useSpace();
+  const spaceId = useSpace();
   const screenSize = useScreenSizeContext();
 
   const mDirects = useAtomValue(mDirectAtom);
   const roomToParents = useAtomValue(roomToParentsAtom);
   const rooms = useSpaceChildren(
     allRoomsAtom,
-    space.roomId,
-    useRecursiveChildRoomScopeFactory(mx, mDirects, roomToParents)
+    spaceId,
+    useRecursiveChildRoomScopeFactory(ct, mDirects, roomToParents)
   );
 
   return (
@@ -55,7 +55,11 @@ export function SpaceSearch() {
           <PageContent>
             <PageContentCenter>
               <MessageSearch
-                defaultRoomsFilterName={space.name}
+                defaultRoomsFilterName={
+                  ct.roomToName.read.get(spaceId) ??
+                  ct.roomToAlias.read.get(spaceId) ??
+                  'Unknown Space'
+                }
                 allowGlobal
                 rooms={rooms}
                 scrollRef={scrollRef}

From 869de1418a41107e2746a245ef9cc03e7204d091 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 25 Aug 2026 20:47:31 +0530
Subject: [PATCH 110/158] fix thread crash of continuwuity server bug

---
 .../thread-selector/ThreadSelector.tsx        | 24 ++++++++++++-------
 src/app/hooks/useThreadParticipant.ts         |  4 ++--
 2 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/app/features/room/message/thread-selector/ThreadSelector.tsx b/src/app/features/room/message/thread-selector/ThreadSelector.tsx
index c78c399c..50c54a58 100644
--- a/src/app/features/room/message/thread-selector/ThreadSelector.tsx
+++ b/src/app/features/room/message/thread-selector/ThreadSelector.tsx
@@ -119,14 +119,22 @@ export function ThreadSelector({
           </Text>
         ) : (
           <Text size="T200" truncate>
-            <span>Last reply by </span>
-            <b>{getMemberName(latestReplyEvent.sender)}</b>
-            <span> at </span>
-            <Time
-              hour24Clock={hour24Clock}
-              dateFormatString={dateFormatString}
-              ts={latestReplyEvent.origin_server_ts}
-            />
+            {/* https://forgejo.ellis.link/continuwuation/continuwuity/issues/2167 */}
+            {latestReplyEvent.sender ? (
+              <>
+                <span>Last reply by </span>
+
+                <b>{getMemberName(latestReplyEvent.sender)}</b>
+                <span> at </span>
+                <Time
+                  hour24Clock={hour24Clock}
+                  dateFormatString={dateFormatString}
+                  ts={latestReplyEvent.origin_server_ts}
+                />
+              </>
+            ) : (
+              <span>View Thread</span>
+            )}
           </Text>
         )}
         <Icon size="100" src={Icons.ChevronRight} />
diff --git a/src/app/hooks/useThreadParticipant.ts b/src/app/hooks/useThreadParticipant.ts
index ac205e87..51c88b61 100644
--- a/src/app/hooks/useThreadParticipant.ts
+++ b/src/app/hooks/useThreadParticipant.ts
@@ -11,8 +11,8 @@ export const useThreadParticipants = (timeline: ThreadTimeline): string[] => {
       u.add(m.sender);
     });
 
-    if (meta?.latestReplyEvent) {
-      u.add(meta.latestReplyEvent?.sender);
+    if (meta?.latestReplyEvent?.sender) {
+      u.add(meta.latestReplyEvent.sender);
     }
     return Array.from(u);
   }, [meta, messageBatch]);

From 8e917d82e94b1d02b3c8f89533213892a785864e Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 26 Aug 2026 10:33:33 +0530
Subject: [PATCH 111/158] improve loading speed by stop waiting for outgoing
 request completion

---
 src/client/initialize.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index fa08e7a7..fc520e32 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -55,7 +55,8 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
     session,
     requestAuthJSON
   );
-  await machine.outgoingRequests.processAll();
+  // awaiting on this request can slow down the loading perf if server is busy.
+  machine.outgoingRequests.processAll();
 
   const state = await createStateContext(storage, disposer);
 

From 1ff7e86eb8137128f73d3d600c62fbdfe6c3a103 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 26 Aug 2026 11:24:50 +0530
Subject: [PATCH 112/158] fix typo when accessing replace relation

---
 src/client/reader/message/Relations.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/client/reader/message/Relations.ts b/src/client/reader/message/Relations.ts
index 97aa55e2..8e7a62d5 100644
--- a/src/client/reader/message/Relations.ts
+++ b/src/client/reader/message/Relations.ts
@@ -2,7 +2,7 @@ import { ObjectReader } from 'neurone/lib/utils';
 
 export class rRelations {
   static replace(relations?: object): object | undefined {
-    return ObjectReader.object(relations, 'm.relations');
+    return ObjectReader.object(relations, 'm.replace');
   }
 
   static thread(relations?: object): object | undefined {

From 69bc5eab705a75aa749b3f2632534a81b72ca1a0 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 26 Aug 2026 11:27:37 +0530
Subject: [PATCH 113/158] move pinned menu to new sdk

---
 src/app/components/message/Reply.tsx          |  11 +-
 .../message-search/SearchResultGroup.tsx      |   2 +-
 src/app/features/room/RoomTimeline.tsx        |   2 +-
 .../room/room-pin-menu/RoomPinMenu.tsx        | 491 +++++++-----------
 .../room/thread-view/TimelineView.tsx         |   2 +-
 src/app/hooks/useRoomEvent.ts                 |   2 +-
 src/app/pages/client/inbox/Notifications.tsx  |   2 +-
 src/app/utils/room.ts                         |  29 +-
 src/types/matrix/room.ts                      |   4 +
 9 files changed, 212 insertions(+), 333 deletions(-)

diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index e1b6fd26..b623d89c 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -21,7 +21,6 @@ import { RedactedContent } from './MsgTypeRenderers';
 import { HoverUnderline } from '../../styles/Text.css';
 import { useObservableValueOptionally } from '../../hooks/useObservableValue';
 import { getLatestEditEvent } from '../../utils/room';
-import { replaced } from '../../../client/room/relations';
 import { MessageContent } from '../MessageContent';
 import { useClient } from '../../hooks/useClient';
 
@@ -180,17 +179,9 @@ export function Reply({
     redactedEvents?.has(eventId) || !!rUnsigned.redactedBecause(replyEvent?.unsigned);
 
   const renderEventContent = (event: ClientEventWithoutRoomId) => {
-    const aggregatedEdit = replaced(event);
     const editEvents = edits?.get(eventId);
 
-    const editedEvent =
-      editEvents && redactedEvents
-        ? getLatestEditEvent(
-            event.sender,
-            aggregatedEdit ? [aggregatedEdit, ...editEvents] : editEvents,
-            redactedEvents
-          )
-        : undefined;
+    const editedEvent = getLatestEditEvent(event, editEvents, redactedEvents);
 
     return (
       <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }} as="div">
diff --git a/src/app/features/message-search/SearchResultGroup.tsx b/src/app/features/message-search/SearchResultGroup.tsx
index 025627bd..8a59e00c 100644
--- a/src/app/features/message-search/SearchResultGroup.tsx
+++ b/src/app/features/message-search/SearchResultGroup.tsx
@@ -130,7 +130,7 @@ export function SearchGroupMessages({
         const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
 
         const editEvents = edits?.get(event.event_id);
-        const editedEvent = editEvents && getLatestEditEvent(event.sender, editEvents, redacted);
+        const editedEvent = getLatestEditEvent(event, editEvents, redacted);
 
         return (
           <SequenceCard
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index e99ce402..85bf49e5 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -345,7 +345,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const renderMatrixEvent = (event: MessageEventWithoutRoomId, item: number, collapse: boolean) => {
     const reactionEvents = reactions.get(event.event_id)?.filter((r) => !redacted.has(r.event_id));
     const editEvents = edits.get(event.event_id);
-    const editedEvent = editEvents && getLatestEditEvent(event.sender, editEvents, redacted);
+    const editedEvent = getLatestEditEvent(event, editEvents, redacted);
     const highlighted = focusItem?.index === item && focusItem.highlight;
 
     const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
diff --git a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
index 314dddcc..c0019cdb 100644
--- a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
+++ b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
@@ -1,7 +1,12 @@
 /* eslint-disable react/destructuring-assignment */
-import React, { forwardRef, MouseEventHandler, useCallback, useMemo, useRef } from 'react';
-import { MatrixEvent, Room } from 'matrix-js-sdk';
-import { RoomPinnedEventsEventContent } from 'matrix-js-sdk/lib/types';
+import React, {
+  forwardRef,
+  MouseEventHandler,
+  ReactNode,
+  useCallback,
+  useMemo,
+  useRef,
+} from 'react';
 import {
   Avatar,
   Box,
@@ -18,9 +23,10 @@ import {
   Text,
   toRem,
 } from 'folds';
-import { Opts as LinkifyOpts } from 'linkifyjs';
-import { HTMLReactParserOptions } from 'html-react-parser';
 import { useVirtualizer } from '@tanstack/react-virtual';
+import { putStateEvent } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { useRoomPinnedEvents } from '../../../hooks/useRoomPinnedEvents';
 import * as css from './RoomPinMenu.css';
 import { SequenceCard } from '../../../components/sequence-card';
@@ -29,54 +35,22 @@ import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
 import {
   AvatarBase,
   DefaultPlaceholder,
-  ImageContent,
-  MessageNotDecryptedContent,
-  MessageUnsupportedContent,
   ModernLayout,
-  MSticker,
   RedactedContent,
-  Reply,
   Time,
   Username,
   UsernameBold,
 } from '../../../components/message';
 import { UserAvatar } from '../../../components/user-avatar';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../../utils/matrix';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import {
-  getEditedEvent,
-  getMemberAvatarMxc,
-  getMemberDisplayName,
-  getStateEvent,
-} from '../../../utils/room';
-import {
-  GetContentCallback,
-  MessageEvent,
-  StateEvent,
-  StateEventType,
-} from '../../../../types/matrix/room';
-import { useMentionClickHandler } from '../../../hooks/useMentionClickHandler';
-import { useSpoilerClickHandler } from '../../../hooks/useSpoilerClickHandler';
-import {
-  factoryRenderLinkifyWithMention,
-  getReactCustomHtmlParser,
-  LINKIFY_OPTS,
-  makeMentionCustomProps,
-  renderMatrixMention,
-} from '../../../plugins/react-custom-html-parser';
-import { RenderMatrixEvent, useMatrixEventRenderer } from '../../../hooks/useMatrixEventRenderer';
-import { RenderMessageContent } from '../../../components/RenderMessageContent';
-import { useSetting } from '../../../state/hooks/settings';
-import * as customHtmlCss from '../../../styles/CustomHtml.css';
-import { EncryptedContent } from '../message';
-import { Image } from '../../../components/media';
-import { ImageViewer } from '../../../components/image-viewer';
+import { getLatestEditEvent } from '../../../utils/room';
+import { RoomPinnedEventsContent, StateEventType } from '../../../../types/matrix/room';
+import { useSettings } from '../../../state/hooks/settings';
 import { useRoomNavigate } from '../../../hooks/useRoomNavigate';
 import { VirtualTile } from '../../../components/virtualizer';
 import { usePowerLevelsContext } from '../../../hooks/usePowerLevels';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
-import { usePowerLevelTags } from '../../../hooks/usePowerLevelTags';
+import { usePowerLevelTagsContext } from '../../../hooks/usePowerLevelTags';
 import { useTheme } from '../../../hooks/useTheme';
 import { PowerIcon } from '../../../components/power';
 import colorMXID from '../../../../util/colorMXID';
@@ -84,59 +58,68 @@ import { useIsDirectRoom, useRoom } from '../../../hooks/useRoom';
 import { useRoomCreators } from '../../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../../hooks/useRoomPermissions';
 import {
-  GetMemberPowerTag,
   getPowerTagIconSrc,
   useAccessiblePowerTagColors,
   useGetMemberPowerTag,
 } from '../../../hooks/useMemberPowerTag';
 import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
 import { useClient } from '../../../hooks/useClient';
+import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
+import { useMessageParserOptions } from '../../../hooks/useMessageParserOptions';
+import { useRoomHeroes } from '../../../hooks/storage/useRoomHeros';
+import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
+import {
+  useObservableValue,
+  useObservableValueOptionally,
+} from '../../../hooks/useObservableValue';
+import { MessageContent } from '../../../components/MessageContent';
+import { RenderMessageContent } from '../../../components/RenderMessageContent';
+import { rContent } from '../../../../client/reader';
+import { mxcToHttp } from '../../../../client/mxcToHttp';
 
 type PinnedMessageProps = {
-  room: Room;
+  pinnedEvents: string[];
+  roomId: string;
   eventId: string;
-  renderContent: RenderMatrixEvent<[MatrixEvent, string, GetContentCallback]>;
   onOpen: (roomId: string, eventId: string) => void;
   canPinEvent: boolean;
-  getMemberPowerTag: GetMemberPowerTag;
-  accessibleTagColors: Map<string, string>;
-  legacyUsernameColor: boolean;
-  hour24Clock: boolean;
-  dateFormatString: string;
+  children: (event: MessageEventWithoutRoomId, renderOptions: () => ReactNode) => ReactNode;
 };
 function PinnedMessage({
-  room,
+  pinnedEvents,
+  roomId,
   eventId,
-  renderContent,
   onOpen,
   canPinEvent,
-  getMemberPowerTag,
-  accessibleTagColors,
-  legacyUsernameColor,
-  hour24Clock,
-  dateFormatString,
+  children,
 }: PinnedMessageProps) {
-  const pinnedEvent = useRoomEvent(room, eventId);
-  const useAuthentication = useMediaAuthentication();
-  const mx = useMatrixClient();
+  const pinnedEvent = useRoomEvent(roomId, eventId);
+  const ct = useClient();
 
   const [unpinState, unpin] = useAsyncCallback(
-    useCallback(() => {
-      const pinEvent = getStateEvent(room, StateEvent.RoomPinnedEvents);
-      const content = pinEvent?.getContent<RoomPinnedEventsEventContent>() ?? { pinned: [] };
-      const newContent: RoomPinnedEventsEventContent = {
-        pinned: content.pinned.filter((id) => id !== eventId),
+    useCallback(async () => {
+      const newContent: RoomPinnedEventsContent = {
+        pinned: pinnedEvents.filter((id) => id !== eventId),
       };
 
-      return mx.sendStateEvent(room.roomId, StateEvent.RoomPinnedEvents as any, newContent);
-    }, [room, eventId, mx])
+      const resp = await ct.requestAuthJSON(
+        putStateEvent({
+          pathParams: { roomId, eventType: StateEventType.RoomPinnedEvents, stateKey: '' },
+          body: newContent,
+        })
+      );
+      const [err] = await parseMatrixResp(resp);
+      if (err) {
+        throw new Error(err.data.error ?? err.data.errcode);
+      }
+    }, [roomId, eventId, ct, pinnedEvents])
   );
 
   const handleOpenClick: MouseEventHandler = (evt) => {
     evt.stopPropagation();
     const evtId = evt.currentTarget.getAttribute('data-event-id');
     if (!evtId) return;
-    onOpen(room.roomId, evtId);
+    onOpen(roomId, evtId);
   };
 
   const handleUnpinClick: MouseEventHandler = (evt) => {
@@ -179,73 +162,7 @@ function PinnedMessage({
       </Box>
     );
 
-  const sender = pinnedEvent.getSender()!;
-  const displayName = getMemberDisplayName(room, sender) ?? getMxIdLocalPart(sender) ?? sender;
-  const senderAvatarMxc = getMemberAvatarMxc(room, sender);
-  const getContent = (() => pinnedEvent.getContent()) as GetContentCallback;
-
-  const memberPowerTag = getMemberPowerTag(sender);
-  const tagColor = memberPowerTag?.color
-    ? accessibleTagColors?.get(memberPowerTag.color)
-    : undefined;
-  const tagIconSrc = memberPowerTag?.icon
-    ? getPowerTagIconSrc(mx, useAuthentication, memberPowerTag.icon)
-    : undefined;
-
-  const usernameColor = legacyUsernameColor ? colorMXID(sender) : tagColor;
-
-  return (
-    <ModernLayout
-      before={
-        <AvatarBase>
-          <Avatar size="300">
-            <UserAvatar
-              userId={sender}
-              src={
-                senderAvatarMxc
-                  ? mxcUrlToHttp(mx, senderAvatarMxc, useAuthentication, 48, 48, 'crop') ??
-                    undefined
-                  : undefined
-              }
-              alt={displayName}
-              renderFallback={() => <Icon size="200" src={Icons.User} filled />}
-            />
-          </Avatar>
-        </AvatarBase>
-      }
-    >
-      <Box gap="300" justifyContent="SpaceBetween" alignItems="Center" grow="Yes">
-        <Box gap="200" alignItems="Baseline">
-          <Box alignItems="Center" gap="200">
-            <Username style={{ color: usernameColor }}>
-              <Text as="span" truncate>
-                <UsernameBold>{displayName}</UsernameBold>
-              </Text>
-            </Username>
-            {tagIconSrc && <PowerIcon size="100" iconSrc={tagIconSrc} />}
-          </Box>
-          <Time
-            ts={pinnedEvent.getTs()}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-          />
-        </Box>
-        {renderOptions()}
-      </Box>
-      {pinnedEvent.replyEventId && (
-        <Reply
-          room={room}
-          replyEventId={pinnedEvent.replyEventId}
-          threadRootId={pinnedEvent.threadRootId}
-          onClick={handleOpenClick}
-          getMemberPowerTag={getMemberPowerTag}
-          accessibleTagColors={accessibleTagColors}
-          legacyUsernameColor={legacyUsernameColor}
-        />
-      )}
-      {renderContent(pinnedEvent.getType(), false, pinnedEvent, displayName, getContent)}
-    </ModernLayout>
-  );
+  return children(pinnedEvent, renderOptions);
 }
 
 type RoomPinMenuProps = {
@@ -253,32 +170,43 @@ type RoomPinMenuProps = {
 };
 export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(({ requestClose }, ref) => {
   const ct = useClient();
+  const useAuthentication = useMediaAuthentication();
   const roomId = useRoom();
   const { userId } = ct.session;
-  const powerLevels = usePowerLevelsContext();
+  const direct = useIsDirectRoom();
+
+  const roomToTimeline = useObservableValue(ct.roomToTimeline);
+  const timeline = roomToTimeline.get(roomId);
+  const redacted = useObservableValueOptionally(timeline?.relations.redacted);
+  const edits = useObservableValueOptionally(timeline?.relations.edits.eventToRelations);
+
+  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
+  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const membersAPI = useRoomMembersAPI();
+  const { linkifyOpts, htmlReactParserOptions } = useMessageParserOptions(
+    roomId,
+    getRoomName,
+    membersAPI.getName
+  );
+
   const creators = useRoomCreators(roomId);
+  const powerLevels = usePowerLevelsContext();
 
   const permissions = useRoomPermissions(creators, powerLevels);
   const canPinEvent = permissions.stateEvent(StateEventType.RoomPinnedEvents, userId);
 
+  const getMemberPowerTag = useGetMemberPowerTag(creators, powerLevels);
   const creatorsTag = useRoomCreatorsTag();
-  const powerLevelTags = usePowerLevelTags(room, powerLevels);
-  const getMemberPowerTag = useGetMemberPowerTag(room, creators, powerLevels);
+  const powerLevelTags = usePowerLevelTagsContext();
 
   const theme = useTheme();
   const accessibleTagColors = useAccessiblePowerTagColors(theme.kind, creatorsTag, powerLevelTags);
 
   const pinnedEvents = useRoomPinnedEvents(roomId);
   const sortedPinnedEvent = useMemo(() => Array.from(pinnedEvents).reverse(), [pinnedEvents]);
-  const useAuthentication = useMediaAuthentication();
-  const [mediaAutoLoad] = useSetting('mediaAutoLoad');
-  const [urlPreview] = useSetting('urlPreview');
 
-  const direct = useIsDirectRoom();
-  const [legacyUsernameColor] = useSetting('legacyUsernameColor');
-
-  const [hour24Clock] = useSetting('hour24Clock');
-  const [dateFormatString] = useSetting('dateFormatString');
+  const { mediaAutoLoad, urlPreview, legacyUsernameColor, hour24Clock, dateFormatString } =
+    useSettings();
 
   const { navigateRoom } = useRoomNavigate();
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -290,158 +218,8 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(({ reque
     overscan: 4,
   });
 
-  const mentionClickHandler = useMentionClickHandler(roomId);
-  const spoilerClickHandler = useSpoilerClickHandler();
-
-  const linkifyOpts = useMemo<LinkifyOpts>(
-    () => ({
-      ...LINKIFY_OPTS,
-      render: factoryRenderLinkifyWithMention((href) =>
-        renderMatrixMention(mx, room.roomId, href, makeMentionCustomProps(mentionClickHandler))
-      ),
-    }),
-    [mx, room, mentionClickHandler]
-  );
-  const htmlReactParserOptions = useMemo<HTMLReactParserOptions>(
-    () =>
-      getReactCustomHtmlParser(mx, room.roomId, {
-        linkifyOpts,
-        useAuthentication,
-        handleSpoilerClick: spoilerClickHandler,
-        handleMentionClick: mentionClickHandler,
-      }),
-    [mx, room, linkifyOpts, mentionClickHandler, spoilerClickHandler, useAuthentication]
-  );
-
-  const renderMatrixEvent = useMatrixEventRenderer<[MatrixEvent, string, GetContentCallback]>(
-    {
-      [MessageEvent.RoomMessage]: (event, displayName, getContent) => {
-        if (event.isRedacted()) {
-          return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
-        }
-
-        return (
-          <RenderMessageContent
-            displayName={displayName}
-            msgType={event.getContent().msgtype ?? ''}
-            ts={event.getTs()}
-            getContent={getContent}
-            edited={!!event.replacingEvent()}
-            mediaAutoLoad={mediaAutoLoad}
-            urlPreview={urlPreview}
-            htmlReactParserOptions={htmlReactParserOptions}
-            linkifyOpts={linkifyOpts}
-            outlineAttachment
-          />
-        );
-      },
-      [MessageEvent.RoomMessageEncrypted]: (event, displayName) => {
-        const eventId = event.getId()!;
-        const evtTimeline = room.getTimelineForEvent(eventId);
-
-        const mEvent = evtTimeline?.getEvents().find((e) => e.getId() === eventId);
-
-        if (!mEvent || !evtTimeline) {
-          return (
-            <Box grow="Yes" direction="Column">
-              <Text size="T400" priority="300">
-                <code className={customHtmlCss.Code}>{event.getType()}</code>
-                {' event'}
-              </Text>
-            </Box>
-          );
-        }
-
-        return (
-          <EncryptedContent mEvent={mEvent}>
-            {() => {
-              if (mEvent.isRedacted()) return <RedactedContent />;
-              if (mEvent.getType() === MessageEvent.Sticker)
-                return (
-                  <MSticker
-                    content={mEvent.getContent()}
-                    renderImageContent={(props) => (
-                      <ImageContent
-                        {...props}
-                        autoPlay={mediaAutoLoad}
-                        renderImage={(p) => <Image {...p} loading="lazy" />}
-                        renderViewer={(p) => <ImageViewer {...p} />}
-                      />
-                    )}
-                  />
-                );
-              if (mEvent.getType() === MessageEvent.RoomMessage) {
-                const editedEvent = getEditedEvent(eventId, mEvent, evtTimeline.getTimelineSet());
-                const getContent = (() =>
-                  editedEvent?.getContent()['m.new_content'] ??
-                  mEvent.getContent()) as GetContentCallback;
-
-                return (
-                  <RenderMessageContent
-                    displayName={displayName}
-                    msgType={mEvent.getContent().msgtype ?? ''}
-                    ts={mEvent.getTs()}
-                    edited={!!editedEvent || !!mEvent.replacingEvent()}
-                    getContent={getContent}
-                    mediaAutoLoad={mediaAutoLoad}
-                    urlPreview={urlPreview}
-                    htmlReactParserOptions={htmlReactParserOptions}
-                    linkifyOpts={linkifyOpts}
-                  />
-                );
-              }
-              if (mEvent.getType() === MessageEvent.RoomMessageEncrypted)
-                return (
-                  <Text>
-                    <MessageNotDecryptedContent />
-                  </Text>
-                );
-              return (
-                <Text>
-                  <MessageUnsupportedContent />
-                </Text>
-              );
-            }}
-          </EncryptedContent>
-        );
-      },
-      [MessageEvent.Sticker]: (event, displayName, getContent) => {
-        if (event.isRedacted()) {
-          return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
-        }
-        return (
-          <MSticker
-            content={getContent()}
-            renderImageContent={(props) => (
-              <ImageContent
-                {...props}
-                autoPlay={mediaAutoLoad}
-                renderImage={(p) => <Image {...p} loading="lazy" />}
-                renderViewer={(p) => <ImageViewer {...p} />}
-              />
-            )}
-          />
-        );
-      },
-    },
-    undefined,
-    (event) => {
-      if (event.isRedacted()) {
-        return <RedactedContent reason={event.getUnsigned().redacted_because?.content.reason} />;
-      }
-      return (
-        <Box grow="Yes" direction="Column">
-          <Text size="T400" priority="300">
-            <code className={customHtmlCss.Code}>{event.getType()}</code>
-            {' event'}
-          </Text>
-        </Box>
-      );
-    }
-  );
-
-  const handleOpen = (roomId: string, eventId: string) => {
-    navigateRoom(roomId, eventId);
+  const handleOpen = (rId: string, eventId: string) => {
+    navigateRoom(rId, eventId);
     requestClose();
   };
 
@@ -480,22 +258,123 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(({ reque
                         key={vItem.index}
                       >
                         <SequenceCard
-                          style={{ padding: config.space.S400, borderRadius: config.radii.R300 }}
+                          style={{ padding: `${config.space.S300} ${config.space.S400}` }}
                           variant="SurfaceVariant"
                           direction="Column"
                         >
                           <PinnedMessage
-                            room={room}
+                            pinnedEvents={pinnedEvents}
+                            roomId={roomId}
                             eventId={eventId}
-                            renderContent={renderMatrixEvent}
                             onOpen={handleOpen}
                             canPinEvent={canPinEvent}
-                            getMemberPowerTag={getMemberPowerTag}
-                            accessibleTagColors={accessibleTagColors}
-                            legacyUsernameColor={legacyUsernameColor || direct}
-                            hour24Clock={hour24Clock}
-                            dateFormatString={dateFormatString}
-                          />
+                          >
+                            {(event, renderOptions) => {
+                              const displayName = membersAPI.getName(event.sender);
+
+                              const senderAvatarMxc = membersAPI.getAvatar(event.sender);
+
+                              const memberPowerTag = getMemberPowerTag(event.sender);
+                              const tagColor = memberPowerTag?.color
+                                ? accessibleTagColors?.get(memberPowerTag.color)
+                                : undefined;
+                              const tagIconSrc = memberPowerTag?.icon
+                                ? getPowerTagIconSrc(ct, useAuthentication, memberPowerTag.icon)
+                                : undefined;
+
+                              const usernameColor =
+                                legacyUsernameColor || direct ? colorMXID(event.sender) : tagColor;
+
+                              const editEvents = edits?.get(event.event_id);
+                              const editedEvent = getLatestEditEvent(event, editEvents, redacted);
+
+                              return (
+                                <ModernLayout
+                                  before={
+                                    <AvatarBase>
+                                      <Avatar size="300">
+                                        <UserAvatar
+                                          userId={event.sender}
+                                          src={
+                                            senderAvatarMxc
+                                              ? mxcToHttp(
+                                                  ct.session.baseUrl,
+                                                  senderAvatarMxc,
+                                                  useAuthentication
+                                                ).thumbnail({
+                                                  width: 96,
+                                                  height: 96,
+                                                  method: 'crop',
+                                                })
+                                              : undefined
+                                          }
+                                          alt={displayName}
+                                          renderFallback={() => (
+                                            <Icon size="200" src={Icons.User} filled />
+                                          )}
+                                        />
+                                      </Avatar>
+                                    </AvatarBase>
+                                  }
+                                >
+                                  <Box
+                                    gap="300"
+                                    justifyContent="SpaceBetween"
+                                    alignItems="Center"
+                                    grow="Yes"
+                                  >
+                                    <Box gap="200" alignItems="Baseline">
+                                      <Box alignItems="Center" gap="200">
+                                        <Username style={{ color: usernameColor }}>
+                                          <Text as="span" truncate>
+                                            <UsernameBold>{displayName}</UsernameBold>
+                                          </Text>
+                                        </Username>
+                                        {tagIconSrc && (
+                                          <PowerIcon size="100" iconSrc={tagIconSrc} />
+                                        )}
+                                      </Box>
+                                      <Time
+                                        ts={event.origin_server_ts}
+                                        hour24Clock={hour24Clock}
+                                        dateFormatString={dateFormatString}
+                                      />
+                                    </Box>
+                                    <Box shrink="No" gap="200" alignItems="Center">
+                                      {renderOptions()}
+                                    </Box>
+                                  </Box>
+                                  {redacted?.has(event.event_id) ? (
+                                    <RedactedContent />
+                                  ) : (
+                                    <MessageContent
+                                      event={event}
+                                      editedEvent={editedEvent}
+                                      roomId={roomId}
+                                      decryptionManager={ct.decryption}
+                                    >
+                                      {(contentEvent) => (
+                                        <RenderMessageContent
+                                          displayName={membersAPI.getName(event.sender)}
+                                          eventType={contentEvent.type}
+                                          ts={event.origin_server_ts}
+                                          edited={!!editedEvent}
+                                          content={
+                                            rContent.newContent(contentEvent.content) ??
+                                            contentEvent.content
+                                          }
+                                          mediaAutoLoad={mediaAutoLoad}
+                                          urlPreview={urlPreview}
+                                          htmlReactParserOptions={htmlReactParserOptions}
+                                          linkifyOpts={linkifyOpts}
+                                        />
+                                      )}
+                                    </MessageContent>
+                                  )}
+                                </ModernLayout>
+                              );
+                            }}
+                          </PinnedMessage>
                         </SequenceCard>
                       </VirtualTile>
                     );
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index e2c68bbf..732b182b 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -284,7 +284,7 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
   const renderMatrixEvent = (event: MessageEventWithoutRoomId, item: number, collapse: boolean) => {
     const reactionEvents = reactions.get(event.event_id)?.filter((r) => !redacted.has(r.event_id));
     const editEvents = edits.get(event.event_id);
-    const editedEvent = editEvents && getLatestEditEvent(event.sender, editEvents, redacted);
+    const editedEvent = getLatestEditEvent(event, editEvents, redacted);
     const highlighted = focusItem?.index === item && focusItem.highlight;
 
     const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
diff --git a/src/app/hooks/useRoomEvent.ts b/src/app/hooks/useRoomEvent.ts
index 93fdf02e..564ef20f 100644
--- a/src/app/hooks/useRoomEvent.ts
+++ b/src/app/hooks/useRoomEvent.ts
@@ -26,7 +26,7 @@ const useFetchEvent = (roomId: string, eventId: string) => {
  *
  * @param room
  * @param eventId
- * @returns `MatrixEvent`, `undefined` means loading, `null` means failure
+ * @returns `MessageEvent`, `undefined` means loading, `null` means failure
  */
 export const useRoomEvent = (
   roomId: string,
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index ef4d19e6..dd1b6231 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -326,7 +326,7 @@ function RoomNotifications({
         const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
 
         const editEvents = edits?.get(event.event_id);
-        const editedEvent = editEvents && getLatestEditEvent(event.sender, editEvents, redacted);
+        const editedEvent = getLatestEditEvent(event, editEvents, redacted);
 
         return (
           <SequenceCard
diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts
index 158905dc..1dcdfa3f 100644
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -28,6 +28,7 @@ import { JoinRoomMemberObject } from '../../client/storage/collections';
 import { MentionsContent, ReactionContent } from '../../types/matrix/common';
 import { ClientContext } from '../../client/context';
 import { rContent, rInReplyTo, rRelatesTo } from '../../client/reader';
+import { replaced } from '../../client/room/relations';
 
 export const getStateEvent = (
   room: Room,
@@ -461,23 +462,27 @@ export const getReactionGroups = (
 };
 
 export const getLatestEditEvent = (
-  sender: string,
-  events: MessageEventWithoutRoomId[],
-  redacted: Set<string> | undefined
+  event: MessageEventWithoutRoomId,
+  events?: MessageEventWithoutRoomId[],
+  redacted?: Set<string>
 ): MessageEventWithoutRoomId | undefined => {
-  let event: MessageEventWithoutRoomId | undefined;
-  events.forEach((e) => {
-    if (redacted?.has(e.event_id) || sender !== e.sender) return;
-    if (!event) {
-      event = e;
+  let replacement: MessageEventWithoutRoomId | undefined;
+  const pickLatest = (e: MessageEventWithoutRoomId) => {
+    if (redacted?.has(e.event_id) || event.sender !== e.sender) return;
+    if (!replacement) {
+      replacement = e;
       return;
     }
-    if (event.origin_server_ts < e.origin_server_ts) {
-      event = e;
+    if (replacement.origin_server_ts < e.origin_server_ts) {
+      replacement = e;
     }
-  });
+  };
 
-  return event;
+  const aggregated = replaced(event);
+  if (aggregated) pickLatest(aggregated);
+  events?.forEach(pickLatest);
+
+  return replacement;
 };
 
 export const getReplyId = (content: object): string | undefined =>
diff --git a/src/types/matrix/room.ts b/src/types/matrix/room.ts
index 8ffafd49..3984a988 100644
--- a/src/types/matrix/room.ts
+++ b/src/types/matrix/room.ts
@@ -189,3 +189,7 @@ export type RoomCanonicalAliasContent = {
   alias?: string;
   alt_aliases?: string[];
 };
+
+export type RoomPinnedEventsContent = {
+  pinned: string[];
+};

From 47ac3cb762473da309d1d34a31433602a952fa1d Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 26 Aug 2026 22:15:06 +0530
Subject: [PATCH 114/158] fix reactions with empty content appears in timeline

---
 src/client/room/relations/RelationsProcessor.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/client/room/relations/RelationsProcessor.ts b/src/client/room/relations/RelationsProcessor.ts
index d25b55e9..7eeb4478 100644
--- a/src/client/room/relations/RelationsProcessor.ts
+++ b/src/client/room/relations/RelationsProcessor.ts
@@ -70,12 +70,16 @@ export class RelationsProcessor implements Disposable {
         editEvents.push(event);
       }
 
+      // Handle reactions events
+      if (event.type === MessageEvent.Reaction) {
+        if (relation(event)) {
+          reactionEvents.push(event);
+        }
+        return;
+      }
+
       // Handle relation events
       if (relation(event)) {
-        if (event.type === MessageEvent.Reaction) {
-          reactionEvents.push(event);
-          return;
-        }
         if (replacement(event)) {
           editEvents.push(event);
           return;

From 1d58c7a68d378ba22dffe9f7f7cc122e1ec4970c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 26 Aug 2026 22:30:13 +0530
Subject: [PATCH 115/158] render message with no content as empty message

---
 src/app/components/RenderMessageContent.tsx     | 5 +++++
 src/app/components/RenderReplyContent.tsx       | 5 +++++
 src/app/components/message/MsgTypeRenderers.tsx | 9 +++++++++
 3 files changed, 19 insertions(+)

diff --git a/src/app/components/RenderMessageContent.tsx b/src/app/components/RenderMessageContent.tsx
index c9ab38d2..a73906f2 100644
--- a/src/app/components/RenderMessageContent.tsx
+++ b/src/app/components/RenderMessageContent.tsx
@@ -3,6 +3,7 @@ import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
 import { config } from 'folds';
 import {
+  EmptyContent,
   MAudio,
   MEmote,
   MFile,
@@ -164,6 +165,10 @@ export function RenderMessageContent({
     return <MLocation content={content} />;
   }
 
+  if (Object.keys(content).length === 0) {
+    return <EmptyContent />;
+  }
+
   return (
     <MText
       edited={edited}
diff --git a/src/app/components/RenderReplyContent.tsx b/src/app/components/RenderReplyContent.tsx
index 0643bccc..8a151bb5 100644
--- a/src/app/components/RenderReplyContent.tsx
+++ b/src/app/components/RenderReplyContent.tsx
@@ -13,6 +13,7 @@ import {
   ReplyMNotice,
   ReplyMText,
   ReplyMLocation,
+  EmptyContent,
 } from './message';
 import { MsgType } from '../../types/matrix/common';
 import { rContent } from '../../client/reader';
@@ -124,6 +125,10 @@ export function RenderReplyContent({
     return <ReplyMLocation content={content} />;
   }
 
+  if (Object.keys(content).length === 0) {
+    return <EmptyContent size="T300" />;
+  }
+
   return (
     <ReplyMText
       edited={edited}
diff --git a/src/app/components/message/MsgTypeRenderers.tsx b/src/app/components/message/MsgTypeRenderers.tsx
index e9ebe841..27db81d2 100644
--- a/src/app/components/message/MsgTypeRenderers.tsx
+++ b/src/app/components/message/MsgTypeRenderers.tsx
@@ -16,6 +16,7 @@ import {
   UnsupportedMessageEventType,
   MessageUnsupportedContent,
   VideoContent,
+  MessageEmptyContent,
 } from './content';
 import { FALLBACK_MIMETYPE, getBlobSafeMimeType } from '../../utils/mimeTypes';
 import { parseGeoUri, scaleYDimension } from '../../utils/common';
@@ -70,6 +71,14 @@ export function BrokenContent({ size }: TextProps) {
   );
 }
 
+export function EmptyContent({ size }: TextProps) {
+  return (
+    <Text size={size}>
+      <MessageEmptyContent />
+    </Text>
+  );
+}
+
 type UrlPreviewProps = {
   body: string;
   ts: number;

From 138561f45b873ce8ba89d9c6d5df460931873fcd Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 26 Aug 2026 22:38:12 +0530
Subject: [PATCH 116/158] check aggregated redaction on notification, search
 and pin events rendering

---
 src/app/features/message-search/SearchResultGroup.tsx |  7 ++++---
 src/app/features/room/room-pin-menu/RoomPinMenu.tsx   | 11 ++++++++---
 src/app/pages/client/inbox/Notifications.tsx          |  7 ++++---
 3 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/app/features/message-search/SearchResultGroup.tsx b/src/app/features/message-search/SearchResultGroup.tsx
index 8a59e00c..593146fd 100644
--- a/src/app/features/message-search/SearchResultGroup.tsx
+++ b/src/app/features/message-search/SearchResultGroup.tsx
@@ -53,6 +53,7 @@ import { useObservableValueOptionally } from '../../hooks/useObservableValue';
 import { useMessageParserOptions } from '../../hooks/useMessageParserOptions';
 import { MessageContent } from '../../components/MessageContent';
 import { rContent } from '../../../client/reader';
+import { redacted } from '../../../client/room/relations';
 
 type SearchGroupMessagesProps = {
   roomId: string;
@@ -85,7 +86,7 @@ export function SearchGroupMessages({
   const useAuthentication = useMediaAuthentication();
   const highlightRegex = useMemo(() => makeHighlightRegex(highlights), [highlights]);
 
-  const redacted = useObservableValueOptionally(timeline?.relations.redacted);
+  const redactedSet = useObservableValueOptionally(timeline?.relations.redacted);
   const edits = useObservableValueOptionally(timeline?.relations.edits.eventToRelations);
 
   const creators = useRoomCreators(roomId);
@@ -130,7 +131,7 @@ export function SearchGroupMessages({
         const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
 
         const editEvents = edits?.get(event.event_id);
-        const editedEvent = getLatestEditEvent(event, editEvents, redacted);
+        const editedEvent = getLatestEditEvent(event, editEvents, redactedSet);
 
         return (
           <SequenceCard
@@ -188,7 +189,7 @@ export function SearchGroupMessages({
                   </Chip>
                 </Box>
               </Box>
-              {redacted?.has(event.event_id) ? (
+              {redactedSet?.has(event.event_id) || redacted(event) ? (
                 <RedactedContent />
               ) : (
                 <MessageContent
diff --git a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
index c0019cdb..8106eafb 100644
--- a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
+++ b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
@@ -76,6 +76,7 @@ import { MessageContent } from '../../../components/MessageContent';
 import { RenderMessageContent } from '../../../components/RenderMessageContent';
 import { rContent } from '../../../../client/reader';
 import { mxcToHttp } from '../../../../client/mxcToHttp';
+import { redacted } from '../../../../client/room/relations';
 
 type PinnedMessageProps = {
   pinnedEvents: string[];
@@ -177,7 +178,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(({ reque
 
   const roomToTimeline = useObservableValue(ct.roomToTimeline);
   const timeline = roomToTimeline.get(roomId);
-  const redacted = useObservableValueOptionally(timeline?.relations.redacted);
+  const redactedSet = useObservableValueOptionally(timeline?.relations.redacted);
   const edits = useObservableValueOptionally(timeline?.relations.edits.eventToRelations);
 
   const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
@@ -286,7 +287,11 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(({ reque
                                 legacyUsernameColor || direct ? colorMXID(event.sender) : tagColor;
 
                               const editEvents = edits?.get(event.event_id);
-                              const editedEvent = getLatestEditEvent(event, editEvents, redacted);
+                              const editedEvent = getLatestEditEvent(
+                                event,
+                                editEvents,
+                                redactedSet
+                              );
 
                               return (
                                 <ModernLayout
@@ -344,7 +349,7 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(({ reque
                                       {renderOptions()}
                                     </Box>
                                   </Box>
-                                  {redacted?.has(event.event_id) ? (
+                                  {redactedSet?.has(event.event_id) || redacted(event) ? (
                                     <RedactedContent />
                                   ) : (
                                     <MessageContent
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index dd1b6231..09763ef5 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -100,6 +100,7 @@ import { MessageContent } from '../../../components/MessageContent';
 import { getLatestEditEvent } from '../../../utils/room';
 import { RenderMessageContent } from '../../../components/RenderMessageContent';
 import { rContent } from '../../../../client/reader';
+import { redacted } from '../../../../client/room/relations';
 
 type RoomNotificationsGroup = {
   roomId: string;
@@ -282,7 +283,7 @@ function RoomNotifications({
   const membersAPI = useRoomMembersAPI();
   const useAuthentication = useMediaAuthentication();
 
-  const redacted = useObservableValueOptionally(timeline?.relations.redacted);
+  const redactedSet = useObservableValueOptionally(timeline?.relations.redacted);
   const edits = useObservableValueOptionally(timeline?.relations.edits.eventToRelations);
 
   const creators = useRoomCreators(roomId);
@@ -326,7 +327,7 @@ function RoomNotifications({
         const usernameColor = legacyUsernameColor ? colorMXID(event.sender) : tagColor;
 
         const editEvents = edits?.get(event.event_id);
-        const editedEvent = getLatestEditEvent(event, editEvents, redacted);
+        const editedEvent = getLatestEditEvent(event, editEvents, redactedSet);
 
         return (
           <SequenceCard
@@ -384,7 +385,7 @@ function RoomNotifications({
                   </Chip>
                 </Box>
               </Box>
-              {redacted?.has(event.event_id) ? (
+              {redactedSet?.has(event.event_id) || redacted(event) ? (
                 <RedactedContent />
               ) : (
                 <MessageContent

From ba35672cba8db733667063ea5d3eb9dd7780ae5a Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 27 Aug 2026 12:30:16 +0530
Subject: [PATCH 117/158] recover from room avatar error on visibility change

---
 src/app/components/room-avatar/RoomAvatar.tsx | 47 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 2 deletions(-)

diff --git a/src/app/components/room-avatar/RoomAvatar.tsx b/src/app/components/room-avatar/RoomAvatar.tsx
index d586a578..51b51d86 100644
--- a/src/app/components/room-avatar/RoomAvatar.tsx
+++ b/src/app/components/room-avatar/RoomAvatar.tsx
@@ -1,10 +1,45 @@
 import { AvatarFallback, AvatarImage, Icon, Icons, color } from 'folds';
-import React, { ComponentProps, ReactEventHandler, ReactNode, forwardRef, useState } from 'react';
+import React, {
+  ComponentProps,
+  ReactEventHandler,
+  ReactNode,
+  forwardRef,
+  useCallback,
+  useState,
+} from 'react';
 import classNames from 'classnames';
 import * as css from './RoomAvatar.css';
 import { getRoomIconSrc } from '../../utils/room';
 import colorMXID from '../../../util/colorMXID';
 import { JoinRule } from '../../../types/matrix/room';
+import { useDocumentVisibilityChange } from '../../hooks/useDocumentVisibilityChange';
+import { useDocumentFocusChange } from '../../hooks/useDocumentFocusChange';
+
+type RoomAvatarErrorProps = {
+  roomId: string;
+  setError: (error: boolean) => void;
+  children: ReactNode;
+};
+function RoomAvatarError({ roomId, setError, children }: RoomAvatarErrorProps) {
+  const handleVisibilityChange = useCallback(
+    (visible: boolean) => {
+      if (visible) setError(false);
+    },
+    [setError]
+  );
+
+  useDocumentVisibilityChange(handleVisibilityChange);
+  useDocumentFocusChange(handleVisibilityChange);
+
+  return (
+    <AvatarFallback
+      style={{ backgroundColor: colorMXID(roomId ?? ''), color: color.Surface.Container }}
+      className={css.RoomAvatar}
+    >
+      {children}
+    </AvatarFallback>
+  );
+}
 
 type RoomAvatarProps = {
   roomId: string;
@@ -19,7 +54,7 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
     evt.currentTarget.setAttribute('data-image-loaded', 'true');
   };
 
-  if (!src || error) {
+  if (!src) {
     return (
       <AvatarFallback
         style={{ backgroundColor: colorMXID(roomId ?? ''), color: color.Surface.Container }}
@@ -30,6 +65,14 @@ export function RoomAvatar({ roomId, src, alt, renderFallback }: RoomAvatarProps
     );
   }
 
+  if (error) {
+    return (
+      <RoomAvatarError roomId={roomId} setError={setError}>
+        {renderFallback()}
+      </RoomAvatarError>
+    );
+  }
+
   return (
     <AvatarImage
       className={classNames(css.RoomAvatar, css.RoomAvatarImg)}

From 6652e5558462188c8b2e8e74692e8cd5250fc5d5 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Thu, 27 Aug 2026 23:22:01 +0530
Subject: [PATCH 118/158] move message editor to new sdk

---
 src/app/features/room/RoomTimeline.tsx        |  39 ++--
 .../room/hooks/useSendEditedMessage.ts        | 178 +++++++++++++++++
 src/app/features/room/message/Message.tsx     |  25 +--
 .../features/room/message/MessageEditor.tsx   | 185 ++++++------------
 .../room/thread-view/TimelineView.tsx         |  39 ++--
 5 files changed, 291 insertions(+), 175 deletions(-)
 create mode 100644 src/app/features/room/hooks/useSendEditedMessage.ts

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 85bf49e5..824d8ba1 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -74,6 +74,7 @@ import { OutboxView } from './OutboxView';
 import { useUserReadReceipt } from '../../hooks/useReadReceipt';
 import { useMessageParserOptions } from '../../hooks/useMessageParserOptions';
 import { MessageContent } from '../../components/MessageContent';
+import { MessageEditor } from './message/MessageEditor';
 
 type RoomTimelineProps = {
   eventId?: string;
@@ -433,20 +434,30 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
             roomId={roomId}
             decryptionManager={ct.decryption}
           >
-            {(contentEvent) => (
-              <RenderMessageContent
-                displayName={membersAPI.getName(event.sender)}
-                eventType={contentEvent.type}
-                ts={event.origin_server_ts}
-                edited={!!editedEvent}
-                content={rContent.newContent(contentEvent.content) ?? contentEvent.content}
-                mediaAutoLoad={mediaAutoLoad}
-                urlPreview={showUrlPreview}
-                htmlReactParserOptions={htmlReactParserOptions}
-                linkifyOpts={linkifyOpts}
-                outlineAttachment={messageLayout === MessageLayout.Bubble}
-              />
-            )}
+            {(contentEvent) =>
+              editId === event.event_id ? (
+                <MessageEditor
+                  style={{ maxWidth: '100%', width: '100vw' }}
+                  roomId={roomId}
+                  event={contentEvent}
+                  imagePackRooms={imagePackRooms}
+                  onCancel={handleEdit}
+                />
+              ) : (
+                <RenderMessageContent
+                  displayName={membersAPI.getName(event.sender)}
+                  eventType={contentEvent.type}
+                  ts={event.origin_server_ts}
+                  edited={!!editedEvent}
+                  content={rContent.newContent(contentEvent.content) ?? contentEvent.content}
+                  mediaAutoLoad={mediaAutoLoad}
+                  urlPreview={showUrlPreview}
+                  htmlReactParserOptions={htmlReactParserOptions}
+                  linkifyOpts={linkifyOpts}
+                  outlineAttachment={messageLayout === MessageLayout.Bubble}
+                />
+              )
+            }
           </MessageContent>
         )}
         {reactionJSX}
diff --git a/src/app/features/room/hooks/useSendEditedMessage.ts b/src/app/features/room/hooks/useSendEditedMessage.ts
new file mode 100644
index 00000000..80c20c7b
--- /dev/null
+++ b/src/app/features/room/hooks/useSendEditedMessage.ts
@@ -0,0 +1,178 @@
+import { useCallback, useState } from 'react';
+import { Editor } from 'slate';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { useClient } from '../../../hooks/useClient';
+import { useRoom } from '../../../hooks/useRoom';
+import { useEnsureRoomEncryptionSession } from './useEnsureRoomEncryptionSession';
+import {
+  EventSenderIdle,
+  LocalEvent,
+  LocalEventSender,
+  LocalMessage,
+} from '../../../../client/room/local-event';
+import { MessageEvent } from '../../../../types/matrix/room';
+import {
+  MentionsContent,
+  MessageContent,
+  MsgType,
+  RelationType,
+} from '../../../../types/matrix/common';
+import { rContent } from '../../../../client/reader';
+import {
+  customHtmlEqualsPlainText,
+  getMentions,
+  toMatrixCustomHTML,
+  toPlainText,
+  trimCustomHtml,
+} from '../../../components/editor';
+import { useSetting } from '../../../state/hooks/settings';
+import { getMentionContent, trimReplyFromFormattedBody } from '../../../utils/room';
+import { useAsyncCallback } from '../../../hooks/useAsyncCallback';
+
+const useSendLocalMessage = () => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const prepareEncryptionSession = useEnsureRoomEncryptionSession();
+
+  const [localEventSender, setLocalEventSender] = useState<LocalEventSender>();
+
+  const sendLocalMessage = useCallback(
+    async (localMessage: LocalMessage) => {
+      let wireMessage = localMessage.clone();
+
+      if (ct.encryptedRooms.read.has(roomId)) {
+        await prepareEncryptionSession();
+        const encStr = await ct.machine.roomEncryption.encryptMessageEvent(
+          roomId,
+          localMessage.type,
+          localMessage.content
+        );
+        const encContent = JSON.parse(encStr);
+
+        wireMessage = new LocalMessage(roomId, MessageEvent.RoomMessageEncrypted, encContent);
+      }
+
+      const txnId = ct.getTxnId();
+
+      const localEvent = new LocalEvent(localMessage, wireMessage, txnId, Date.now());
+
+      const sender = new LocalEventSender(localEvent, ct.requestAuthJSON);
+
+      if (sender.state.read instanceof EventSenderIdle) {
+        sender.state.read.send();
+      }
+      setLocalEventSender(sender);
+    },
+    [ct, roomId, prepareEncryptionSession]
+  );
+
+  return {
+    localEventSender,
+    sendLocalMessage,
+  };
+};
+
+export const useSendEditedMessage = (editor: Editor, event: MessageEventWithoutRoomId) => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const [isMarkdown] = useSetting('isMarkdown');
+  const { localEventSender, sendLocalMessage } = useSendLocalMessage();
+
+  const getPrevContent = useCallback((): {
+    body?: string;
+    formattedBody?: string;
+    mentions?: MentionsContent;
+  } => {
+    const content = rContent.newContent(event.content) ?? event.content;
+    const body = rContent.body(content);
+    const formattedBody = rContent.formattedBody(content);
+
+    const mentions: MentionsContent | undefined = rContent.mentions(content);
+
+    return {
+      body,
+      formattedBody,
+      mentions,
+    };
+  }, [event]);
+
+  const [saveState, save] = useAsyncCallback(
+    useCallback(
+      async (onCancel: () => void) => {
+        const plainText = toPlainText(editor.children, isMarkdown).trim();
+        const customHtml = trimCustomHtml(
+          toMatrixCustomHTML(editor.children, {
+            allowTextFormatting: true,
+            allowBlockMarkdown: isMarkdown,
+            allowInlineMarkdown: isMarkdown,
+          })
+        );
+
+        const prevContent = getPrevContent();
+
+        if (plainText === '') {
+          onCancel();
+          return undefined;
+        }
+        if (prevContent.body) {
+          if (
+            prevContent.formattedBody &&
+            trimReplyFromFormattedBody(prevContent.formattedBody) === customHtml
+          ) {
+            onCancel();
+            return undefined;
+          }
+          if (
+            !prevContent.formattedBody &&
+            prevContent.body === plainText &&
+            customHtmlEqualsPlainText(customHtml, plainText)
+          ) {
+            onCancel();
+            return undefined;
+          }
+        }
+
+        const newContent: MessageContent = {
+          msgtype: (rContent.msgtype(event.content) as MsgType) ?? MsgType.Text,
+          body: plainText,
+        };
+
+        const mentionData = getMentions(ct, editor);
+
+        prevContent.mentions?.user_ids?.forEach((prevMentionId) => {
+          mentionData.users.add(prevMentionId);
+        });
+
+        const mMentions = getMentionContent(Array.from(mentionData.users), mentionData.room);
+        newContent['m.mentions'] = mMentions;
+
+        if (!customHtmlEqualsPlainText(customHtml, plainText)) {
+          newContent.format = 'org.matrix.custom.html';
+          newContent.formatted_body = customHtml;
+        }
+
+        const content: MessageContent & {
+          'm.new_content': MessageContent;
+        } = {
+          ...newContent,
+          body: `* ${plainText}`,
+          'm.new_content': newContent,
+          'm.relates_to': {
+            event_id: event.event_id,
+            rel_type: RelationType.Replace,
+          },
+        };
+
+        const messageEvent = new LocalMessage(roomId, event.type, content);
+        return sendLocalMessage(messageEvent);
+      },
+      [ct, roomId, editor, event, isMarkdown, getPrevContent, sendLocalMessage]
+    )
+  );
+
+  return {
+    saveState,
+    localEventSender,
+    save,
+  };
+};
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 736a66f4..dc809a2c 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -61,7 +61,6 @@ import { TextViewer } from '../../../components/text-viewer';
 import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
 import { EmojiBoard } from '../../../components/emoji-board';
 import { ReactionViewer } from '../reaction-viewer';
-import { MessageEditor } from './MessageEditor';
 import { UserAvatar } from '../../../components/user-avatar';
 import { copyToClipboard } from '../../../utils/dom';
 import { stopPropagation } from '../../../utils/keyboard';
@@ -890,7 +889,6 @@ export const Message = as<'div', MessageProps>(
     ref
   ) => {
     const ct = useClient();
-    const roomId = useRoom();
     const senderId = event.sender;
 
     const [hover, setHover] = useState(false);
@@ -902,25 +900,6 @@ export const Message = as<'div', MessageProps>(
     const senderDisplayName = membersAPI.getName(senderId);
     const senderAvatarMxc = membersAPI.getAvatar(senderId);
 
-    const msgContentJSX = (
-      <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }}>
-        {edit && onEditId ? (
-          <MessageEditor
-            style={{
-              maxWidth: '100%',
-              width: '100vw',
-            }}
-            roomId={roomId}
-            event={event}
-            imagePackRooms={imagePackRooms}
-            onCancel={() => onEditId()}
-          />
-        ) : (
-          children
-        )}
-      </Box>
-    );
-
     const handleContextMenu: MouseEventHandler<HTMLDivElement> = (evt) => {
       if (evt.altKey || !window.getSelection()?.isCollapsed || edit) return;
       const tag = (evt.target as any).tagName;
@@ -1241,7 +1220,9 @@ export const Message = as<'div', MessageProps>(
           messageLayout={messageLayout}
           onContextMenu={handleContextMenu}
         >
-          {msgContentJSX}
+          <Box direction="Column" alignSelf="Start" style={{ maxWidth: '100%' }}>
+            {children}
+          </Box>
         </RenderMessageLayout>
       </MessageBase>
     );
diff --git a/src/app/features/room/message/MessageEditor.tsx b/src/app/features/room/message/MessageEditor.tsx
index 44f64f22..2d8a76f4 100644
--- a/src/app/features/room/message/MessageEditor.tsx
+++ b/src/app/features/room/message/MessageEditor.tsx
@@ -3,6 +3,7 @@ import React, {
   MouseEventHandler,
   useCallback,
   useEffect,
+  useMemo,
   useState,
 } from 'react';
 import {
@@ -17,9 +18,9 @@ import {
   Spinner,
   Text,
   as,
+  color,
   config,
 } from 'folds';
-import { Editor, Transforms } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { isKeyHotkey } from 'is-hotkey';
@@ -33,27 +34,27 @@ import {
   Toolbar,
   UserMentionAutocomplete,
   createEmoticonElement,
-  customHtmlEqualsPlainText,
   getAutocompleteQuery,
   getPrevWorldRange,
   htmlToEditorInput,
   moveCursor,
   plainToEditorInput,
-  toMatrixCustomHTML,
-  toPlainText,
-  trimCustomHtml,
   useEditor,
-  getMentions,
 } from '../../../components/editor';
 import { useSetting } from '../../../state/hooks/settings';
 import { UseStateProvider } from '../../../components/UseStateProvider';
 import { EmojiBoard } from '../../../components/emoji-board';
-import { AsyncStatus, useAsyncCallback } from '../../../hooks/useAsyncCallback';
-import { getEditedEvent, getMentionContent, trimReplyFromFormattedBody } from '../../../utils/room';
+import { AsyncStatus } from '../../../hooks/useAsyncCallback';
 import { mobileOrTablet } from '../../../utils/user-agent';
 import { useComposingCheck } from '../../../hooks/useComposingCheck';
-import { useClient } from '../../../hooks/useClient';
-import { MentionsContent, MessageContent, RelationType } from '../../../../types/matrix/common';
+import { useSendEditedMessage } from '../hooks/useSendEditedMessage';
+import { useObservableValueOptionally } from '../../../hooks/useObservableValue';
+import { rContent } from '../../../../client/reader';
+import {
+  EventSenderError,
+  EventSenderPending,
+  EventSenderSuccess,
+} from '../../../../client/room/local-event';
 
 type MessageEditorProps = {
   roomId: string;
@@ -63,7 +64,6 @@ type MessageEditorProps = {
 };
 export const MessageEditor = as<'div', MessageEditorProps>(
   ({ roomId, event, imagePackRooms, onCancel, ...props }, ref) => {
-    const ct = useClient();
     const editor = useEditor();
     const [enterForNewline] = useSetting('enterForNewline');
     const [globalToolbar] = useSetting('editorToolbar');
@@ -74,96 +74,17 @@ export const MessageEditor = as<'div', MessageEditorProps>(
     const [autocompleteQuery, setAutocompleteQuery] =
       useState<AutocompleteQuery<AutocompletePrefix>>();
 
-    const getPrevBodyAndFormattedBody = useCallback((): [
-      string | undefined,
-      string | undefined,
-      MentionsContent | undefined
-    ] => {
-      const evtId = event.event_id;
-      const evtTimeline = room.getTimelineForEvent(evtId);
-      const editedEvent =
-        evtTimeline && getEditedEvent(evtId, mEvent, evtTimeline.getTimelineSet());
+    const { saveState, localEventSender, save } = useSendEditedMessage(editor, event);
 
-      const content: IContent = editedEvent?.getContent()['m.new_content'] ?? mEvent.getContent();
-      const { body, formatted_body: customHtml }: Record<string, unknown> = content;
-
-      const mMentions: IMentions | undefined = content['m.mentions'];
-
-      return [
-        typeof body === 'string' ? body : undefined,
-        typeof customHtml === 'string' ? customHtml : undefined,
-        mMentions,
-      ];
-    }, [roomId, event]);
-
-    const [saveState, save] = useAsyncCallback(
-      useCallback(async () => {
-        const plainText = toPlainText(editor.children, isMarkdown).trim();
-        const customHtml = trimCustomHtml(
-          toMatrixCustomHTML(editor.children, {
-            allowTextFormatting: true,
-            allowBlockMarkdown: isMarkdown,
-            allowInlineMarkdown: isMarkdown,
-          })
-        );
-
-        const [prevBody, prevCustomHtml, prevMentions] = getPrevBodyAndFormattedBody();
-
-        if (plainText === '') return undefined;
-        if (prevBody) {
-          if (prevCustomHtml && trimReplyFromFormattedBody(prevCustomHtml) === customHtml) {
-            return undefined;
-          }
-          if (
-            !prevCustomHtml &&
-            prevBody === plainText &&
-            customHtmlEqualsPlainText(customHtml, plainText)
-          ) {
-            return undefined;
-          }
-        }
-
-        const prevContent = event.content as MessageContent;
-        const newContent: MessageContent = {
-          msgtype: prevContent.msgtype,
-          body: plainText,
-        };
-
-        const mentionData = getMentions(ct, editor);
-
-        prevMentions?.user_ids?.forEach((prevMentionId) => {
-          mentionData.users.add(prevMentionId);
-        });
-
-        const mMentions = getMentionContent(Array.from(mentionData.users), mentionData.room);
-        newContent['m.mentions'] = mMentions;
-
-        if (!customHtmlEqualsPlainText(customHtml, plainText)) {
-          newContent.format = 'org.matrix.custom.html';
-          newContent.formatted_body = customHtml;
-        }
-
-        const content: MessageContent = {
-          ...newContent,
-          body: `* ${plainText}`,
-          'm.new_content': newContent,
-          'm.relates_to': {
-            event_id: event.event_id,
-            rel_type: RelationType.Replace,
-          },
-        };
-
-        // TODO: send message
-        // return mx.sendMessage(roomId, content);
-        return Promise.resolve();
-      }, [ct, editor, event, isMarkdown, getPrevBodyAndFormattedBody])
-    );
+    const senderState = useObservableValueOptionally(localEventSender?.state);
+    const saving =
+      saveState.status === AsyncStatus.Loading || senderState instanceof EventSenderPending;
 
     const handleSave = useCallback(() => {
       if (saveState.status !== AsyncStatus.Loading) {
-        save();
+        save(onCancel);
       }
-    }, [saveState, save]);
+    }, [saveState, save, onCancel]);
 
     const handleKeyDown: KeyboardEventHandler = useCallback(
       (evt) => {
@@ -209,27 +130,27 @@ export const MessageEditor = as<'div', MessageEditorProps>(
     };
 
     useEffect(() => {
-      const [body, customHtml] = getPrevBodyAndFormattedBody();
+      if (!mobileOrTablet()) ReactEditor.focus(editor);
+    }, [editor]);
+
+    const initialEditorValue = useMemo(() => {
+      const prevContent = rContent.newContent(event.content) ?? event.content;
+      const customHtml = rContent.formattedBody(prevContent);
+      const body = rContent.body(prevContent);
 
       const initialValue =
         typeof customHtml === 'string'
           ? htmlToEditorInput(customHtml, isMarkdown)
           : plainToEditorInput(typeof body === 'string' ? body : '', isMarkdown);
 
-      Transforms.select(editor, {
-        anchor: Editor.start(editor, []),
-        focus: Editor.end(editor, []),
-      });
-
-      editor.insertFragment(initialValue);
-      if (!mobileOrTablet()) ReactEditor.focus(editor);
-    }, [editor, getPrevBodyAndFormattedBody, isMarkdown]);
+      return initialValue;
+    }, [event, isMarkdown]);
 
     useEffect(() => {
-      if (saveState.status === AsyncStatus.Success) {
+      if (senderState instanceof EventSenderSuccess) {
         onCancel();
       }
-    }, [saveState, onCancel]);
+    }, [senderState, onCancel]);
 
     return (
       <div {...props} ref={ref}>
@@ -259,6 +180,7 @@ export const MessageEditor = as<'div', MessageEditorProps>(
         )}
         <CustomEditor
           editor={editor}
+          initialValue={initialEditorValue}
           placeholder="Edit message..."
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
@@ -270,24 +192,37 @@ export const MessageEditor = as<'div', MessageEditorProps>(
                 justifyContent="SpaceBetween"
                 gap="100"
               >
-                <Box gap="Inherit">
-                  <Chip
-                    onClick={handleSave}
-                    variant="Primary"
-                    radii="Pill"
-                    disabled={saveState.status === AsyncStatus.Loading}
-                    outlined
-                    before={
-                      saveState.status === AsyncStatus.Loading ? (
-                        <Spinner variant="Primary" fill="Soft" size="100" />
-                      ) : undefined
-                    }
-                  >
-                    <Text size="B300">Save</Text>
-                  </Chip>
-                  <Chip onClick={onCancel} variant="SurfaceVariant" radii="Pill">
-                    <Text size="B300">Cancel</Text>
-                  </Chip>
+                <Box direction="Column" gap="200">
+                  {senderState instanceof EventSenderError && (
+                    <Text size="T200" style={{ color: color.Critical.Main }}>
+                      {senderState.error?.data.error ??
+                        (senderState.cause instanceof Error
+                          ? senderState.cause.message
+                          : 'Unknown Error')}
+                    </Text>
+                  )}
+                  {saveState.status === AsyncStatus.Error && (
+                    <Text size="T200" style={{ color: color.Critical.Main }}>
+                      {saveState.error instanceof Error ? saveState.error.message : 'Unknown Error'}
+                    </Text>
+                  )}
+                  <Box>
+                    <Chip
+                      onClick={handleSave}
+                      variant="Primary"
+                      radii="Pill"
+                      disabled={saving}
+                      outlined
+                      before={
+                        saving ? <Spinner variant="Primary" fill="Soft" size="100" /> : undefined
+                      }
+                    >
+                      <Text size="B300">Save</Text>
+                    </Chip>
+                    <Chip onClick={onCancel} variant="SurfaceVariant" radii="Pill">
+                      <Text size="B300">Cancel</Text>
+                    </Chip>
+                  </Box>
                 </Box>
                 <Box gap="Inherit">
                   <IconButton
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index 732b182b..61da69f8 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -72,6 +72,7 @@ import { OutboxView } from '../OutboxView';
 import { useUserReadReceipt } from '../../../hooks/useReadReceipt';
 import { useMessageParserOptions } from '../../../hooks/useMessageParserOptions';
 import { MessageContent } from '../../../components/MessageContent';
+import { MessageEditor } from '../message/MessageEditor';
 
 type TimelineViewProps = {
   threadTimeline: ThreadTimeline;
@@ -339,20 +340,30 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
             roomId={roomId}
             decryptionManager={ct.decryption}
           >
-            {(contentEvent) => (
-              <RenderMessageContent
-                displayName={membersAPI.getName(event.sender)}
-                eventType={contentEvent.type}
-                ts={event.origin_server_ts}
-                edited={!!editedEvent}
-                content={rContent.newContent(contentEvent.content) ?? contentEvent.content}
-                mediaAutoLoad={mediaAutoLoad}
-                urlPreview={showUrlPreview}
-                htmlReactParserOptions={htmlReactParserOptions}
-                linkifyOpts={linkifyOpts}
-                outlineAttachment={messageLayout === MessageLayout.Bubble}
-              />
-            )}
+            {(contentEvent) =>
+              editId === event.event_id ? (
+                <MessageEditor
+                  style={{ maxWidth: '100%', width: '100vw' }}
+                  roomId={roomId}
+                  event={contentEvent}
+                  imagePackRooms={imagePackRooms}
+                  onCancel={handleEdit}
+                />
+              ) : (
+                <RenderMessageContent
+                  displayName={membersAPI.getName(event.sender)}
+                  eventType={contentEvent.type}
+                  ts={event.origin_server_ts}
+                  edited={!!editedEvent}
+                  content={rContent.newContent(contentEvent.content) ?? contentEvent.content}
+                  mediaAutoLoad={mediaAutoLoad}
+                  urlPreview={showUrlPreview}
+                  htmlReactParserOptions={htmlReactParserOptions}
+                  linkifyOpts={linkifyOpts}
+                  outlineAttachment={messageLayout === MessageLayout.Bubble}
+                />
+              )
+            }
           </MessageContent>
         )}
         {reactionJSX}

From 7243e8f10a4b5b47cefbc25447de9c070734b391 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 28 Aug 2026 12:08:28 +0530
Subject: [PATCH 119/158] use direct room mapping for fallback for heroes room
 name discovery

---
 src/app/hooks/storage/useRoomHeros.ts | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/app/hooks/storage/useRoomHeros.ts b/src/app/hooks/storage/useRoomHeros.ts
index c1a214e0..7d18b316 100644
--- a/src/app/hooks/storage/useRoomHeros.ts
+++ b/src/app/hooks/storage/useRoomHeros.ts
@@ -19,10 +19,17 @@ export const useRoomHeroes = (
 ): [GetRoomHeroesCallback, PendingObservableResult<RoomToHeroMembers>] => {
   const ct = useClient();
   const roomToSummary = useObservableValue(ct.roomToSummary);
+  const directRoomToUser = useObservableValue(ct.directRoomToUser);
 
   const getHeroes: GetRoomHeroesCallback = useCallback(
-    (roomId) => roomToSummary.get(roomId)?.['m.heroes'] ?? [],
-    [roomToSummary]
+    (roomId): string[] => {
+      const heroes = roomToSummary.get(roomId)?.['m.heroes'];
+      if (heroes && heroes.length > 0) return heroes;
+
+      const dmUserId = directRoomToUser.get(roomId);
+      return dmUserId ? [dmUserId] : [];
+    },
+    [roomToSummary, directRoomToUser]
   );
 
   const membersResult = useObservableValuePromise(

From ccc29ae1660e093b392a9c7f4034b8fe59689962 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 28 Aug 2026 13:52:30 +0530
Subject: [PATCH 120/158] create hero member events state to prevent frequent
 async loads

---
 .../autocomplete/RoomMentionAutocomplete.tsx  |  6 +-
 src/app/components/emoji-board/EmojiBoard.tsx |  4 +-
 src/app/components/user-profile/UserChips.tsx |  9 +--
 src/app/features/add-existing/AddExisting.tsx |  6 +-
 src/app/features/lobby/LobbyHeader.tsx        |  6 +-
 src/app/features/lobby/LobbyHero.tsx          |  6 +-
 src/app/features/lobby/SpaceItem.tsx          |  7 +-
 .../features/message-search/MessageSearch.tsx |  9 +--
 .../features/room-settings/RoomSettings.tsx   |  7 +-
 src/app/features/room/RoomTimeline.tsx        |  7 +-
 src/app/features/room/RoomViewHeader.tsx      |  7 +-
 .../room/room-pin-menu/RoomPinMenu.tsx        |  5 +-
 .../room/thread-view/TimelineView.tsx         |  5 +-
 src/app/features/search/Search.tsx            |  6 +-
 .../settings/emojis-stickers/GlobalPacks.tsx  |  8 +-
 .../features/space-settings/SpaceSettings.tsx |  7 +-
 src/app/hooks/storage/useGetRoomAvatar.ts     | 10 +--
 src/app/hooks/storage/useGetRoomName.ts       | 26 +++++--
 src/app/hooks/storage/useRoomHeros.ts         | 49 +-----------
 src/app/hooks/useLocalRoomSummary.ts          |  7 +-
 src/app/pages/client/direct/Direct.tsx        |  7 +-
 src/app/pages/client/home/Home.tsx            |  7 +-
 src/app/pages/client/inbox/Notifications.tsx  | 12 +--
 src/app/pages/client/sidebar/SpaceTabs.tsx    |  9 +--
 src/app/pages/client/space/Space.tsx          |  8 +-
 src/app/state/hooks/useBindAtoms.ts           |  2 +
 src/app/state/room/roomToHeroMembers.ts       | 75 +++++++++++++++++++
 27 files changed, 180 insertions(+), 137 deletions(-)
 create mode 100644 src/app/state/room/roomToHeroMembers.ts

diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
index 15a9fe1e..fc774763 100644
--- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
@@ -84,9 +84,9 @@ export function RoomMentionAutocomplete({
   const mDirects = useAtomValue(mDirectAtom);
   const rooms = useAtomValue(allRoomsAtom);
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(rooms);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   const allRooms = useMemo(
     () => Array.from(rooms).sort(factoryRoomIdByAtoZ(getRoomName)),
diff --git a/src/app/components/emoji-board/EmojiBoard.tsx b/src/app/components/emoji-board/EmojiBoard.tsx
index 57e8d959..0924df18 100644
--- a/src/app/components/emoji-board/EmojiBoard.tsx
+++ b/src/app/components/emoji-board/EmojiBoard.tsx
@@ -379,8 +379,8 @@ export function EmojiBoard({
   addToRecentEmoji = true,
 }: EmojiBoardProps) {
   const ct = useClient();
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(imagePackRooms);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
 
   const emojiTab = tab === EmojiBoardTab.Emoji;
   const usage = emojiTab ? ImageUsage.Emoticon : ImageUsage.Sticker;
diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx
index f09507f7..25dfb3eb 100644
--- a/src/app/components/user-profile/UserChips.tsx
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -230,7 +230,6 @@ type MutualRoomsData = {
   directs: string[];
 };
 
-const EMPTY_LIST: string[] = [];
 export function MutualRoomsChip({ userId }: { userId: string }) {
   const ct = useClient();
   const mutualRoomsState = useMutualRooms(userId);
@@ -240,11 +239,9 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
   const directs = useDirectRooms();
   const useAuthentication = useMediaAuthentication();
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(
-    mutualRoomsState.status === AsyncStatus.Success ? mutualRoomsState.data : EMPTY_LIST
-  );
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   const [cords, setCords] = useState<RectCords>();
 
diff --git a/src/app/features/add-existing/AddExisting.tsx b/src/app/features/add-existing/AddExisting.tsx
index 337b0c62..ce1ae574 100644
--- a/src/app/features/add-existing/AddExisting.tsx
+++ b/src/app/features/add-existing/AddExisting.tsx
@@ -87,9 +87,9 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
   const roomIdToParents = useAtomValue(roomToParentsAtom);
   const scrollRef = useRef<HTMLDivElement>(null);
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(ct.rooms.join.read);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   const [selected, setSelected] = useState<string[]>([]);
 
diff --git a/src/app/features/lobby/LobbyHeader.tsx b/src/app/features/lobby/LobbyHeader.tsx
index 9e1b514c..3583edd9 100644
--- a/src/app/features/lobby/LobbyHeader.tsx
+++ b/src/app/features/lobby/LobbyHeader.tsx
@@ -148,9 +148,9 @@ export function LobbyHeader({ showProfile, powerLevels }: LobbyHeaderProps) {
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
   const screenSize = useScreenSizeContext();
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(spaceId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   const avatarMxc = getRoomAvatar(spaceId);
   const avatarUrl = avatarMxc
diff --git a/src/app/features/lobby/LobbyHero.tsx b/src/app/features/lobby/LobbyHero.tsx
index e6fa24d0..71b7a07e 100644
--- a/src/app/features/lobby/LobbyHero.tsx
+++ b/src/app/features/lobby/LobbyHero.tsx
@@ -22,9 +22,9 @@ export function LobbyHero() {
   const useAuthentication = useMediaAuthentication();
   const spaceId = useSpace();
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(spaceId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
   const topic = useRoomTopic(spaceId);
 
   const avatarMxc = getRoomAvatar(spaceId);
diff --git a/src/app/features/lobby/SpaceItem.tsx b/src/app/features/lobby/SpaceItem.tsx
index 64a86d44..c1431f89 100644
--- a/src/app/features/lobby/SpaceItem.tsx
+++ b/src/app/features/lobby/SpaceItem.tsx
@@ -191,9 +191,10 @@ type SpaceProfileProps = {
 function SpaceProfile({ roomId, suggested, closed, categoryId, handleClose }: SpaceProfileProps) {
   const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   const name = getRoomName(roomId) ?? 'Unknown';
   const avatar = getRoomAvatar(roomId);
diff --git a/src/app/features/message-search/MessageSearch.tsx b/src/app/features/message-search/MessageSearch.tsx
index 161c0d20..2ca88e0f 100644
--- a/src/app/features/message-search/MessageSearch.tsx
+++ b/src/app/features/message-search/MessageSearch.tsx
@@ -191,11 +191,10 @@ export function MessageSearch({
   }, [lastVItemIndex, lastGroupIndex, fetchNextPage, isFetchingNextPage, hasNextPage]);
 
   const roomToTimeline = useObservableValue(ct.roomToTimeline);
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(
-    searchPathSearchParams.global === 'true' ? allRooms : rooms
-  );
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   return (
     <Box direction="Column" gap="700">
diff --git a/src/app/features/room-settings/RoomSettings.tsx b/src/app/features/room-settings/RoomSettings.tsx
index baa194a9..b7428002 100644
--- a/src/app/features/room-settings/RoomSettings.tsx
+++ b/src/app/features/room-settings/RoomSettings.tsx
@@ -77,9 +77,10 @@ export function RoomSettings({ initialPage, requestClose }: RoomSettingsProps) {
   const ct = useClient();
   const useAuthentication = useMediaAuthentication();
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
+
   const roomAvatar = getRoomAvatar(roomId);
   const roomName = getRoomName(roomId);
 
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 824d8ba1..df0bbc70 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -112,9 +112,10 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
 
   const powerLevels = usePowerLevelsContext();
   const creators = useRoomCreators(roomId);
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   const membersAPI = useRoomMembersAPI();
   const creatorsTag = useRoomCreatorsTag();
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 69d65dca..26dacb10 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -271,9 +271,10 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
 
   const pinnedEvents = useRoomPinnedEvents(roomId);
-  const [getRoomHeroes, roomToHeroMemberResult] = useRoomHeroes(roomId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMemberResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMemberResult.value);
+
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   const avatarMxc = getRoomAvatar(roomId);
   const name = getRoomName(roomId) ?? 'Unknown';
diff --git a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
index 8106eafb..ea14356f 100644
--- a/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
+++ b/src/app/features/room/room-pin-menu/RoomPinMenu.tsx
@@ -181,8 +181,9 @@ export const RoomPinMenu = forwardRef<HTMLDivElement, RoomPinMenuProps>(({ reque
   const redactedSet = useObservableValueOptionally(timeline?.relations.redacted);
   const edits = useObservableValueOptionally(timeline?.relations.edits.eventToRelations);
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+
   const membersAPI = useRoomMembersAPI();
   const { linkifyOpts, htmlReactParserOptions } = useMessageParserOptions(
     roomId,
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index 61da69f8..aed83486 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -108,8 +108,9 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
 
   const powerLevels = usePowerLevelsContext();
   const creators = useRoomCreators(roomId);
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
 
   const membersAPI = useRoomMembersAPI();
   const creatorsTag = useRoomCreatorsTag();
diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx
index fe6c5db8..221aa084 100644
--- a/src/app/features/search/Search.tsx
+++ b/src/app/features/search/Search.tsx
@@ -153,9 +153,9 @@ export function Search({ requestClose }: SearchProps) {
   const topActiveRooms = useTopActiveRooms(searchRoomType, rooms, directs, spaces);
   const targetRooms = useSearchTargetRooms(searchRoomType, rooms, directs, spaces);
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(directs);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   const getTargetStr: SearchItemStrGetter<string> = useCallback(
     (roomId: string) => {
diff --git a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
index 5f5670f0..f1ad33c2 100644
--- a/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
+++ b/src/app/features/settings/emojis-stickers/GlobalPacks.tsx
@@ -58,12 +58,8 @@ function GlobalPackSelector({
 }) {
   const ct = useClient();
 
-  const imagePackRooms = useMemo(
-    () => packs.map((pack) => pack.address?.roomId).filter((rId) => typeof rId === 'string'),
-    [packs]
-  );
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(imagePackRooms);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
 
   const roomToPacks = useMemo(() => {
     const rToP = new Map<string, ImagePack[]>();
diff --git a/src/app/features/space-settings/SpaceSettings.tsx b/src/app/features/space-settings/SpaceSettings.tsx
index fb3dab07..38fbd6c7 100644
--- a/src/app/features/space-settings/SpaceSettings.tsx
+++ b/src/app/features/space-settings/SpaceSettings.tsx
@@ -77,9 +77,10 @@ export function SpaceSettings({ initialPage, requestClose }: SpaceSettingsProps)
   const roomId = useRoom();
   const useAuthentication = useMediaAuthentication();
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
+
   const roomAvatar = getRoomAvatar(roomId);
   const roomName = getRoomName(roomId);
 
diff --git a/src/app/hooks/storage/useGetRoomAvatar.ts b/src/app/hooks/storage/useGetRoomAvatar.ts
index b2fe8716..e50dda8c 100644
--- a/src/app/hooks/storage/useGetRoomAvatar.ts
+++ b/src/app/hooks/storage/useGetRoomAvatar.ts
@@ -1,17 +1,17 @@
 import { useCallback } from 'react';
+import { useAtomValue } from 'jotai';
 import { useClient } from '../useClient';
 import { useObservableValue } from '../useObservableValue';
-import { GetRoomHeroesCallback, RoomToHeroMembers } from './useRoomHeros';
+import { GetRoomHeroesCallback } from './useRoomHeros';
 import { roomMemberContentAvatarUrl } from '../../utils/room';
+import { roomToHeroMembersAtom } from '../../state/room/roomToHeroMembers';
 
 export type GetRoomAvatarCallback = (roomId: string) => string | undefined;
 
-export const useGetRoomAvatar = (
-  getRoomHeroes: GetRoomHeroesCallback,
-  roomToHeroMembers: RoomToHeroMembers | undefined
-): GetRoomAvatarCallback => {
+export const useGetRoomAvatar = (getRoomHeroes: GetRoomHeroesCallback): GetRoomAvatarCallback => {
   const ct = useClient();
   const roomToAvatar = useObservableValue(ct.roomToAvatar);
+  const roomToHeroMembers = useAtomValue(roomToHeroMembersAtom);
 
   const getRoomAvatar: GetRoomAvatarCallback = useCallback(
     (roomId: string) => {
diff --git a/src/app/hooks/storage/useGetRoomName.ts b/src/app/hooks/storage/useGetRoomName.ts
index ca083daa..5c6c6fba 100644
--- a/src/app/hooks/storage/useGetRoomName.ts
+++ b/src/app/hooks/storage/useGetRoomName.ts
@@ -1,19 +1,19 @@
 import { useCallback } from 'react';
+import { useAtomValue } from 'jotai';
 import { useClient } from '../useClient';
 import { useObservableValue } from '../useObservableValue';
-import { GetRoomHeroesCallback, RoomToHeroMembers } from './useRoomHeros';
+import { GetRoomHeroesCallback } from './useRoomHeros';
 import { getMxIdLocalPart } from '../../utils/matrix';
 import { roomMemberContentDisplayname } from '../../utils/room';
+import { roomToHeroMembersAtom } from '../../state/room/roomToHeroMembers';
 
 export type GetRoomNameCallback = (roomId: string) => string | undefined;
 
-export const useGetRoomName = (
-  getRoomHeroes: GetRoomHeroesCallback,
-  roomToHeroMembers: RoomToHeroMembers | undefined
-): GetRoomNameCallback => {
+export const useGetRoomName = (getRoomHeroes: GetRoomHeroesCallback): GetRoomNameCallback => {
   const ct = useClient();
   const roomToName = useObservableValue(ct.roomToName);
   const roomToAlias = useObservableValue(ct.roomToAlias);
+  const roomToHeroMembers = useAtomValue(roomToHeroMembersAtom);
 
   const getRoomName: GetRoomNameCallback = useCallback(
     (roomId: string) => {
@@ -25,7 +25,7 @@ export const useGetRoomName = (
 
       const members = roomToHeroMembers?.get(roomId);
 
-      const heroesName: string[] = getRoomHeroes(roomId).map((userId) => {
+      const heroNames: string[] = getRoomHeroes(roomId).map((userId) => {
         const member = members?.get(userId);
         if (!member) return getMxIdLocalPart(userId) ?? userId;
         const { content } = member;
@@ -34,9 +34,19 @@ export const useGetRoomName = (
         return username;
       });
 
-      if (heroesName) return heroesName.join(', ');
+      if (heroNames.length === 0) {
+        return undefined;
+      }
 
-      return undefined;
+      if (heroNames.length === 1) {
+        return heroNames[0];
+      }
+
+      if (heroNames.length === 2) {
+        return `${heroNames[0]} & ${heroNames[1]}`;
+      }
+
+      return `${heroNames.slice(0, -1).join(', ')} & ${heroNames.at(-1)}`;
     },
     [roomToName, roomToAlias, getRoomHeroes, roomToHeroMembers]
   );
diff --git a/src/app/hooks/storage/useRoomHeros.ts b/src/app/hooks/storage/useRoomHeros.ts
index 7d18b316..ab5357de 100644
--- a/src/app/hooks/storage/useRoomHeros.ts
+++ b/src/app/hooks/storage/useRoomHeros.ts
@@ -1,22 +1,10 @@
-import { useCallback, useMemo } from 'react';
-import { PendingObservableResult } from 'neurone/lib/utils/observable';
-import { StateEventWithoutRoomId } from 'neurone/lib/api/types';
+import { useCallback } from 'react';
 import { useClient } from '../useClient';
-import {
-  useComputedPendingObservableResult,
-  useObservableValue,
-  useObservableValuePromise,
-} from '../useObservableValue';
-import { getJoinRoomMemberId } from '../../../client/storage/collections';
-
-export type UserIdToRoomMember = Map<string, StateEventWithoutRoomId>;
-export type RoomToHeroMembers = Map<string, UserIdToRoomMember>;
+import { useObservableValue } from '../useObservableValue';
 
 export type GetRoomHeroesCallback = (roomId: string) => string[];
 
-export const useRoomHeroes = (
-  roomOrRooms: string | string[]
-): [GetRoomHeroesCallback, PendingObservableResult<RoomToHeroMembers>] => {
+export const useRoomHeroes = (): GetRoomHeroesCallback => {
   const ct = useClient();
   const roomToSummary = useObservableValue(ct.roomToSummary);
   const directRoomToUser = useObservableValue(ct.directRoomToUser);
@@ -31,34 +19,5 @@ export const useRoomHeroes = (
     },
     [roomToSummary, directRoomToUser]
   );
-
-  const membersResult = useObservableValuePromise(
-    useMemo(() => {
-      const ids = Array.isArray(roomOrRooms)
-        ? roomOrRooms.flatMap((roomId) =>
-            getHeroes(roomId).map((userId) => getJoinRoomMemberId(roomId, userId))
-          )
-        : getHeroes(roomOrRooms).map((userId) => getJoinRoomMemberId(roomOrRooms, userId));
-
-      return ct.storage.joinRoomMember.observableRead.getMultiple(ids);
-    }, [roomOrRooms, getHeroes, ct])
-  );
-
-  const roomToHeroesResult: PendingObservableResult<RoomToHeroMembers> =
-    useComputedPendingObservableResult(
-      membersResult,
-      useCallback((members) => {
-        const roomToHeroes = new Map<string, UserIdToRoomMember>();
-        members.forEach((member) => {
-          if (!member) return;
-          const { roomId, userId, event } = member;
-          const userToEvent: UserIdToRoomMember = roomToHeroes.get(roomId) ?? new Map();
-          userToEvent.set(userId, event);
-          roomToHeroes.set(roomId, userToEvent);
-        });
-        return roomToHeroes;
-      }, [])
-    );
-
-  return [getHeroes, roomToHeroesResult];
+  return getHeroes;
 };
diff --git a/src/app/hooks/useLocalRoomSummary.ts b/src/app/hooks/useLocalRoomSummary.ts
index 9f105cff..b1359d5e 100644
--- a/src/app/hooks/useLocalRoomSummary.ts
+++ b/src/app/hooks/useLocalRoomSummary.ts
@@ -18,9 +18,10 @@ export type LocalRoomSummary = {
 };
 export const useLocalRoomSummary = (roomId: string): LocalRoomSummary => {
   const ct = useClient();
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(roomId);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
   const roomTopic = useRoomTopic(roomId);
   const roomToAlias = useObservableValue(ct.roomToAlias);
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 9463692d..1541c11f 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -183,9 +183,10 @@ export function Direct() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const directs = useDirectRooms();
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(directs);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
+
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
   const roomToNotifications = useRoomsNotifications(directs, roomToNotificationsAtom);
   const unreadRooms = useRoomsUnread(directs, unreadRoomsAtom);
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index cc1b8fe0..2447a9ac 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -207,9 +207,10 @@ export function Home() {
   const scrollRef = useRef<HTMLDivElement>(null);
   const rooms = useHomeRooms();
 
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(rooms);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
+
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
   const roomToNotifications = useRoomsNotifications(rooms, roomToNotificationsAtom);
   const unreadRooms = useRoomsUnread(rooms, unreadRoomsAtom);
diff --git a/src/app/pages/client/inbox/Notifications.tsx b/src/app/pages/client/inbox/Notifications.tsx
index 09763ef5..25409374 100644
--- a/src/app/pages/client/inbox/Notifications.tsx
+++ b/src/app/pages/client/inbox/Notifications.tsx
@@ -596,15 +596,11 @@ export function Notifications() {
     }
   }, [timelineState, notificationTimeline, lastVItemIndex, loadTimeline]);
 
-  const notificationRooms = useMemo(
-    () => Array.from(new Set(notificationTimeline.groups.map((g) => g.roomId))),
-    [notificationTimeline]
-  );
-
   const roomToTimeline = useObservableValue(ct.roomToTimeline);
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(notificationRooms);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   return (
     <Page>
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index 93c3f1a5..488b18e2 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -72,7 +72,6 @@ import {
   parseSidebar,
   sidebarItemWithout,
   useSidebarItems,
-  useSidebarRooms,
 } from '../../../hooks/useSidebarItems';
 import { AccountDataType } from '../../../../types/matrix/accountData';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
@@ -667,11 +666,9 @@ export function SpaceTabs({ scrollRef }: SpaceTabsProps) {
   const [openedFolder, setOpenedFolder] = useAtom(useOpenedSidebarFolderAtom());
   const [draggingItem, setDraggingItem] = useState<SidebarDraggable>();
 
-  const sidebarRooms = useSidebarRooms(originalSidebarItems);
-  const [getRoomHeroes, roomToHeroResult] = useRoomHeroes(sidebarRooms);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroResult.value);
-
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroResult.value);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
 
   useEffect(() => {
     localEchoSidebarItem(originalSidebarItems);
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index bbd5d489..62672627 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -401,9 +401,11 @@ export function Space() {
   const hierarchy = useSpaceJoinedHierarchy(spaceId);
 
   const rooms = useMemo(() => hierarchy.map((item) => item.roomId), [hierarchy]);
-  const [getRoomHeroes, roomToHeroMembersResult] = useRoomHeroes(rooms);
-  const getRoomName = useGetRoomName(getRoomHeroes, roomToHeroMembersResult.value);
-  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes, roomToHeroMembersResult.value);
+
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
+
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
   const roomToNotifications = useRoomsNotifications(rooms, roomToNotificationsAtom);
   const unreadRooms = useRoomsUnread(rooms, unreadRoomsAtom);
diff --git a/src/app/state/hooks/useBindAtoms.ts b/src/app/state/hooks/useBindAtoms.ts
index c6a95449..254453f3 100644
--- a/src/app/state/hooks/useBindAtoms.ts
+++ b/src/app/state/hooks/useBindAtoms.ts
@@ -8,12 +8,14 @@ import {
 } from '../room/roomToNotifications';
 import { ClientContext } from '../../../client/context';
 import { unreadRoomsAtom, useBindUnreadRoomsAtom } from '../room/roomToUnread';
+import { roomToHeroMembersAtom, useBindRoomToHeroMembers } from '../room/roomToHeroMembers';
 
 export const useBindAtoms = (ct: ClientContext) => {
   useBindMDirectAtom(ct, mDirectAtom);
   useBindAllRoomsAtom(ct, allRoomsAtom);
   useBindRoomToParentsAtom(ct, roomToParentsAtom);
   useBindRoomToNotificationsAtom(ct, roomToNotificationsAtom);
+  useBindRoomToHeroMembers(ct, roomToHeroMembersAtom);
   useBindUnreadRoomsAtom(ct, unreadRoomsAtom);
 
   useBindRoomIdToTypingMembersAtom(ct, roomIdToTypingMembersAtom);
diff --git a/src/app/state/room/roomToHeroMembers.ts b/src/app/state/room/roomToHeroMembers.ts
new file mode 100644
index 00000000..6c805516
--- /dev/null
+++ b/src/app/state/room/roomToHeroMembers.ts
@@ -0,0 +1,75 @@
+import { useCallback, useEffect } from 'react';
+import { StateEventWithoutRoomId } from 'neurone/lib/api/types';
+import { atom, useSetAtom } from 'jotai';
+import { ClientContext } from '../../../client/context';
+import { useObservableValue } from '../../hooks/useObservableValue';
+import { AsyncStatus, useAsyncCallback } from '../../hooks/useAsyncCallback';
+import { getJoinRoomMemberId } from '../../../client/storage/collections';
+
+export type UserIdToRoomMember = Map<string, StateEventWithoutRoomId>;
+export type RoomToHeroMembers = Map<string, UserIdToRoomMember>;
+
+export const roomToHeroMembersAtom = atom<RoomToHeroMembers>(new Map());
+
+export const useBindRoomToHeroMembers = (
+  ct: ClientContext,
+  heroMembersAtom: typeof roomToHeroMembersAtom
+) => {
+  const setHeroMembersAtom = useSetAtom(heroMembersAtom);
+
+  const rooms = useObservableValue(ct.rooms.join);
+  const roomToSummary = useObservableValue(ct.roomToSummary);
+  const directRoomToUser = useObservableValue(ct.directRoomToUser);
+
+  const [heroMembersState, loadHeroMembers] = useAsyncCallback(
+    useCallback(async () => {
+      const getHeroes = (roomId: string): string[] => {
+        const heroes = roomToSummary.get(roomId)?.['m.heroes'];
+        if (heroes && heroes.length > 0) return heroes;
+
+        const dmUserId = directRoomToUser.get(roomId);
+        return dmUserId ? [dmUserId] : [];
+      };
+
+      const ids = rooms.flatMap((roomId) =>
+        getHeroes(roomId).map((userId) => getJoinRoomMemberId(roomId, userId))
+      );
+
+      return ct.storage.joinRoomMember.observableRead.getMultiple(ids);
+    }, [ct, rooms, roomToSummary, directRoomToUser])
+  );
+
+  useEffect(() => {
+    loadHeroMembers();
+  }, [loadHeroMembers]);
+
+  const heroMembers =
+    heroMembersState.status === AsyncStatus.Success ? heroMembersState.data : undefined;
+
+  // dispose
+  useEffect(() => () => heroMembers?.dispose(), [heroMembers]);
+
+  useEffect(() => {
+    const processHeroMembers = () => {
+      const roomToHeroes = new Map<string, UserIdToRoomMember>();
+
+      heroMembers?.read.forEach((member) => {
+        if (!member) return;
+        const { roomId, userId, event } = member;
+        const userToEvent: UserIdToRoomMember = roomToHeroes.get(roomId) ?? new Map();
+        userToEvent.set(userId, event);
+        roomToHeroes.set(roomId, userToEvent);
+      });
+
+      setHeroMembersAtom(roomToHeroes);
+    };
+
+    if (heroMembers) {
+      processHeroMembers();
+    }
+    const unsubscribe = heroMembers?.subscribe(processHeroMembers);
+    return () => {
+      unsubscribe?.();
+    };
+  }, [heroMembers, setHeroMembersAtom]);
+};

From 21bc1521c9bed5dba883574d34e13bff452c4953 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 28 Aug 2026 15:22:02 +0530
Subject: [PATCH 121/158] add missing comparator in unread rooms hook

---
 src/app/state/hooks/unread.ts | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/app/state/hooks/unread.ts b/src/app/state/hooks/unread.ts
index d493022c..089a92d1 100644
--- a/src/app/state/hooks/unread.ts
+++ b/src/app/state/hooks/unread.ts
@@ -4,6 +4,14 @@ import { selectAtom } from 'jotai/utils';
 import { unreadRoomsAtom } from '../room/roomToUnread';
 import { useClient } from '../../hooks/useClient';
 
+const compareUnread = (u1: Set<string>, u2: Set<string>): boolean => {
+  if (u1.size !== u2.size) {
+    return false;
+  }
+
+  return [...u1].every((value) => u2.has(value));
+};
+
 export const useRoomsUnread = (
   rooms: string[],
   unreadRooms: typeof unreadRoomsAtom
@@ -18,7 +26,7 @@ export const useRoomsUnread = (
     [rooms, ct]
   );
 
-  return useAtomValue(selectAtom(unreadRooms, selector));
+  return useAtomValue(selectAtom(unreadRooms, selector, compareUnread));
 };
 
 export const useRoomUnread = (roomId: string, unreadRooms: typeof unreadRoomsAtom): boolean => {

From 89f6409e4e06961aeada876b6911e4493cc1e38c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 28 Aug 2026 15:22:56 +0530
Subject: [PATCH 122/158] fix closed category of home, direct and space tabs

---
 src/app/hooks/useRoomsLatestEvent.ts   | 54 +++++++++++++++++
 src/app/hooks/useSpaceHierarchy.ts     | 84 +++++++++++++++++++-------
 src/app/pages/client/direct/Direct.tsx | 25 +++++---
 src/app/pages/client/home/Home.tsx     | 22 ++++---
 src/app/pages/client/space/Space.tsx   | 22 +++++--
 5 files changed, 166 insertions(+), 41 deletions(-)
 create mode 100644 src/app/hooks/useRoomsLatestEvent.ts

diff --git a/src/app/hooks/useRoomsLatestEvent.ts b/src/app/hooks/useRoomsLatestEvent.ts
new file mode 100644
index 00000000..68bbe4cf
--- /dev/null
+++ b/src/app/hooks/useRoomsLatestEvent.ts
@@ -0,0 +1,54 @@
+import { useCallback, useEffect, useState } from 'react';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { useClient } from './useClient';
+
+const getLatestEvent = (
+  rooms: string[],
+  roomToLatestEvent: Map<string, MessageEventWithoutRoomId>
+) => {
+  const rToE = new Map<string, MessageEventWithoutRoomId>();
+
+  rooms.forEach((roomId) => {
+    const event = roomToLatestEvent.get(roomId);
+    if (event) {
+      rToE.set(roomId, event);
+    }
+  });
+
+  return rToE;
+};
+
+export const useRoomsLatestEvent = (rooms: string[]) => {
+  const ct = useClient();
+
+  const [roomToLatestEvent, setRoomToLatestEvent] = useState(() =>
+    getLatestEvent(rooms, ct.roomToLatestEvent.read)
+  );
+
+  const updateRoomToLatestEvent = useCallback((next: Map<string, MessageEventWithoutRoomId>) => {
+    setRoomToLatestEvent((current) => {
+      const hasChanged =
+        current.size !== next.size ||
+        Array.from(next.entries()).some(
+          ([roomId, nextEvent]) => current.get(roomId)?.event_id !== nextEvent.event_id
+        );
+
+      return hasChanged ? next : current;
+    });
+  }, []);
+
+  useEffect(() => {
+    const handleLatestEvent = () => {
+      updateRoomToLatestEvent(getLatestEvent(rooms, ct.roomToLatestEvent.read));
+    };
+
+    updateRoomToLatestEvent(getLatestEvent(rooms, ct.roomToLatestEvent.read));
+
+    const unsubscribe = ct.roomToLatestEvent.subscribe(handleLatestEvent);
+    return () => {
+      unsubscribe();
+    };
+  }, [ct, rooms, updateRoomToLatestEvent]);
+
+  return roomToLatestEvent;
+};
diff --git a/src/app/hooks/useSpaceHierarchy.ts b/src/app/hooks/useSpaceHierarchy.ts
index f2031de0..da6116a6 100644
--- a/src/app/hooks/useSpaceHierarchy.ts
+++ b/src/app/hooks/useSpaceHierarchy.ts
@@ -6,13 +6,17 @@ import { getHierarchy, GetHierarchyOK } from 'neurone/lib/api/matrix/client/v1/r
 import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { SpaceChildContent } from '../../types/matrix/room';
 import { isRoomId } from '../utils/matrix';
-import { SortFunc, byOrderKey, byTsOldToNew } from '../utils/sort';
+import { SortFunc, byOrderKey, byTsOldToNew, factoryRoomIdByActivity } from '../utils/sort';
 import { ErrorCode } from '../cs-errorcode';
 import { useObservableValue } from './useObservableValue';
 import { useClient } from './useClient';
 import { useAllJoinedRoomsSet } from './useGetRoom';
 import { spaceRoomsAtom } from '../state/spaceRooms';
 import { rError } from '../../client/reader';
+import { useRoomsLatestEvent } from './useRoomsLatestEvent';
+import { RoomToNotifications } from '../state/room/roomToNotifications';
+import { makeNavCategoryId } from '../state/closedNavCategories';
+import { getRoomTotalNotifications } from '../state/hooks/roomNotifications';
 
 export type HierarchyItemSpace = {
   roomId: string;
@@ -157,9 +161,8 @@ const getSpaceJoinedHierarchy = (
   rootSpaceId: string,
   joinedRooms: Set<string>,
   roomToChildEvents: Map<string, StateEventWithoutRoomId<SpaceChildContent>[]>,
-  spaceRooms: Set<string>,
-  sortRoomItems: (parentId: string, items: HierarchyItem[]) => HierarchyItem[]
-): HierarchyItem[] => {
+  spaceRooms: Set<string>
+) => {
   const spaceItems: HierarchyItemSpace[] = getHierarchySpaces(
     rootSpaceId,
     roomToChildEvents,
@@ -167,7 +170,7 @@ const getSpaceJoinedHierarchy = (
     new Set()
   );
 
-  const hierarchy: HierarchyItem[] = spaceItems.flatMap((spaceItem) => {
+  const hierarchy = spaceItems.flatMap((spaceItem) => {
     const childEvents = roomToChildEvents.get(spaceItem.roomId);
 
     const childItems: HierarchyItemRoom[] = [];
@@ -187,38 +190,77 @@ const getSpaceJoinedHierarchy = (
     });
     if (childItems.length === 0) return [];
 
-    return [spaceItem, ...sortRoomItems(spaceItem.roomId, childItems)];
+    return {
+      spaceItem,
+      childItems,
+    };
   });
 
   return hierarchy;
 };
 
-export const useSpaceJoinedHierarchy = (spaceId: string): HierarchyItem[] => {
+export const useSpaceJoinedHierarchy = (spaceId: string) => {
   const ct = useClient();
   const roomToChildEvents = useObservableValue(ct.roomToChildEvents);
   const allJoinedRooms = useAllJoinedRoomsSet();
   const spaceRooms = useObservableValue(ct.spaceRooms);
 
-  const sortRoomItems = useCallback((sId: string, items: HierarchyItem[]) => {
-    items.sort(hierarchyItemTs).sort(hierarchyItemByOrder);
-    return items;
-  }, []);
-
   const hierarchy = useMemo(
-    () =>
-      getSpaceJoinedHierarchy(
-        spaceId,
-        allJoinedRooms,
-        roomToChildEvents,
-        spaceRooms,
-        sortRoomItems
-      ),
-    [spaceId, allJoinedRooms, roomToChildEvents, spaceRooms, sortRoomItems]
+    () => getSpaceJoinedHierarchy(spaceId, allJoinedRooms, roomToChildEvents, spaceRooms),
+    [spaceId, allJoinedRooms, roomToChildEvents, spaceRooms]
   );
 
   return hierarchy;
 };
 
+export const useJoinedHierarchyItems = (
+  spaceId: string,
+  hierarchy: ReturnType<typeof useSpaceJoinedHierarchy>,
+  rooms: string[],
+  roomToNotifications: RoomToNotifications,
+  unreadRooms: Set<string>,
+  closedCategories: Set<string>,
+  selectedRoomId: string | undefined
+) => {
+  const roomToLatestEvent = useRoomsLatestEvent(rooms);
+
+  const prepareItems = useCallback(
+    (sId: string, items: HierarchyItem[]) => {
+      if (closedCategories.has(makeNavCategoryId(spaceId, sId))) {
+        return items
+          .filter((item) => {
+            if (item.roomId === selectedRoomId) return true;
+            const notification = roomToNotifications.get(item.roomId);
+            if (!notification) return false;
+            const total = getRoomTotalNotifications(notification);
+            return total.count > 0 || unreadRooms.has(item.roomId);
+          })
+          .sort((h1, h2) =>
+            factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts)(
+              h1.roomId,
+              h2.roomId
+            )
+          );
+      }
+
+      items.sort(hierarchyItemTs).sort(hierarchyItemByOrder);
+      return items;
+    },
+    [roomToLatestEvent, closedCategories, spaceId, roomToNotifications, unreadRooms, selectedRoomId]
+  );
+
+  const hierarchyItems: HierarchyItem[] = useMemo(
+    () =>
+      hierarchy.flatMap((item) => [
+        item.spaceItem,
+        ...prepareItems(item.spaceItem.roomId, item.childItems),
+      ]),
+    [hierarchy, prepareItems]
+  );
+
+  return hierarchyItems;
+};
+
 // we will paginate until 5000 items
 const PER_PAGE_COUNT = 100;
 const MAX_AUTO_PAGE_COUNT = 50;
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 1541c11f..287198d0 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, forwardRef, useMemo, useRef, useState } from 'react';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtom } from 'jotai';
 import {
   Avatar,
   Box,
@@ -18,8 +18,7 @@ import {
 import { useVirtualizer } from '@tanstack/react-virtual';
 import FocusTrap from 'focus-trap-react';
 import { useNavigate } from 'react-router-dom';
-import { useMatrixClient } from '../../../hooks/useMatrixClient';
-import { factoryRoomIdByActivity, factoryRoomIdByAtoZ } from '../../../utils/sort';
+import { factoryRoomIdByActivity } from '../../../utils/sort';
 import {
   NavButton,
   NavCategory,
@@ -60,6 +59,7 @@ import { useObservableValue } from '../../../hooks/useObservableValue';
 import { useClient } from '../../../hooks/useClient';
 import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
 import { useRoomsUnread } from '../../../state/hooks/unread';
+import { useRoomsLatestEvent } from '../../../hooks/useRoomsLatestEvent';
 
 type DirectMenuProps = {
   requestClose: () => void;
@@ -190,6 +190,7 @@ export function Direct() {
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
   const roomToNotifications = useRoomsNotifications(directs, roomToNotificationsAtom);
   const unreadRooms = useRoomsUnread(directs, unreadRoomsAtom);
+  const roomToLatestEvent = useRoomsLatestEvent(directs);
 
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const navigate = useNavigate();
@@ -201,7 +202,6 @@ export function Direct() {
   const [closedCategories, setClosedCategories] = useAtom(useClosedNavCategoriesAtom());
 
   const sortedDirects = useMemo(() => {
-    // TODO: sort by activity
     if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
       return directs
         .filter((roomId) => {
@@ -209,12 +209,21 @@ export function Direct() {
           const notification = roomToNotifications.get(roomId);
           if (!notification) return false;
           const total = getRoomTotalNotifications(notification);
-          return total.count > 0;
+          return total.count > 0 || unreadRooms.has(roomId);
         })
-        .sort(factoryRoomIdByAtoZ(getRoomName));
+        .sort(factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts));
     }
-    return Array.from(directs).sort(factoryRoomIdByAtoZ(getRoomName));
-  }, [directs, closedCategories, roomToNotifications, selectedRoomId, getRoomName]);
+    return Array.from(directs).sort(
+      factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts)
+    );
+  }, [
+    directs,
+    closedCategories,
+    roomToNotifications,
+    unreadRooms,
+    roomToLatestEvent,
+    selectedRoomId,
+  ]);
 
   const virtualizer = useVirtualizer({
     count: sortedDirects.length,
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index 2447a9ac..7e9942ef 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -16,9 +16,9 @@ import {
   toRem,
 } from 'folds';
 import { useVirtualizer } from '@tanstack/react-virtual';
-import { useAtom, useAtomValue } from 'jotai';
+import { useAtom } from 'jotai';
 import FocusTrap from 'focus-trap-react';
-import { factoryRoomIdByAtoZ } from '../../../utils/sort';
+import { factoryRoomIdByActivity, factoryRoomIdByAtoZ } from '../../../utils/sort';
 import {
   NavButton,
   NavCategory,
@@ -72,6 +72,7 @@ import { roomToNotificationsAtom } from '../../../state/room/roomToNotifications
 import { useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
 import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
 import { useRoomsUnread } from '../../../state/hooks/unread';
+import { useRoomsLatestEvent } from '../../../hooks/useRoomsLatestEvent';
 
 type HomeMenuProps = {
   requestClose: () => void;
@@ -214,6 +215,7 @@ export function Home() {
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
   const roomToNotifications = useRoomsNotifications(rooms, roomToNotificationsAtom);
   const unreadRooms = useRoomsUnread(rooms, unreadRoomsAtom);
+  const roomToLatestEvent = useRoomsLatestEvent(rooms);
 
   const notificationPreferences = useRoomsNotificationPreferencesContext();
   const navigate = useNavigate();
@@ -226,19 +228,25 @@ export function Home() {
 
   const sortedRooms = useMemo(() => {
     if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
-      // TODO: sort by activity
       return rooms
         .filter((roomId) => {
           if (roomId === selectedRoomId) return true;
           const notification = roomToNotifications.get(roomId);
-          if (!notification) return false;
           const total = getRoomTotalNotifications(notification);
-          return total.count > 0;
+          return total.count > 0 || unreadRooms.has(roomId);
         })
-        .sort(factoryRoomIdByAtoZ(getRoomName));
+        .sort(factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts));
     }
     return Array.from(rooms).sort(factoryRoomIdByAtoZ(getRoomName));
-  }, [getRoomName, rooms, closedCategories, roomToNotifications, selectedRoomId]);
+  }, [
+    getRoomName,
+    rooms,
+    closedCategories,
+    roomToNotifications,
+    unreadRooms,
+    roomToLatestEvent,
+    selectedRoomId,
+  ]);
 
   const virtualizer = useVirtualizer({
     count: sortedRooms.length,
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 62672627..768fba50 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -50,7 +50,7 @@ import { RoomNavCategoryButton, RoomNavItem } from '../../../features/room-nav';
 import { makeNavCategoryId } from '../../../state/closedNavCategories';
 import { useCategoryHandler } from '../../../hooks/useCategoryHandler';
 import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMapper';
-import { useSpaceJoinedHierarchy } from '../../../hooks/useSpaceHierarchy';
+import { useJoinedHierarchyItems, useSpaceJoinedHierarchy } from '../../../hooks/useSpaceHierarchy';
 import { allRoomsAtom } from '../../../state/room-list/roomList';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
 import { usePowerLevels, usePowerLevelsState } from '../../../hooks/usePowerLevels';
@@ -400,7 +400,10 @@ export function Space() {
 
   const hierarchy = useSpaceJoinedHierarchy(spaceId);
 
-  const rooms = useMemo(() => hierarchy.map((item) => item.roomId), [hierarchy]);
+  const rooms = useMemo(
+    () => hierarchy.flatMap((item) => item.childItems.map((c) => c.roomId)),
+    [hierarchy]
+  );
 
   const getRoomHeroes = useRoomHeroes();
   const getRoomName = useGetRoomName(getRoomHeroes);
@@ -410,8 +413,18 @@ export function Space() {
   const roomToNotifications = useRoomsNotifications(rooms, roomToNotificationsAtom);
   const unreadRooms = useRoomsUnread(rooms, unreadRoomsAtom);
 
+  const hierarchyItems = useJoinedHierarchyItems(
+    spaceId,
+    hierarchy,
+    rooms,
+    roomToNotifications,
+    unreadRooms,
+    closedCategories,
+    selectedRoomId
+  );
+
   const virtualizer = useVirtualizer({
-    count: hierarchy.length,
+    count: hierarchyItems.length,
     getScrollElement: () => scrollRef.current,
     estimateSize: () => 0,
     overscan: 10,
@@ -473,7 +486,7 @@ export function Space() {
             }}
           >
             {virtualizer.getVirtualItems().map((vItem) => {
-              const item = hierarchy[vItem.index] ?? {};
+              const item = hierarchyItems[vItem.index] ?? {};
               if (!item) return null;
               const { roomId } = item;
 
@@ -501,7 +514,6 @@ export function Space() {
                 );
               }
 
-              // TODO: closedCategories.has(makeNavCategoryId(spaceId, parentId)
               const n = roomToNotifications.get(roomId);
               const notifications = n && getRoomTotalNotifications(n);
               return (

From f7ba5edb3ac427c47a89535af89eb74f55d4ed31 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 28 Aug 2026 16:52:51 +0530
Subject: [PATCH 123/158] copy room list before sorting in home and direct tab

---
 src/app/pages/client/direct/Direct.tsx | 2 +-
 src/app/pages/client/home/Home.tsx     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index 287198d0..e6b25e49 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -203,7 +203,7 @@ export function Direct() {
 
   const sortedDirects = useMemo(() => {
     if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
-      return directs
+      return Array.from(directs)
         .filter((roomId) => {
           if (roomId === selectedRoomId) return true;
           const notification = roomToNotifications.get(roomId);
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index 7e9942ef..09536bea 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -228,7 +228,7 @@ export function Home() {
 
   const sortedRooms = useMemo(() => {
     if (closedCategories.has(DEFAULT_CATEGORY_ID)) {
-      return rooms
+      return Array.from(rooms)
         .filter((roomId) => {
           if (roomId === selectedRoomId) return true;
           const notification = roomToNotifications.get(roomId);

From ffe9b54dac6c13c7ae2b4bebd9c107dc666177bf Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 28 Aug 2026 17:01:17 +0530
Subject: [PATCH 124/158] change room input placeholder to show encryption
 support

---
 src/app/features/room/RoomInput.tsx | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index fc5a03f0..b795c0ca 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -70,6 +70,8 @@ import { FileDropDialog } from './FileDropDialog';
 import { useUploadItemPicker } from './hooks/useUploadItemPicker';
 import { useUploadItems } from './hooks/useUploadItems';
 import { useUploadsAtom } from './hooks/useUploadsAtom';
+import { useObservableValue } from '../../hooks/useObservableValue';
+import { useClient } from '../../hooks/useClient';
 
 interface RoomInputProps {
   editor: Editor;
@@ -78,7 +80,9 @@ interface RoomInputProps {
 }
 export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
   ({ editor, fileDropContainerRef, threadId }, ref) => {
+    const ct = useClient();
     const roomId = useRoom();
+    const encryptedRooms = useObservableValue(ct.encryptedRooms);
 
     const [enterForNewline] = useSetting('enterForNewline');
     const [hideActivity] = useSetting('hideActivity');
@@ -305,7 +309,9 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
         <CustomEditor
           editor={editor}
           initialValue={draft}
-          placeholder="Send a message..."
+          placeholder={
+            encryptedRooms.has(roomId) ? 'Send an encrypted message...' : 'Send a message...'
+          }
           onKeyDown={handleKeyDown}
           onKeyUp={handleKeyUp}
           onPaste={handlePaste}

From bd53aaa96a6b7285033c2d313d4ca87d7c696327 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 28 Aug 2026 17:20:22 +0530
Subject: [PATCH 125/158] show room access indicator on room header

---
 src/app/components/RoomAccessIndicator.tsx | 41 ++++++++++++++++++++++
 src/app/features/room/RoomViewHeader.tsx   | 10 ++++--
 src/app/pages/client/space/Space.tsx       |  8 ++---
 3 files changed, 51 insertions(+), 8 deletions(-)
 create mode 100644 src/app/components/RoomAccessIndicator.tsx

diff --git a/src/app/components/RoomAccessIndicator.tsx b/src/app/components/RoomAccessIndicator.tsx
new file mode 100644
index 00000000..08716ddd
--- /dev/null
+++ b/src/app/components/RoomAccessIndicator.tsx
@@ -0,0 +1,41 @@
+import { Icon, Icons, IconSrc, Text, Tooltip, TooltipProvider } from 'folds';
+import React from 'react';
+import { JoinRule } from '../../types/matrix/room';
+import { useClient } from '../hooks/useClient';
+import { useObservableValue } from '../hooks/useObservableValue';
+import { useRoomJoinRuleLabel } from './JoinRulesSwitcher';
+
+export const getRoomAccessIconSrc = (joinRule?: JoinRule): IconSrc | undefined => {
+  if (!joinRule) return Icons.Lock;
+
+  if (joinRule === 'public') return Icons.Globe;
+  if (joinRule === 'invite' || joinRule === 'knock' || joinRule === 'private') {
+    return Icons.Lock;
+  }
+
+  return undefined;
+};
+
+export function RoomAccessIndicator({ roomId }: { roomId: string }) {
+  const ct = useClient();
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
+
+  const ruleToLabels = useRoomJoinRuleLabel();
+
+  const iconSrc = getRoomAccessIconSrc(roomToJoinRule.get(roomId));
+  if (!iconSrc) return null;
+
+  return (
+    <TooltipProvider
+      position="Right"
+      align="Center"
+      tooltip={
+        <Tooltip>
+          <Text size="L400">{ruleToLabels[roomToJoinRule.get(roomId) ?? 'private']}</Text>
+        </Tooltip>
+      }
+    >
+      {(triggerRef) => <Icon ref={triggerRef} opacity={0.8} src={iconSrc} size="50" />}
+    </TooltipProvider>
+  );
+}
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 26dacb10..20c2dadb 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -70,6 +70,7 @@ import {
 import { roomToNotificationsAtom } from '../../state/room/roomToNotifications';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { RoomSettingsPage } from '../../state/roomSettings';
+import { RoomAccessIndicator } from '../../components/RoomAccessIndicator';
 
 type RoomMenuProps = {
   requestClose: () => void;
@@ -352,9 +353,12 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
             </Avatar>
           )}
           <Box direction="Column">
-            <Text size={topic ? 'H5' : 'H3'} truncate>
-              {name}
-            </Text>
+            <Box grow="Yes" alignItems="Center" gap="200">
+              <Text size={topic ? 'H5' : 'H3'} truncate>
+                {name}
+              </Text>
+              <RoomAccessIndicator roomId={roomId} />
+            </Box>
             {topic && (
               <UseStateProvider initial={false}>
                 {(viewTopic, setViewTopic) => (
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 768fba50..dd023017 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -92,6 +92,7 @@ import { getJoinRoomStateId } from '../../../../client/storage/collections';
 import { useAllJoinedRoomsSet } from '../../../hooks/useGetRoom';
 import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
 import { useRoomsUnread } from '../../../state/hooks/unread';
+import { RoomAccessIndicator } from '../../../components/RoomAccessIndicator';
 
 type SpaceMenuProps = {
   requestClose: () => void;
@@ -239,11 +240,8 @@ type SpaceHeaderProps = {
   spaceName: string;
 };
 function SpaceHeader({ spaceName }: SpaceHeaderProps) {
-  const ct = useClient();
   const spaceId = useSpace();
   const [menuAnchor, setMenuAnchor] = useState<RectCords>();
-  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
-  const joinRule = roomToJoinRule.get(spaceId);
 
   const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
     const cords = evt.currentTarget.getBoundingClientRect();
@@ -257,11 +255,11 @@ function SpaceHeader({ spaceName }: SpaceHeaderProps) {
     <>
       <PageNavHeader>
         <Box alignItems="Center" grow="Yes" gap="300">
-          <Box grow="Yes" alignItems="Center" gap="100">
+          <Box grow="Yes" alignItems="Center" gap="200">
             <Text size="H4" truncate>
               {spaceName}
             </Text>
-            {joinRule !== 'public' && <Icon src={Icons.Lock} size="50" />}
+            <RoomAccessIndicator roomId={spaceId} />
           </Box>
           <Box shrink="No">
             <IconButton aria-pressed={!!menuAnchor} variant="Background" onClick={handleOpenMenu}>

From 521c9d58172e6a9ef0a166920869937071b0c9f4 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Fri, 28 Aug 2026 21:52:20 +0530
Subject: [PATCH 126/158] add room list avatar and sort by activity settings

---
 .../autocomplete/RoomMentionAutocomplete.tsx  |  7 +++--
 src/app/components/user-profile/UserChips.tsx |  6 ++--
 src/app/features/add-existing/AddExisting.tsx |  7 +++--
 src/app/features/search/Search.tsx            |  6 ++--
 src/app/features/settings/general/General.tsx | 28 +++++++++++++++++++
 src/app/hooks/useSpaceHierarchy.ts            | 23 ++++++++++++++-
 src/app/pages/client/home/Home.tsx            |  9 ++++++
 src/app/pages/client/space/Space.tsx          |  5 +++-
 src/app/state/settings.ts                     |  4 +++
 9 files changed, 85 insertions(+), 10 deletions(-)

diff --git a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
index fc774763..11a4e3a6 100644
--- a/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
+++ b/src/app/components/editor/autocomplete/RoomMentionAutocomplete.tsx
@@ -21,6 +21,7 @@ import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
 import { useGetRoomAvatar } from '../../../hooks/storage/useGetRoomAvatar';
 import { mxcToHttp } from '../../../../client/mxcToHttp';
 import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
+import { useSetting } from '../../../state/hooks/settings';
 
 type MentionAutoCompleteHandler = (roomAliasOrId: string, name: string) => void;
 
@@ -83,6 +84,7 @@ export function RoomMentionAutocomplete({
   const useAuthentication = useMediaAuthentication();
   const mDirects = useAtomValue(mDirectAtom);
   const rooms = useAtomValue(allRoomsAtom);
+  const [showAvatar] = useSetting('roomListShowAvatar');
 
   const getRoomHeroes = useRoomHeroes();
   const getRoomName = useGetRoomName(getRoomHeroes);
@@ -151,6 +153,7 @@ export function RoomMentionAutocomplete({
       ) : (
         autoCompleteRoomIds.map((rId) => {
           const dm = mDirects.has(rId);
+          const isSpace = ct.spaceRooms.read.has(rId);
           const name = getRoomName(rId) ?? 'Unknown';
           const alias = ct.roomToAlias.read.get(rId);
           const avatarMxc = getRoomAvatar(rId);
@@ -179,8 +182,8 @@ export function RoomMentionAutocomplete({
                 </Text>
               }
               before={
-                <Avatar size="200">
-                  {dm ? (
+                <Avatar size="200" radii={isSpace ? '300' : '400'}>
+                  {showAvatar || dm || isSpace ? (
                     <RoomAvatar
                       roomId={rId}
                       src={avatar}
diff --git a/src/app/components/user-profile/UserChips.tsx b/src/app/components/user-profile/UserChips.tsx
index 25dfb3eb..f7573412 100644
--- a/src/app/components/user-profile/UserChips.tsx
+++ b/src/app/components/user-profile/UserChips.tsx
@@ -41,6 +41,7 @@ import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
 import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
 import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
 import { mxcToHttp } from '../../../client/mxcToHttp';
+import { useSetting } from '../../state/hooks/settings';
 
 export function ServerChip({ server }: { server: string }) {
   const ct = useClient();
@@ -233,6 +234,7 @@ type MutualRoomsData = {
 export function MutualRoomsChip({ userId }: { userId: string }) {
   const ct = useClient();
   const mutualRoomsState = useMutualRooms(userId);
+  const [showAvatar] = useSetting('roomListShowAvatar');
 
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const closeUserRoomProfile = useCloseUserRoomProfile();
@@ -304,8 +306,8 @@ export function MutualRoomsChip({ userId }: { userId: string }) {
           closeUserRoomProfile();
         }}
         before={
-          <Avatar size="200" radii={dm ? '400' : '300'}>
-            {dm || space ? (
+          <Avatar size="200" radii={space ? '300' : '400'}>
+            {showAvatar || dm || space ? (
               <RoomAvatar
                 roomId={roomId}
                 src={
diff --git a/src/app/features/add-existing/AddExisting.tsx b/src/app/features/add-existing/AddExisting.tsx
index ce1ae574..327f93ff 100644
--- a/src/app/features/add-existing/AddExisting.tsx
+++ b/src/app/features/add-existing/AddExisting.tsx
@@ -59,6 +59,7 @@ import { getJoinRoomStateId } from '../../../client/storage/collections';
 import { getPowerLevels } from '../../hooks/usePowerLevels';
 import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
 import { mxcToHttp } from '../../../client/mxcToHttp';
+import { useSetting } from '../../state/hooks/settings';
 
 const SEARCH_OPTS: UseAsyncSearchOptions = {
   limit: 500,
@@ -79,6 +80,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
   const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const alive = useAlive();
+  const [showAvatar] = useSetting('roomListShowAvatar');
 
   const mDirects = useAtomValue(mDirectAtom);
   const spaces = useSpaces(ct, allRoomsAtom);
@@ -271,6 +273,7 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                         const roomId = items[vItem.index];
                         const selectedItem = selected?.includes(roomId);
                         const dm = mDirects.has(roomId);
+                        const isSpace = ct.spaceRooms.read.has(roomId);
 
                         const roomName = getRoomName(roomId) ?? 'Unknown';
                         const roomAvatar = getRoomAvatar(roomId);
@@ -291,8 +294,8 @@ export function AddExistingModal({ parentId, space, requestClose }: AddExistingM
                               disabled={applyingChanges}
                               aria-pressed={selectedItem}
                               before={
-                                <Avatar size="200" radii={dm ? '400' : '300'}>
-                                  {dm || ct.spaceRooms.read.has(roomId) ? (
+                                <Avatar size="200" radii={isSpace ? '300' : '400'}>
+                                  {showAvatar || dm || isSpace ? (
                                     <RoomAvatar
                                       roomId={roomId}
                                       src={
diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx
index 221aa084..f151c114 100644
--- a/src/app/features/search/Search.tsx
+++ b/src/app/features/search/Search.tsx
@@ -60,6 +60,7 @@ import { useGetRoomAvatar } from '../../hooks/storage/useGetRoomAvatar';
 import { getRoomTotalNotifications } from '../../state/hooks/roomNotifications';
 import { mxcToHttp } from '../../../client/mxcToHttp';
 import { useRoomsPowerLevels } from '../../hooks/usePowerLevels';
+import { useSetting } from '../../state/hooks/settings';
 
 enum SearchRoomType {
   Rooms = '#',
@@ -136,6 +137,7 @@ export function Search({ requestClose }: SearchProps) {
   const { navigateRoom, navigateSpace } = useRoomNavigate();
   const unreadRooms = useAtomValue(unreadRoomsAtom);
   const roomToNotifications = useAtomValue(roomToNotificationsAtom);
+  const [showAvatar] = useSetting('roomListShowAvatar');
 
   const [searchRoomType, setSearchRoomType] = useState<SearchRoomType>();
 
@@ -370,8 +372,8 @@ export function Search({ requestClose }: SearchProps) {
                             </Box>
                           }
                           before={
-                            <Avatar size="200" radii={dm ? '400' : '300'}>
-                              {dm || isSpace ? (
+                            <Avatar size="200" radii={isSpace ? '300' : '400'}>
+                              {showAvatar || dm || isSpace ? (
                                 <RoomAvatar
                                   roomId={roomId}
                                   src={
diff --git a/src/app/features/settings/general/General.tsx b/src/app/features/settings/general/General.tsx
index 7b685aab..16e13dd9 100644
--- a/src/app/features/settings/general/General.tsx
+++ b/src/app/features/settings/general/General.tsx
@@ -707,6 +707,33 @@ function DateAndTime() {
   );
 }
 
+function RoomList() {
+  const [roomListShowAvatar, setRoomListShowAvatar] = useSetting('roomListShowAvatar');
+  const [roomListByActivity, setRoomListByActivity] = useSetting('roomListByActivity');
+
+  return (
+    <Box direction="Column" gap="100">
+      <Text size="L400">Room List</Text>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Room Avatars"
+          after={
+            <Switch variant="Primary" value={roomListShowAvatar} onChange={setRoomListShowAvatar} />
+          }
+        />
+      </SequenceCard>
+      <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
+        <SettingTile
+          title="Sort by Activity"
+          after={
+            <Switch variant="Primary" value={roomListByActivity} onChange={setRoomListByActivity} />
+          }
+        />
+      </SequenceCard>
+    </Box>
+  );
+}
+
 function Editor() {
   const [enterForNewline, setEnterForNewline] = useSetting('enterForNewline');
   const [isMarkdown, setIsMarkdown] = useSetting('isMarkdown');
@@ -995,6 +1022,7 @@ export function General({ requestClose }: GeneralProps) {
             <Box direction="Column" gap="700">
               <Appearance />
               <DateAndTime />
+              <RoomList />
               <Editor />
               <Messages />
             </Box>
diff --git a/src/app/hooks/useSpaceHierarchy.ts b/src/app/hooks/useSpaceHierarchy.ts
index da6116a6..61c659d3 100644
--- a/src/app/hooks/useSpaceHierarchy.ts
+++ b/src/app/hooks/useSpaceHierarchy.ts
@@ -17,6 +17,7 @@ import { useRoomsLatestEvent } from './useRoomsLatestEvent';
 import { RoomToNotifications } from '../state/room/roomToNotifications';
 import { makeNavCategoryId } from '../state/closedNavCategories';
 import { getRoomTotalNotifications } from '../state/hooks/roomNotifications';
+import { useSetting } from '../state/hooks/settings';
 
 export type HierarchyItemSpace = {
   roomId: string;
@@ -223,6 +224,7 @@ export const useJoinedHierarchyItems = (
   selectedRoomId: string | undefined
 ) => {
   const roomToLatestEvent = useRoomsLatestEvent(rooms);
+  const [sortByActivity] = useSetting('roomListByActivity');
 
   const prepareItems = useCallback(
     (sId: string, items: HierarchyItem[]) => {
@@ -243,10 +245,29 @@ export const useJoinedHierarchyItems = (
           );
       }
 
+      if (sortByActivity) {
+        items.sort((h1, h2) =>
+          factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts)(
+            h1.roomId,
+            h2.roomId
+          )
+        );
+        return items;
+      }
+
       items.sort(hierarchyItemTs).sort(hierarchyItemByOrder);
+
       return items;
     },
-    [roomToLatestEvent, closedCategories, spaceId, roomToNotifications, unreadRooms, selectedRoomId]
+    [
+      roomToLatestEvent,
+      closedCategories,
+      spaceId,
+      roomToNotifications,
+      unreadRooms,
+      selectedRoomId,
+      sortByActivity,
+    ]
   );
 
   const hierarchyItems: HierarchyItem[] = useMemo(
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index 09536bea..0f2e3288 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -207,6 +207,8 @@ export function Home() {
   useNavToActivePathMapper('home');
   const scrollRef = useRef<HTMLDivElement>(null);
   const rooms = useHomeRooms();
+  const [sortByActivity] = useSetting('roomListByActivity');
+  const [showAvatar] = useSetting('roomListShowAvatar');
 
   const getRoomHeroes = useRoomHeroes();
   const getRoomName = useGetRoomName(getRoomHeroes);
@@ -237,6 +239,11 @@ export function Home() {
         })
         .sort(factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts));
     }
+    if (sortByActivity) {
+      return Array.from(rooms).sort(
+        factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts)
+      );
+    }
     return Array.from(rooms).sort(factoryRoomIdByAtoZ(getRoomName));
   }, [
     getRoomName,
@@ -246,6 +253,7 @@ export function Home() {
     unreadRooms,
     roomToLatestEvent,
     selectedRoomId,
+    sortByActivity,
   ]);
 
   const virtualizer = useVirtualizer({
@@ -371,6 +379,7 @@ export function Home() {
                         roomId={roomId}
                         roomName={getRoomName(roomId) ?? 'Unknown'}
                         avatarUrl={getRoomAvatar(roomId)}
+                        showAvatar={showAvatar}
                         selected={selected}
                         joinRule={roomToJoinRule.get(roomId)}
                         linkPath={getHomeRoomPath(ct.roomToAlias.read.get(roomId) ?? roomId)}
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index dd023017..2cb02bcf 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -378,6 +378,9 @@ export function SpaceTombstone({ roomId, replacementRoomId }: SpaceTombstoneProp
 export function Space() {
   const ct = useClient();
   const spaceId = useSpace();
+
+  const [showAvatar] = useSetting('roomListShowAvatar');
+
   useNavToActivePathMapper(spaceId);
   const spaceRooms = useObservableValue(ct.spaceRooms);
   const roomToAlias = useObservableValue(ct.roomToAlias);
@@ -521,7 +524,7 @@ export function Space() {
                     roomName={getRoomName(roomId) ?? 'Unknown'}
                     avatarUrl={getRoomAvatar(roomId)}
                     selected={selectedRoomId === roomId}
-                    showAvatar={mDirects.has(roomId)}
+                    showAvatar={showAvatar || mDirects.has(roomId)}
                     joinRule={roomToJoinRule.get(roomId)}
                     linkPath={getToLink(roomId)}
                     notificationMode={getRoomNotificationMode(notificationPreferences, roomId)}
diff --git a/src/app/state/settings.ts b/src/app/state/settings.ts
index c7272d6c..9256a536 100644
--- a/src/app/state/settings.ts
+++ b/src/app/state/settings.ts
@@ -27,6 +27,8 @@ export interface Settings {
   twitterEmoji: boolean;
   pageZoom: number;
   hideActivity: boolean;
+  roomListShowAvatar: boolean;
+  roomListByActivity: boolean;
 
   isPeopleDrawer: boolean;
   memberSortFilterIndex: number;
@@ -61,6 +63,8 @@ const defaultSettings: Settings = {
   twitterEmoji: false,
   pageZoom: 100,
   hideActivity: false,
+  roomListShowAvatar: false,
+  roomListByActivity: false,
 
   isPeopleDrawer: true,
   memberSortFilterIndex: 0,

From ce0a3b90fecf2b9b611c5acb3a8cf1d679594a92 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 29 Aug 2026 21:44:22 +0530
Subject: [PATCH 127/158] rollback reply to old style

---
 src/app/components/message/Reply.css.ts       |  15 --
 src/app/components/message/Reply.tsx          | 170 +++++-------------
 src/app/features/room/OutboxView.tsx          |  11 +-
 src/app/features/room/RoomInput.tsx           |   2 +-
 src/app/features/room/RoomTimeline.tsx        |  47 +++--
 src/app/features/room/message/Message.tsx     |  10 +-
 .../room/thread-view/TimelineView.tsx         |  43 ++---
 7 files changed, 94 insertions(+), 204 deletions(-)
 delete mode 100644 src/app/components/message/Reply.css.ts

diff --git a/src/app/components/message/Reply.css.ts b/src/app/components/message/Reply.css.ts
deleted file mode 100644
index 24c11682..00000000
--- a/src/app/components/message/Reply.css.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { style } from '@vanilla-extract/css';
-import { color, config, toRem } from 'folds';
-
-export const ReplyBar = style({
-  position: 'relative',
-  top: toRem(8),
-  marginLeft: 'auto',
-
-  width: toRem(19),
-  height: `calc(100% - ${toRem(4)})`,
-
-  borderLeft: `${config.borderWidth.B500} solid ${color.Surface.ContainerLine}`,
-  borderTop: `${config.borderWidth.B500} solid ${color.Surface.ContainerLine}`,
-  borderTopLeftRadius: config.radii.R400,
-});
diff --git a/src/app/components/message/Reply.tsx b/src/app/components/message/Reply.tsx
index b623d89c..fb51788a 100644
--- a/src/app/components/message/Reply.tsx
+++ b/src/app/components/message/Reply.tsx
@@ -1,11 +1,10 @@
-import { Box, Text, color, config, toRem } from 'folds';
+import { Box, Icon, Icons, Text, color, config, toRem } from 'folds';
 import React, { MouseEventHandler, ReactNode, useCallback, useMemo } from 'react';
 import { ClientEventWithoutRoomId } from 'neurone/lib/api/types';
 import { HTMLReactParserOptions } from 'html-react-parser';
 import { Opts } from 'linkifyjs';
 import { LinePlaceholder } from './placeholder';
 import { randomNumberBetween } from '../../utils/common';
-import * as css from './Reply.css';
 import { MessageFailedContent } from './content';
 import { useRoomEvent } from '../../hooks/useRoomEvent';
 import colorMXID from '../../../util/colorMXID';
@@ -14,9 +13,6 @@ import { GetRoomMemberNameCallback } from '../../hooks/useRoomMembers';
 import { rContent, rUnsigned } from '../../../client/reader';
 import { TimelineView } from '../../../client/room';
 import { RenderReplyContent } from '../RenderReplyContent';
-import { Time } from './Time';
-import { BubbleLayout, CompactLayout, MessageBase, ModernLayout } from './layout';
-import { MessageLayout, MessageSpacing } from '../../state/settings';
 import { RedactedContent } from './MsgTypeRenderers';
 import { HoverUnderline } from '../../styles/Text.css';
 import { useObservableValueOptionally } from '../../hooks/useObservableValue';
@@ -26,20 +22,11 @@ import { useClient } from '../../hooks/useClient';
 
 type ReplyMessageProps = {
   username?: ReactNode;
-  time?: ReactNode;
-  messageLayout: MessageLayout;
+  usernameColor?: string;
   children: ReactNode;
   onClick?: () => void;
 };
-export function ReplyMessage({
-  username,
-  time,
-  messageLayout,
-  onClick,
-  children,
-}: ReplyMessageProps) {
-  const msgBarJSX = <div className={css.ReplyBar} />;
-
+export function ReplyMessage({ username, usernameColor, onClick, children }: ReplyMessageProps) {
   const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
     if (!onClick) return;
 
@@ -71,52 +58,14 @@ export function ReplyMessage({
       }
     : {};
 
-  if (messageLayout === MessageLayout.Compact) {
-    return (
-      <CompactLayout before={msgBarJSX}>
-        <Box grow="Yes" direction="Column">
-          <Box alignItems="Baseline" shrink="No" gap="200">
-            <Box shrink="No" style={{ maxWidth: toRem(100) }}>
-              {username}
-            </Box>
-            <Box shrink="Yes" {...commonProps}>
-              {children}
-            </Box>
-            {time}
-          </Box>
-        </Box>
-      </CompactLayout>
-    );
-  }
-
-  if (messageLayout === MessageLayout.Bubble) {
-    return (
-      <BubbleLayout hideBubble before={msgBarJSX}>
-        <Box alignItems="Baseline" shrink="No" gap="200">
-          <Box shrink="No" style={{ maxWidth: toRem(100) }}>
-            {username}
-          </Box>
-          <Box shrink="Yes" {...commonProps}>
-            {children}
-          </Box>
-          {time}
-        </Box>
-      </BubbleLayout>
-    );
-  }
-
   return (
-    <ModernLayout before={msgBarJSX}>
-      <Box alignItems="Baseline" shrink="No" gap="200">
-        <Box shrink="No" style={{ maxWidth: toRem(100) }}>
-          {username}
-        </Box>
-        <Box shrink="Yes" {...commonProps}>
-          {children}
-        </Box>
-        {time}
+    <Box alignItems="Center" gap="100">
+      <Box shrink="No" gap="0" alignItems="Center" style={{ maxWidth: toRem(120) }}>
+        <Icon style={{ color: usernameColor }} size="100" src={Icons.ReplyArrow} filled />
+        {username}
       </Box>
-    </ModernLayout>
+      <Box {...commonProps}>{children}</Box>
+    </Box>
   );
 }
 
@@ -125,7 +74,6 @@ type ReplyProps = {
   eventId: string;
   onClick?: (replyId: string) => void;
   onUserClick?: MouseEventHandler<HTMLButtonElement>;
-  onUsernameClick?: MouseEventHandler<HTMLButtonElement>;
   getMemberPowerTag?: GetMemberPowerTag;
   accessibleTagColors?: Map<string, string>;
   legacyUsernameColor?: boolean;
@@ -133,10 +81,6 @@ type ReplyProps = {
   timeline?: TimelineView;
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: Opts;
-  hour24Clock: boolean;
-  messageLayout: MessageLayout;
-  dateFormatString: string;
-  messageSpacing: MessageSpacing;
 };
 
 export function Reply({
@@ -144,7 +88,6 @@ export function Reply({
   eventId,
   onClick,
   onUserClick,
-  onUsernameClick,
   getMemberPowerTag,
   accessibleTagColors,
   legacyUsernameColor,
@@ -152,10 +95,6 @@ export function Reply({
   timeline,
   htmlReactParserOptions,
   linkifyOpts,
-  hour24Clock,
-  dateFormatString,
-  messageLayout,
-  messageSpacing,
 }: ReplyProps) {
   const ct = useClient();
   const placeholderWidth = useMemo(() => randomNumberBetween(40, 400), []);
@@ -211,58 +150,47 @@ export function Reply({
     );
   };
 
+  const replyClick = onClick ? () => onClick(eventId) : undefined;
+
   return (
-    <MessageBase space={messageSpacing}>
-      <ReplyMessage
-        onClick={onClick ? () => onClick(eventId) : undefined}
-        messageLayout={messageLayout}
-        username={
-          sender && (
-            <Text
-              as="button"
-              onClick={onUsernameClick}
-              onContextMenu={onUserClick}
-              className={HoverUnderline}
-              style={{ color: usernameColor, cursor: 'pointer' }}
-              data-user-id={sender}
-              size="T300"
-              truncate
-            >
-              <b>{getMemberName(sender)}</b>
-            </Text>
-          )
-        }
-        time={
-          replyEvent && (
-            <Time
-              as="button"
-              className={HoverUnderline}
-              onClick={onClick ? () => onClick(eventId) : undefined}
-              ts={replyEvent.origin_server_ts}
-              dateFormatString={dateFormatString}
-              hour24Clock={hour24Clock}
-            />
-          )
-        }
-        data-event-id={eventId}
-      >
-        {replyEvent && renderEventContent(replyEvent)}
-        {replyEvent === null && (
-          <Text size="T300">
-            <MessageFailedContent />
+    <ReplyMessage
+      onClick={replyClick}
+      usernameColor={usernameColor}
+      username={
+        sender && (
+          <Text
+            as="button"
+            onClick={replyClick}
+            onContextMenu={onUserClick}
+            className={HoverUnderline}
+            style={{ color: usernameColor, cursor: 'pointer' }}
+            data-user-id={sender}
+            size="T300"
+            truncate
+          >
+            <b>{getMemberName(sender)}</b>
           </Text>
-        )}
-        {replyEvent === undefined && (
-          <LinePlaceholder
-            style={{
-              backgroundColor: color.SurfaceVariant.ContainerActive,
-              width: toRem(placeholderWidth),
-              maxWidth: '100%',
-              height: config.lineHeight.T300,
-            }}
-          />
-        )}
-      </ReplyMessage>
-    </MessageBase>
+        )
+      }
+      data-event-id={eventId}
+    >
+      {replyEvent && renderEventContent(replyEvent)}
+      {replyEvent === null && (
+        <Text size="T300">
+          <MessageFailedContent />
+        </Text>
+      )}
+      {replyEvent === undefined && (
+        <LinePlaceholder
+          style={{
+            backgroundColor: color.SurfaceVariant.ContainerActive,
+            width: toRem(placeholderWidth),
+            maxWidth: '100%',
+            margin: `${toRem(2)} 0`,
+            height: `calc(${config.lineHeight.T300} - ${toRem(4)})`,
+          }}
+        />
+      )}
+    </ReplyMessage>
   );
 }
diff --git a/src/app/features/room/OutboxView.tsx b/src/app/features/room/OutboxView.tsx
index 90398e57..848cc335 100644
--- a/src/app/features/room/OutboxView.tsx
+++ b/src/app/features/room/OutboxView.tsx
@@ -224,8 +224,6 @@ export function OutboxView({
   onUsernameClick,
   mediaAutoLoad,
   urlPreview,
-  hour24Clock,
-  dateFormatString,
   onReplyClick,
   htmlReactParserOptions,
   linkifyOpts,
@@ -242,8 +240,6 @@ export function OutboxView({
   onUsernameClick: MouseEventHandler<HTMLButtonElement>;
   mediaAutoLoad?: boolean;
   urlPreview?: boolean;
-  hour24Clock: boolean;
-  dateFormatString: string;
   onReplyClick?: () => void;
   htmlReactParserOptions: HTMLReactParserOptions;
   linkifyOpts: Opts;
@@ -287,6 +283,7 @@ export function OutboxView({
             roomId={roomId}
             eventId={replyEventId}
             onClick={onReplyClick}
+            onUserClick={onUserClick}
             getMemberPowerTag={getMemberPowerTag}
             accessibleTagColors={accessibleTagColors}
             legacyUsernameColor={legacyUsernameColor || direct}
@@ -294,10 +291,6 @@ export function OutboxView({
             timeline={timeline}
             htmlReactParserOptions={htmlReactParserOptions}
             linkifyOpts={linkifyOpts}
-            hour24Clock={hour24Clock}
-            dateFormatString={dateFormatString}
-            messageLayout={messageLayout}
-            messageSpacing={messageSpacing}
           />
         );
 
@@ -306,7 +299,6 @@ export function OutboxView({
             {dayDivider && (
               <ComboDivider ts={sender.localEvent.ts} messageSpacing={messageSpacing} />
             )}
-            {replyJSX}
             <MessageSending
               key={sender.localEvent.txnId}
               outbox={timeline.outbox}
@@ -322,6 +314,7 @@ export function OutboxView({
               accessibleTagColors={accessibleTagColors}
               legacyUsernameColor={legacyUsernameColor || direct}
             >
+              {replyJSX}
               <RenderMessageContent
                 displayName={membersAPI.getName(ct.session.userId)}
                 eventType={sender.localEvent.original.type}
diff --git a/src/app/features/room/RoomInput.tsx b/src/app/features/room/RoomInput.tsx
index b795c0ca..b22c61f4 100644
--- a/src/app/features/room/RoomInput.tsx
+++ b/src/app/features/room/RoomInput.tsx
@@ -333,7 +333,7 @@ export const RoomInput = forwardRef<HTMLDivElement, RoomInputProps>(
                   </IconButton>
                   <Box grow="Yes" direction="Row" gap="200" alignItems="Center">
                     <Text size="T300" truncate>
-                      Quote{' '}
+                      Reply{' '}
                       <strong style={{ color: replyUsernameColor }}>
                         @{memberAPI.getName(replyDraft.userId)}
                       </strong>
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index df0bbc70..29f5686f 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -389,6 +389,25 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
       );
     }
 
+    const replyEventId = getReplyId(event.content);
+
+    const replyJSX =
+      !getThreadId(event) && replyEventId ? (
+        <Reply
+          roomId={roomId}
+          eventId={replyEventId}
+          onClick={handleOpenReply}
+          onUserClick={handleUserClick}
+          getMemberPowerTag={getMemberPowerTag}
+          accessibleTagColors={accessiblePowerTagColors}
+          legacyUsernameColor={legacyUsernameColor || direct}
+          getMemberName={membersAPI.getName}
+          timeline={timeline}
+          htmlReactParserOptions={htmlReactParserInlineOptions}
+          linkifyOpts={linkifyOpts}
+        />
+      ) : null;
+
     const threadTimeline = threads.get(event.event_id);
 
     return (
@@ -426,6 +445,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
         hour24Clock={hour24Clock}
         dateFormatString={dateFormatString}
       >
+        {replyJSX}
         {redacted.has(event.event_id) ? (
           <RedactedContent />
         ) : (
@@ -519,34 +539,9 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     if (newDivider && dividerJSX) clearNewDivider();
     if (dayDivider && dividerJSX) clearDayDivider();
 
-    const replyEventId = getReplyId(event.content);
-
-    const replyJSX =
-      !getThreadId(event) && replyEventId ? (
-        <Reply
-          roomId={roomId}
-          eventId={replyEventId}
-          onClick={handleOpenReply}
-          onUserClick={handleUserClick}
-          onUsernameClick={handleUsernameClick}
-          getMemberPowerTag={getMemberPowerTag}
-          accessibleTagColors={accessiblePowerTagColors}
-          legacyUsernameColor={legacyUsernameColor || direct}
-          getMemberName={membersAPI.getName}
-          timeline={timeline}
-          htmlReactParserOptions={htmlReactParserInlineOptions}
-          linkifyOpts={linkifyOpts}
-          hour24Clock={hour24Clock}
-          dateFormatString={dateFormatString}
-          messageLayout={messageLayout}
-          messageSpacing={messageSpacing}
-        />
-      ) : null;
-
     return (
       <React.Fragment key={event.event_id}>
         {dividerJSX}
-        {replyJSX}
         {eventJSX}
       </React.Fragment>
     );
@@ -612,8 +607,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
                 legacyUsernameColor={legacyUsernameColor || direct}
                 mediaAutoLoad={mediaAutoLoad}
                 urlPreview={showUrlPreview}
-                hour24Clock={hour24Clock}
-                dateFormatString={dateFormatString}
                 htmlReactParserOptions={htmlReactParserOptions}
                 linkifyOpts={linkifyOpts}
               />
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index dc809a2c..7dd462f7 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -937,8 +937,6 @@ export const Message = as<'div', MessageProps>(
       }, 100);
     };
 
-    // hide margin-top space between message and reply
-    const hasReply = !!getReplyId(event.content) && !fallbackReply(event.content);
     return (
       <MessageBase
         className={classNames(css.MessageBase, className, {
@@ -946,7 +944,7 @@ export const Message = as<'div', MessageProps>(
         })}
         tabIndex={0}
         space={messageSpacing}
-        collapse={collapse || hasReply}
+        collapse={collapse}
         highlight={highlight}
         selected={!!selected || !!menuAnchor || !!emojiBoardAnchor}
         {...props}
@@ -1002,7 +1000,7 @@ export const Message = as<'div', MessageProps>(
                   size="300"
                   radii="300"
                 >
-                  <Icon src={Icons.BlockQuote} size="100" />
+                  <Icon src={Icons.ReplyArrow} size="100" />
                 </IconButton>
                 {canThread && (
                   <IconButton
@@ -1076,7 +1074,7 @@ export const Message = as<'div', MessageProps>(
                           )}
                           <MenuItem
                             size="300"
-                            after={<Icon size="100" src={Icons.BlockQuote} />}
+                            after={<Icon size="100" src={Icons.ReplyArrow} />}
                             radii="300"
                             data-event-id={event.event_id}
                             data-sender-id={event.sender}
@@ -1091,7 +1089,7 @@ export const Message = as<'div', MessageProps>(
                               size="T300"
                               truncate
                             >
-                              Quote
+                              Reply
                             </Text>
                           </MenuItem>
                           {canThread && (
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index aed83486..f6979bab 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -289,6 +289,23 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
     const editedEvent = getLatestEditEvent(event, editEvents, redacted);
     const highlighted = focusItem?.index === item && focusItem.highlight;
 
+    const replyEventId = fallbackReply(event.content) ? undefined : getReplyId(event.content);
+    const replyJSX = replyEventId ? (
+      <Reply
+        roomId={roomId}
+        eventId={replyEventId}
+        onClick={handleOpenReply}
+        onUserClick={handleUserClick}
+        getMemberPowerTag={getMemberPowerTag}
+        accessibleTagColors={accessiblePowerTagColors}
+        legacyUsernameColor={legacyUsernameColor || direct}
+        getMemberName={membersAPI.getName}
+        timeline={threadTimeline}
+        htmlReactParserOptions={htmlReactParserInlineOptions}
+        linkifyOpts={linkifyOpts}
+      />
+    ) : null;
+
     const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
       <Reactions
         style={{ marginTop: config.space.S200 }}
@@ -332,6 +349,7 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
         hour24Clock={hour24Clock}
         dateFormatString={dateFormatString}
       >
+        {replyJSX}
         {redacted.has(event.event_id) ? (
           <RedactedContent />
         ) : (
@@ -411,32 +429,9 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
     if (newDivider && dividerJSX) clearNewDivider();
     if (dayDivider && dividerJSX) clearDayDivider();
 
-    const replyEventId = fallbackReply(event.content) ? undefined : getReplyId(event.content);
-    const replyJSX = replyEventId ? (
-      <Reply
-        roomId={roomId}
-        eventId={replyEventId}
-        onClick={handleOpenReply}
-        onUserClick={handleUserClick}
-        onUsernameClick={handleUsernameClick}
-        getMemberPowerTag={getMemberPowerTag}
-        accessibleTagColors={accessiblePowerTagColors}
-        legacyUsernameColor={legacyUsernameColor || direct}
-        getMemberName={membersAPI.getName}
-        timeline={threadTimeline}
-        htmlReactParserOptions={htmlReactParserInlineOptions}
-        linkifyOpts={linkifyOpts}
-        hour24Clock={hour24Clock}
-        dateFormatString={dateFormatString}
-        messageLayout={messageLayout}
-        messageSpacing={messageSpacing}
-      />
-    ) : null;
-
     return (
       <React.Fragment key={event.event_id}>
         {dividerJSX}
-        {replyJSX}
         {eventJSX}
       </React.Fragment>
     );
@@ -522,8 +517,6 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
                 legacyUsernameColor={legacyUsernameColor || direct}
                 mediaAutoLoad={mediaAutoLoad}
                 urlPreview={showUrlPreview}
-                hour24Clock={hour24Clock}
-                dateFormatString={dateFormatString}
                 htmlReactParserOptions={htmlReactParserOptions}
                 linkifyOpts={linkifyOpts}
               />

From f59332cf99e8550d4ffafe58d61749f5b90473fb Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 31 Aug 2026 15:18:24 +0530
Subject: [PATCH 128/158] allow reactions in timeline

---
 src/app/components/message/Reaction.css.ts    |  17 +-
 src/app/components/message/Reaction.tsx       |  76 ++---
 src/app/features/room/RoomTimeline.tsx        |   8 +-
 .../features/room/hooks/useSendReaction.ts    |  56 ++++
 src/app/features/room/message/Reactions.tsx   | 261 +++++++++++++++---
 .../room/thread-view/TimelineView.tsx         |   8 +-
 src/app/utils/room.ts                         |  11 +-
 src/client/room/local-event/LocalEvent.ts     |   6 +-
 .../room/local-event/LocalEventSender.ts      |   6 +-
 9 files changed, 358 insertions(+), 91 deletions(-)
 create mode 100644 src/app/features/room/hooks/useSendReaction.ts

diff --git a/src/app/components/message/Reaction.css.ts b/src/app/components/message/Reaction.css.ts
index f020080e..6182b44b 100644
--- a/src/app/components/message/Reaction.css.ts
+++ b/src/app/components/message/Reaction.css.ts
@@ -1,4 +1,4 @@
-import { createVar, style } from '@vanilla-extract/css';
+import { createVar, keyframes, style } from '@vanilla-extract/css';
 import { DefaultReset, FocusOutline, color, config, toRem } from 'folds';
 
 const Container = createVar();
@@ -48,6 +48,7 @@ export const Reaction = style([
       },
       '&[aria-disabled=true], &:disabled': {
         cursor: 'not-allowed',
+        backgroundColor: `${Container} !important`,
       },
     },
   },
@@ -63,6 +64,20 @@ export const ReactionText = style([
     lineHeight: toRem(20),
   },
 ]);
+const scaleAnimation = keyframes({
+  '0%': {
+    transform: 'scale(1)',
+  },
+  '50%': {
+    transform: 'scale(1.2)',
+  },
+  '100%': {
+    transform: 'scale(1)',
+  },
+});
+export const ReactionChangeAnimation = style({
+  animation: `${scaleAnimation} 1000ms ease-in-out infinite`,
+});
 
 export const ReactionImg = style([
   DefaultReset,
diff --git a/src/app/components/message/Reaction.tsx b/src/app/components/message/Reaction.tsx
index ebce3dd4..7be632b0 100644
--- a/src/app/components/message/Reaction.tsx
+++ b/src/app/components/message/Reaction.tsx
@@ -4,45 +4,59 @@ import classNames from 'classnames';
 import * as css from './Reaction.css';
 import { getHexcodeForEmoji, getShortcodeFor } from '../../plugins/emoji';
 import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
-import { ClientContext } from '../../../client/context';
 import { mxcToHttp } from '../../../client/mxcToHttp';
+import { useClient } from '../../hooks/useClient';
+import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 
 export const Reaction = as<
   'button',
   {
-    ct: ClientContext;
     count: number;
+    adding?: boolean;
+    removing?: boolean;
     reaction: string;
-    useAuthentication?: boolean;
   }
->(({ className, ct, count, reaction, useAuthentication, ...props }, ref) => (
-  <Box
-    as="button"
-    className={classNames(css.Reaction, className)}
-    alignItems="Center"
-    shrink="No"
-    gap="200"
-    {...props}
-    ref={ref}
-  >
-    <Text className={css.ReactionText} as="span" size="T400">
-      {reaction.startsWith('mxc://') ? (
-        <img
-          className={css.ReactionImg}
-          src={mxcToHttp(ct.session.baseUrl, reaction, useAuthentication).url() ?? reaction}
-          alt={reaction}
-        />
-      ) : (
-        <Text as="span" size="Inherit" truncate>
-          {reaction}
-        </Text>
-      )}
-    </Text>
-    <Text as="span" size="T300">
-      {count}
-    </Text>
-  </Box>
-));
+>(({ className, count, adding, removing, reaction, ...props }, ref) => {
+  const ct = useClient();
+  const useAuthentication = useMediaAuthentication();
+
+  return (
+    <Box
+      as="button"
+      className={classNames(css.Reaction, className)}
+      alignItems="Center"
+      shrink="No"
+      gap="200"
+      {...props}
+      ref={ref}
+    >
+      <Text
+        className={classNames(css.ReactionText, { [css.ReactionChangeAnimation]: adding })}
+        as="span"
+        size="T400"
+      >
+        {reaction.startsWith('mxc://') ? (
+          <img
+            className={css.ReactionImg}
+            src={mxcToHttp(ct.session.baseUrl, reaction, useAuthentication).url() ?? reaction}
+            alt={reaction}
+          />
+        ) : (
+          <Text as="span" size="Inherit" truncate>
+            {reaction}
+          </Text>
+        )}
+      </Text>
+      <Text
+        className={classNames({ [css.ReactionChangeAnimation]: removing })}
+        as="span"
+        size="T300"
+      >
+        {count}
+      </Text>
+    </Box>
+  );
+});
 
 type ReactionTooltipMsgProps = {
   reaction: string;
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 29f5686f..2ac09799 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -75,6 +75,7 @@ import { useUserReadReceipt } from '../../hooks/useReadReceipt';
 import { useMessageParserOptions } from '../../hooks/useMessageParserOptions';
 import { MessageContent } from '../../components/MessageContent';
 import { MessageEditor } from './message/MessageEditor';
+import { useSendReaction } from './hooks/useSendReaction';
 
 type RoomTimelineProps = {
   eventId?: string;
@@ -312,9 +313,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const handleUsernameClick = useUsernameClickHandler(editor);
   const [replyDraft, handleReplyClick] = useReplyClickHandler(editor);
 
-  const handleReactionToggle = useCallback((targetEventId: string) => {
-    console.log(targetEventId);
-  }, []);
+  const handleReactionToggle = useSendReaction();
 
   const handleEdit = useCallback(
     (editEvtId?: string) => {
@@ -353,10 +352,11 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
       <Reactions
         style={{ marginTop: config.space.S200 }}
+        roomId={roomId}
         reactions={reactionEvents}
         eventId={event.event_id}
         canSendReaction={canSendReaction}
-        onReactionToggle={handleReactionToggle}
+        canRedactReaction={canRedact || canDeleteOwn}
       />
     );
 
diff --git a/src/app/features/room/hooks/useSendReaction.ts b/src/app/features/room/hooks/useSendReaction.ts
new file mode 100644
index 00000000..ae9d77be
--- /dev/null
+++ b/src/app/features/room/hooks/useSendReaction.ts
@@ -0,0 +1,56 @@
+import { useCallback } from 'react';
+import { ReactionContent, RelationType } from '../../../../types/matrix/common';
+import { MessageEvent } from '../../../../types/matrix/room';
+import { useClient } from '../../../hooks/useClient';
+import {
+  EventSenderIdle,
+  LocalEvent,
+  LocalEventSender,
+  LocalMessage,
+} from '../../../../client/room/local-event';
+import { useRoom } from '../../../hooks/useRoom';
+import { useTimelineView } from './useTimeline';
+
+export const useSendReaction = () => {
+  const ct = useClient();
+  const roomId = useRoom();
+  const timeline = useTimelineView();
+
+  const handleAddReaction = useCallback(
+    (targetEventId: string, key: string, shortcode?: string) => {
+      const redacted = timeline.relations.redacted.read;
+      const reactions = timeline.relations.reactions.eventToRelations.read
+        .get(targetEventId)
+        ?.filter((r) => !redacted.has(r.event_id));
+      if (
+        reactions?.some(
+          (evt) => evt.sender === ct.session.userId && evt.content['m.relates_to'].key === key
+        )
+      ) {
+        // Already reacted with this emoji
+        return;
+      }
+
+      const content: ReactionContent = {
+        'm.relates_to': {
+          event_id: targetEventId,
+          key,
+          rel_type: RelationType.Annotation,
+        },
+        shortcode,
+      };
+
+      const localMessage = new LocalMessage(roomId, MessageEvent.Reaction, content);
+      const txnId = ct.getTxnId();
+      const localEvent = new LocalEvent(localMessage, localMessage, txnId, Date.now());
+      const eventSender = new LocalEventSender(localEvent, ct.requestAuthJSON);
+
+      if (eventSender.state.read instanceof EventSenderIdle) {
+        eventSender.state.read.send();
+      }
+    },
+    [ct, roomId, timeline]
+  );
+
+  return handleAddReaction;
+};
diff --git a/src/app/features/room/message/Reactions.tsx b/src/app/features/room/message/Reactions.tsx
index b01068cd..aa361f5c 100644
--- a/src/app/features/room/message/Reactions.tsx
+++ b/src/app/features/room/message/Reactions.tsx
@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useMemo, useState } from 'react';
+import React, { MouseEventHandler, useEffect, useMemo, useState } from 'react';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import {
   Box,
@@ -14,25 +14,220 @@ import {
 } from 'folds';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { putRedact } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { Reaction, ReactionTooltipMsg } from '../../../components/message';
 import * as css from './styles.css';
 import { ReactionViewer } from '../reaction-viewer';
 import { stopPropagation } from '../../../utils/keyboard';
-import { useMediaAuthentication } from '../../../hooks/useMediaAuthentication';
-import { ReactionContent } from '../../../../types/matrix/common';
+import { ReactionContent, RelationType } from '../../../../types/matrix/common';
 import { useClient } from '../../../hooks/useClient';
-import { getReactionGroups } from '../../../utils/room';
+import { getReactionGroups, ReactionGroup } from '../../../utils/room';
+import {
+  EventSenderError,
+  EventSenderIdle,
+  EventSenderPending,
+  LocalEvent,
+  LocalEventSender,
+  LocalMessage,
+} from '../../../../client/room/local-event';
+import { MessageEvent } from '../../../../types/matrix/room';
+import { useObservableValueOptionally } from '../../../hooks/useObservableValue';
+import { useAlive } from '../../../hooks/useAlive';
+
+type ReactionUnpressedProps = {
+  roomId: string;
+  eventId: string;
+  reaction: ReactionGroup;
+  onViewReaction: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+};
+function ReactionUnpressed({
+  roomId,
+  eventId,
+  reaction,
+  onViewReaction,
+  disabled,
+}: ReactionUnpressedProps) {
+  const ct = useClient();
+
+  const [sender, setSender] = useState<LocalEventSender<ReactionContent>>();
+
+  const senderState = useObservableValueOptionally(sender?.state);
+
+  useEffect(() => {
+    if (senderState instanceof EventSenderError) {
+      setSender(undefined);
+    }
+  }, [senderState]);
+
+  const handleToggleReaction = () => {
+    if (senderState instanceof EventSenderPending) {
+      senderState.abort();
+      setSender(undefined);
+      return;
+    }
+
+    // guard against double reaction
+    // we have already clicked
+    if (sender) return;
+
+    const content: ReactionContent = {
+      'm.relates_to': {
+        event_id: eventId,
+        key: reaction.key,
+        rel_type: RelationType.Annotation,
+      },
+      shortcode: reaction.shortcode,
+    };
+
+    const localMessage = new LocalMessage(roomId, MessageEvent.Reaction, content);
+    const txnId = ct.getTxnId();
+    const localEvent = new LocalEvent(localMessage, localMessage, txnId, Date.now());
+    const eventSender = new LocalEventSender(localEvent, ct.requestAuthJSON);
+
+    if (eventSender.state.read instanceof EventSenderIdle) {
+      eventSender.state.read.send();
+    }
+
+    setSender(eventSender);
+  };
+
+  return (
+    <TooltipProvider
+      key={reaction.key}
+      position="Top"
+      tooltip={
+        <Tooltip style={{ maxWidth: toRem(200) }}>
+          <Text className={css.ReactionsTooltipText} size="T300">
+            <ReactionTooltipMsg
+              shortcode={reaction.shortcode}
+              reaction={reaction.key}
+              users={Array.from(reaction.users)}
+            />
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(targetRef) => (
+        <Reaction
+          ref={targetRef}
+          data-reaction-key={reaction.key}
+          aria-pressed={!!sender}
+          reaction={reaction.key}
+          count={sender ? reaction.users.size + 1 : reaction.users.size}
+          adding={!!sender}
+          onClick={disabled ? undefined : handleToggleReaction}
+          onContextMenu={onViewReaction}
+          aria-disabled={disabled}
+        />
+      )}
+    </TooltipProvider>
+  );
+}
+
+type ReactionPressedProps = {
+  roomId: string;
+  redactEventId: string;
+  reaction: ReactionGroup;
+  onViewReaction: MouseEventHandler<HTMLButtonElement>;
+  disabled?: boolean;
+};
+function ReactionPressed({
+  roomId,
+  reaction,
+  redactEventId,
+  onViewReaction,
+  disabled,
+}: ReactionPressedProps) {
+  const ct = useClient();
+  const alive = useAlive();
+
+  const [redactState, setRedactState] = useState<{
+    status: 'pending' | 'error' | 'success';
+    controller?: AbortController;
+  }>();
+
+  useEffect(() => {
+    if (redactState?.status === 'error') {
+      setRedactState(undefined);
+    }
+  }, [redactState]);
+
+  const handleToggleReaction = async () => {
+    if (redactState) {
+      redactState.controller?.abort();
+      setRedactState(undefined);
+      return;
+    }
+
+    const controller = new AbortController();
+    setRedactState({ status: 'pending', controller });
+    try {
+      const resp = await ct.requestAuthJSON(
+        putRedact({ pathParams: { roomId, eventId: redactEventId, txnId: ct.getTxnId() } })
+      );
+
+      const [error] = await parseMatrixResp(resp);
+      if (error) throw new Error(error.data.error);
+      if (!alive()) return;
+      setRedactState({ status: 'success' });
+    } catch (e) {
+      if (!alive()) return;
+      if (e instanceof Error && e.name === 'AbortError') {
+        // we already removed the state on key press
+        return;
+      }
+      setRedactState({ status: 'error' });
+    }
+  };
+
+  return (
+    <TooltipProvider
+      key={reaction.key}
+      position="Top"
+      tooltip={
+        <Tooltip style={{ maxWidth: toRem(200) }}>
+          <Text className={css.ReactionsTooltipText} size="T300">
+            <ReactionTooltipMsg
+              shortcode={reaction.shortcode}
+              reaction={reaction.key}
+              users={Array.from(reaction.users)}
+            />
+          </Text>
+        </Tooltip>
+      }
+    >
+      {(targetRef) => (
+        <Reaction
+          ref={targetRef}
+          data-reaction-key={reaction.key}
+          aria-pressed={!redactState}
+          reaction={reaction.key}
+          count={redactState ? reaction.users.size - 1 : reaction.users.size}
+          removing={!!redactState}
+          onClick={disabled ? undefined : handleToggleReaction}
+          onContextMenu={onViewReaction}
+          aria-disabled={disabled}
+        />
+      )}
+    </TooltipProvider>
+  );
+}
 
 export type ReactionsProps = {
+  roomId: string;
   eventId: string;
   canSendReaction?: boolean;
+  canRedactReaction?: boolean;
   reactions: MessageEventWithoutRoomId<ReactionContent>[];
-  onReactionToggle: (targetEventId: string, key: string, shortcode?: string) => void;
 };
 export const Reactions = as<'div', ReactionsProps>(
-  ({ className, reactions, eventId, canSendReaction, onReactionToggle, ...props }, ref) => {
+  (
+    { className, reactions, roomId, eventId, canSendReaction, canRedactReaction, ...props },
+    ref
+  ) => {
     const ct = useClient();
-    const useAuthentication = useMediaAuthentication();
     const [viewer, setViewer] = useState<boolean | string>(false);
 
     const handleViewReaction: MouseEventHandler<HTMLButtonElement> = (evt) => {
@@ -54,42 +249,26 @@ export const Reactions = as<'div', ReactionsProps>(
         ref={ref}
       >
         {reactionGroups.map((reaction) => {
-          const isPressed = reaction.users.has(ct.session.userId);
+          const myReactionEvent = reaction.events.find((ev) => ev.sender === ct.session.userId);
 
-          return (
-            <TooltipProvider
+          return myReactionEvent ? (
+            <ReactionPressed
               key={reaction.key}
-              position="Top"
-              tooltip={
-                <Tooltip style={{ maxWidth: toRem(200) }}>
-                  <Text className={css.ReactionsTooltipText} size="T300">
-                    <ReactionTooltipMsg
-                      shortcode={reaction.shortcode}
-                      reaction={reaction.key}
-                      users={Array.from(reaction.users)}
-                    />
-                  </Text>
-                </Tooltip>
-              }
-            >
-              {(targetRef) => (
-                <Reaction
-                  ref={targetRef}
-                  data-reaction-key={reaction.key}
-                  aria-pressed={isPressed}
-                  key={reaction.key}
-                  ct={ct}
-                  reaction={reaction.key}
-                  count={reaction.users.size}
-                  onClick={
-                    canSendReaction ? () => onReactionToggle(eventId, reaction.key) : undefined
-                  }
-                  onContextMenu={handleViewReaction}
-                  aria-disabled={!canSendReaction}
-                  useAuthentication={useAuthentication}
-                />
-              )}
-            </TooltipProvider>
+              roomId={roomId}
+              redactEventId={myReactionEvent.event_id}
+              reaction={reaction}
+              onViewReaction={handleViewReaction}
+              disabled={!canRedactReaction}
+            />
+          ) : (
+            <ReactionUnpressed
+              key={reaction.key}
+              roomId={roomId}
+              eventId={eventId}
+              reaction={reaction}
+              onViewReaction={handleViewReaction}
+              disabled={!canSendReaction}
+            />
           );
         })}
         {reactions.length > 0 && (
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index f6979bab..a81f096c 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -73,6 +73,7 @@ import { useUserReadReceipt } from '../../../hooks/useReadReceipt';
 import { useMessageParserOptions } from '../../../hooks/useMessageParserOptions';
 import { MessageContent } from '../../../components/MessageContent';
 import { MessageEditor } from '../message/MessageEditor';
+import { useSendReaction } from '../hooks/useSendReaction';
 
 type TimelineViewProps = {
   threadTimeline: ThreadTimeline;
@@ -265,9 +266,7 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
   const handleUsernameClick = useUsernameClickHandler(editor);
   const [replyDraft, handleReplyClick] = useReplyClickHandler(editor, threadTimeline.threadId);
 
-  const handleReactionToggle = useCallback((targetEventId: string) => {
-    console.log(targetEventId);
-  }, []);
+  const handleReactionToggle = useSendReaction();
 
   const handleEdit = useCallback(
     (editEvtId?: string) => {
@@ -309,10 +308,11 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
     const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
       <Reactions
         style={{ marginTop: config.space.S200 }}
+        roomId={roomId}
         reactions={reactionEvents}
         eventId={event.event_id}
         canSendReaction={canSendReaction}
-        onReactionToggle={handleReactionToggle}
+        canRedactReaction={canRedact || canDeleteOwn}
       />
     );
 
diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts
index 1dcdfa3f..57af4667 100644
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -421,13 +421,14 @@ export const getEventReactions = (timelineSet: EventTimelineSet, eventId: string
 export type ReactionGroup = {
   key: string;
   users: Set<string>;
+  events: MessageEventWithoutRoomId<ReactionContent>[];
   shortcode?: string;
   firstTs: number;
 };
 export const getReactionGroups = (
   reactions: MessageEventWithoutRoomId<ReactionContent>[]
 ): Array<ReactionGroup> => {
-  const map = new Map<string, ReactionGroup>();
+  const groups = new Map<string, ReactionGroup>();
 
   reactions.forEach((event) => {
     const { key } = event.content['m.relates_to'];
@@ -435,17 +436,19 @@ export const getReactionGroups = (
     const { shortcode } = event.content;
     const ts = event.origin_server_ts;
 
-    const existing = map.get(key);
+    const existing = groups.get(key);
 
     if (!existing) {
-      map.set(key, {
+      groups.set(key, {
         key,
         users: new Set([userId]),
+        events: [event],
         shortcode,
         firstTs: ts,
       });
     } else {
       existing.users.add(userId);
+      existing.events.push(event);
 
       if (!existing.shortcode && shortcode) {
         existing.shortcode = shortcode;
@@ -458,7 +461,7 @@ export const getReactionGroups = (
     }
   });
 
-  return Array.from(map.values()).sort((a, b) => a.firstTs - b.firstTs);
+  return Array.from(groups.values()).sort((a, b) => a.firstTs - b.firstTs);
 };
 
 export const getLatestEditEvent = (
diff --git a/src/client/room/local-event/LocalEvent.ts b/src/client/room/local-event/LocalEvent.ts
index 275547ec..551c9875 100644
--- a/src/client/room/local-event/LocalEvent.ts
+++ b/src/client/room/local-event/LocalEvent.ts
@@ -10,8 +10,8 @@ export class LocalMessage<TContent extends object = object> {
   }
 }
 
-export class LocalEvent {
-  public readonly original: LocalMessage;
+export class LocalEvent<TContent extends object = object> {
+  public readonly original: LocalMessage<TContent>;
 
   public readonly wire: LocalMessage;
 
@@ -19,7 +19,7 @@ export class LocalEvent {
 
   public readonly ts: number;
 
-  constructor(original: LocalMessage, wire: LocalMessage, txnId: string, ts: number) {
+  constructor(original: LocalMessage<TContent>, wire: LocalMessage, txnId: string, ts: number) {
     this.original = original;
     this.wire = wire;
     this.txnId = txnId;
diff --git a/src/client/room/local-event/LocalEventSender.ts b/src/client/room/local-event/LocalEventSender.ts
index 9d885d76..7126823c 100644
--- a/src/client/room/local-event/LocalEventSender.ts
+++ b/src/client/room/local-event/LocalEventSender.ts
@@ -30,8 +30,8 @@ export type LocalEventSenderState =
   | EventSenderSuccess
   | EventSenderError;
 
-export class LocalEventSender {
-  public readonly localEvent: LocalEvent;
+export class LocalEventSender<TContent extends object = object> {
+  public readonly localEvent: LocalEvent<TContent>;
 
   private readonly request: MatrixRequest;
 
@@ -41,7 +41,7 @@ export class LocalEventSender {
 
   private sending = false;
 
-  constructor(localEvent: LocalEvent, request: MatrixRequest) {
+  constructor(localEvent: LocalEvent<TContent>, request: MatrixRequest) {
     this.localEvent = localEvent;
     this.request = request;
     this.state = new ObservableValue(new EventSenderIdle(this.send.bind(this)), this.publishKey);

From 691fa34c4cd7fd5102436e8f8349495372133584 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:01:04 +0530
Subject: [PATCH 129/158] handle reaction tooltip for empty users array

---
 src/app/components/message/Reaction.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/components/message/Reaction.tsx b/src/app/components/message/Reaction.tsx
index 7be632b0..98b5ef0e 100644
--- a/src/app/components/message/Reaction.tsx
+++ b/src/app/components/message/Reaction.tsx
@@ -112,7 +112,7 @@ export function ReactionTooltipMsg({ reaction, shortcode, users }: ReactionToolt
         </>
       )}
       <Text as="span" size="Inherit" priority="300">
-        {' reacted with '}
+        {names.length > 0 ? ' reacted with ' : 'Reacting with '}
       </Text>
       :<b>{label}</b>:
     </>

From a116058362b0127a76def754fc3a331e9b21faaf Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:02:01 +0530
Subject: [PATCH 130/158] add local echo for reaction sent from emojiboard

---
 src/app/features/room/RoomTimeline.tsx        | 13 +++--
 .../features/room/hooks/useSendReaction.ts    | 56 ++++++++++++++-----
 src/app/features/room/message/Reactions.tsx   | 50 +++++++++++++++--
 .../room/thread-view/TimelineView.tsx         | 13 +++--
 4 files changed, 104 insertions(+), 28 deletions(-)

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 2ac09799..a3c1dd69 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -313,7 +313,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const handleUsernameClick = useUsernameClickHandler(editor);
   const [replyDraft, handleReplyClick] = useReplyClickHandler(editor);
 
-  const handleReactionToggle = useSendReaction();
+  const { reactionSender, handleAddReaction } = useSendReaction(reactions, redacted);
 
   const handleEdit = useCallback(
     (editEvtId?: string) => {
@@ -345,15 +345,20 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   let threadSeries: MessageEventWithoutRoomId[] = [];
   const renderMatrixEvent = (event: MessageEventWithoutRoomId, item: number, collapse: boolean) => {
     const reactionEvents = reactions.get(event.event_id)?.filter((r) => !redacted.has(r.event_id));
+    const reactionSenderTarget =
+      reactionSender?.localEvent.original.content['m.relates_to'].event_id === event.event_id;
+
     const editEvents = edits.get(event.event_id);
     const editedEvent = getLatestEditEvent(event, editEvents, redacted);
     const highlighted = focusItem?.index === item && focusItem.highlight;
 
-    const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
+    const reactionJSX = (reactionSenderTarget ||
+      (reactionEvents && reactionEvents?.length > 0)) && (
       <Reactions
         style={{ marginTop: config.space.S200 }}
         roomId={roomId}
-        reactions={reactionEvents}
+        reactions={reactionEvents ?? []}
+        reactionSender={reactionSenderTarget ? reactionSender : undefined}
         eventId={event.event_id}
         canSendReaction={canSendReaction}
         canRedactReaction={canRedact || canDeleteOwn}
@@ -434,7 +439,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
         onUsernameClick={handleUsernameClick}
         onReplyClick={handleReplyClick}
         onThreadClick={handleThreadClick}
-        onReactionToggle={handleReactionToggle}
+        onReactionToggle={handleAddReaction}
         onEditId={handleEdit}
         redacted={redacted.has(event.event_id)}
         hideReadReceipts={hideActivity}
diff --git a/src/app/features/room/hooks/useSendReaction.ts b/src/app/features/room/hooks/useSendReaction.ts
index ae9d77be..1037d10c 100644
--- a/src/app/features/room/hooks/useSendReaction.ts
+++ b/src/app/features/room/hooks/useSendReaction.ts
@@ -1,32 +1,38 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect, useState } from 'react';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { ReactionContent, RelationType } from '../../../../types/matrix/common';
 import { MessageEvent } from '../../../../types/matrix/room';
 import { useClient } from '../../../hooks/useClient';
 import {
+  EventSenderError,
   EventSenderIdle,
   LocalEvent,
   LocalEventSender,
   LocalMessage,
 } from '../../../../client/room/local-event';
 import { useRoom } from '../../../hooks/useRoom';
-import { useTimelineView } from './useTimeline';
 
-export const useSendReaction = () => {
+export const useSendReaction = (
+  reactions: Map<string, MessageEventWithoutRoomId<ReactionContent>[]>,
+  redacted: Set<string>
+) => {
   const ct = useClient();
   const roomId = useRoom();
-  const timeline = useTimelineView();
+  const [reactionSender, setReactionSender] = useState<LocalEventSender<ReactionContent>>();
+
+  const hasExistingReaction = useCallback(
+    (targetEventId: string, key: string) => {
+      const eventReactions = reactions.get(targetEventId)?.filter((r) => !redacted.has(r.event_id));
+      return eventReactions?.some(
+        (evt) => evt.sender === ct.session.userId && evt.content['m.relates_to'].key === key
+      );
+    },
+    [reactions, redacted, ct]
+  );
 
   const handleAddReaction = useCallback(
     (targetEventId: string, key: string, shortcode?: string) => {
-      const redacted = timeline.relations.redacted.read;
-      const reactions = timeline.relations.reactions.eventToRelations.read
-        .get(targetEventId)
-        ?.filter((r) => !redacted.has(r.event_id));
-      if (
-        reactions?.some(
-          (evt) => evt.sender === ct.session.userId && evt.content['m.relates_to'].key === key
-        )
-      ) {
+      if (hasExistingReaction(targetEventId, key)) {
         // Already reacted with this emoji
         return;
       }
@@ -48,9 +54,29 @@ export const useSendReaction = () => {
       if (eventSender.state.read instanceof EventSenderIdle) {
         eventSender.state.read.send();
       }
+      setReactionSender(eventSender);
     },
-    [ct, roomId, timeline]
+    [ct, roomId, hasExistingReaction]
   );
 
-  return handleAddReaction;
+  useEffect(() => {
+    const unsub = reactionSender?.state.subscribe((state) => {
+      if (state instanceof EventSenderError) {
+        setReactionSender(undefined);
+      }
+    });
+    return () => {
+      unsub?.();
+    };
+  }, [reactionSender]);
+
+  const sendingRel = reactionSender?.localEvent.original.content['m.relates_to'];
+
+  return {
+    reactionSender:
+      sendingRel && hasExistingReaction(sendingRel.event_id, sendingRel.key)
+        ? undefined
+        : reactionSender,
+    handleAddReaction,
+  };
 };
diff --git a/src/app/features/room/message/Reactions.tsx b/src/app/features/room/message/Reactions.tsx
index aa361f5c..5cbb7218 100644
--- a/src/app/features/room/message/Reactions.tsx
+++ b/src/app/features/room/message/Reactions.tsx
@@ -29,6 +29,7 @@ import {
   EventSenderPending,
   LocalEvent,
   LocalEventSender,
+  LocalEventSenderState,
   LocalMessage,
 } from '../../../../client/room/local-event';
 import { MessageEvent } from '../../../../types/matrix/room';
@@ -40,6 +41,7 @@ type ReactionUnpressedProps = {
   eventId: string;
   reaction: ReactionGroup;
   onViewReaction: MouseEventHandler<HTMLButtonElement>;
+  reactionSenderState?: LocalEventSenderState;
   disabled?: boolean;
 };
 function ReactionUnpressed({
@@ -47,11 +49,13 @@ function ReactionUnpressed({
   eventId,
   reaction,
   onViewReaction,
+  reactionSenderState,
   disabled,
 }: ReactionUnpressedProps) {
   const ct = useClient();
 
   const [sender, setSender] = useState<LocalEventSender<ReactionContent>>();
+  const adding = !!sender || !!reactionSenderState;
 
   const senderState = useObservableValueOptionally(sender?.state);
 
@@ -62,6 +66,13 @@ function ReactionUnpressed({
   }, [senderState]);
 
   const handleToggleReaction = () => {
+    if (reactionSenderState) {
+      if (reactionSenderState instanceof EventSenderPending) {
+        reactionSenderState.abort();
+      }
+      return;
+    }
+
     if (senderState instanceof EventSenderPending) {
       senderState.abort();
       setSender(undefined);
@@ -113,10 +124,10 @@ function ReactionUnpressed({
         <Reaction
           ref={targetRef}
           data-reaction-key={reaction.key}
-          aria-pressed={!!sender}
+          aria-pressed={adding}
           reaction={reaction.key}
-          count={sender ? reaction.users.size + 1 : reaction.users.size}
-          adding={!!sender}
+          count={adding ? reaction.users.size + 1 : reaction.users.size}
+          adding={adding}
           onClick={disabled ? undefined : handleToggleReaction}
           onContextMenu={onViewReaction}
           aria-disabled={disabled}
@@ -221,14 +232,26 @@ export type ReactionsProps = {
   canSendReaction?: boolean;
   canRedactReaction?: boolean;
   reactions: MessageEventWithoutRoomId<ReactionContent>[];
+  reactionSender?: LocalEventSender<ReactionContent>;
 };
 export const Reactions = as<'div', ReactionsProps>(
   (
-    { className, reactions, roomId, eventId, canSendReaction, canRedactReaction, ...props },
+    {
+      className,
+      reactions,
+      reactionSender,
+      roomId,
+      eventId,
+      canSendReaction,
+      canRedactReaction,
+      ...props
+    },
     ref
   ) => {
     const ct = useClient();
     const [viewer, setViewer] = useState<boolean | string>(false);
+    const reactionSenderState = useObservableValueOptionally(reactionSender?.state);
+    const senderKey = reactionSender?.localEvent.original.content['m.relates_to'].key;
 
     const handleViewReaction: MouseEventHandler<HTMLButtonElement> = (evt) => {
       evt.stopPropagation();
@@ -238,7 +261,23 @@ export const Reactions = as<'div', ReactionsProps>(
       else setViewer(key);
     };
 
-    const reactionGroups = useMemo(() => getReactionGroups(reactions), [reactions]);
+    const reactionGroups = useMemo(() => {
+      const groups = getReactionGroups(reactions);
+      if (!reactionSender) {
+        return groups;
+      }
+
+      const existingGroup = groups.some((g) => g.key === senderKey);
+      if (!existingGroup && senderKey) {
+        groups.push({
+          key: senderKey,
+          events: [],
+          users: new Set([]),
+          firstTs: Date.now(),
+        });
+      }
+      return groups;
+    }, [reactions, reactionSender, senderKey]);
 
     return (
       <Box
@@ -267,6 +306,7 @@ export const Reactions = as<'div', ReactionsProps>(
               eventId={eventId}
               reaction={reaction}
               onViewReaction={handleViewReaction}
+              reactionSenderState={senderKey === reaction.key ? reactionSenderState : undefined}
               disabled={!canSendReaction}
             />
           );
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index a81f096c..53f82f73 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -266,7 +266,7 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
   const handleUsernameClick = useUsernameClickHandler(editor);
   const [replyDraft, handleReplyClick] = useReplyClickHandler(editor, threadTimeline.threadId);
 
-  const handleReactionToggle = useSendReaction();
+  const { reactionSender, handleAddReaction } = useSendReaction(reactions, redacted);
 
   const handleEdit = useCallback(
     (editEvtId?: string) => {
@@ -284,6 +284,9 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
 
   const renderMatrixEvent = (event: MessageEventWithoutRoomId, item: number, collapse: boolean) => {
     const reactionEvents = reactions.get(event.event_id)?.filter((r) => !redacted.has(r.event_id));
+    const reactionSenderTarget =
+      reactionSender?.localEvent.original.content['m.relates_to'].event_id === event.event_id;
+
     const editEvents = edits.get(event.event_id);
     const editedEvent = getLatestEditEvent(event, editEvents, redacted);
     const highlighted = focusItem?.index === item && focusItem.highlight;
@@ -305,11 +308,13 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
       />
     ) : null;
 
-    const reactionJSX = reactionEvents && reactionEvents?.length > 0 && (
+    const reactionJSX = (reactionSenderTarget ||
+      (reactionEvents && reactionEvents?.length > 0)) && (
       <Reactions
         style={{ marginTop: config.space.S200 }}
         roomId={roomId}
-        reactions={reactionEvents}
+        reactions={reactionEvents ?? []}
+        reactionSender={reactionSenderTarget ? reactionSender : undefined}
         eventId={event.event_id}
         canSendReaction={canSendReaction}
         canRedactReaction={canRedact || canDeleteOwn}
@@ -338,7 +343,7 @@ export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewPro
         onUserClick={handleUserClick}
         onUsernameClick={handleUsernameClick}
         onReplyClick={handleReplyClick}
-        onReactionToggle={handleReactionToggle}
+        onReactionToggle={handleAddReaction}
         onEditId={handleEdit}
         redacted={redacted.has(event.event_id)}
         hideReadReceipts={hideActivity}

From 566ac6dfa6e73140a31db173062d5a406af78455 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:19:52 +0530
Subject: [PATCH 131/158] fix reaction local echo redaction

---
 src/app/features/room/hooks/useSendReaction.ts | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/src/app/features/room/hooks/useSendReaction.ts b/src/app/features/room/hooks/useSendReaction.ts
index 1037d10c..86d00931 100644
--- a/src/app/features/room/hooks/useSendReaction.ts
+++ b/src/app/features/room/hooks/useSendReaction.ts
@@ -6,6 +6,7 @@ import { useClient } from '../../../hooks/useClient';
 import {
   EventSenderError,
   EventSenderIdle,
+  EventSenderSuccess,
   LocalEvent,
   LocalEventSender,
   LocalMessage,
@@ -61,7 +62,7 @@ export const useSendReaction = (
 
   useEffect(() => {
     const unsub = reactionSender?.state.subscribe((state) => {
-      if (state instanceof EventSenderError) {
+      if (state instanceof EventSenderError || state instanceof EventSenderIdle) {
         setReactionSender(undefined);
       }
     });
@@ -71,10 +72,13 @@ export const useSendReaction = (
   }, [reactionSender]);
 
   const sendingRel = reactionSender?.localEvent.original.content['m.relates_to'];
+  const senderRedacted =
+    reactionSender?.state.read instanceof EventSenderSuccess &&
+    redacted.has(reactionSender.state.read.eventId);
 
   return {
     reactionSender:
-      sendingRel && hasExistingReaction(sendingRel.event_id, sendingRel.key)
+      (sendingRel && hasExistingReaction(sendingRel.event_id, sendingRel.key)) || senderRedacted
         ? undefined
         : reactionSender,
     handleAddReaction,

From c4bf52ab7f4f56b5006b7e4be44439c38a49f683 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 1 Sep 2026 15:25:43 +0530
Subject: [PATCH 132/158] change reaction remove animation

---
 src/app/components/message/Reaction.css.ts | 18 +++++++++++++++++-
 src/app/components/message/Reaction.tsx    |  6 +-----
 2 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/src/app/components/message/Reaction.css.ts b/src/app/components/message/Reaction.css.ts
index 6182b44b..371e7b99 100644
--- a/src/app/components/message/Reaction.css.ts
+++ b/src/app/components/message/Reaction.css.ts
@@ -64,6 +64,7 @@ export const ReactionText = style([
     lineHeight: toRem(20),
   },
 ]);
+
 const scaleAnimation = keyframes({
   '0%': {
     transform: 'scale(1)',
@@ -76,7 +77,22 @@ const scaleAnimation = keyframes({
   },
 });
 export const ReactionChangeAnimation = style({
-  animation: `${scaleAnimation} 1000ms ease-in-out infinite`,
+  animation: `${scaleAnimation} 700ms ease-in-out infinite`,
+});
+
+const dropAnimation = keyframes({
+  '0%': {
+    transform: 'translateY(0)',
+  },
+  '50%': {
+    transform: 'translateY(0.1em)',
+  },
+  '100%': {
+    transform: 'translateY(0)',
+  },
+});
+export const ReactionDropAnimation = style({
+  animation: `${dropAnimation} 700ms ease-in-out infinite`,
 });
 
 export const ReactionImg = style([
diff --git a/src/app/components/message/Reaction.tsx b/src/app/components/message/Reaction.tsx
index 98b5ef0e..ef373e78 100644
--- a/src/app/components/message/Reaction.tsx
+++ b/src/app/components/message/Reaction.tsx
@@ -47,11 +47,7 @@ export const Reaction = as<
           </Text>
         )}
       </Text>
-      <Text
-        className={classNames({ [css.ReactionChangeAnimation]: removing })}
-        as="span"
-        size="T300"
-      >
+      <Text className={classNames({ [css.ReactionDropAnimation]: removing })} as="span" size="T300">
         {count}
       </Text>
     </Box>

From 054064a5436ceec0d244ab4b15a59263afd780e9 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 1 Sep 2026 17:35:10 +0530
Subject: [PATCH 133/158] pass editor to thread view component

---
 src/app/features/room/thread-view/ThreadView.tsx   | 6 +++++-
 src/app/features/room/thread-view/TimelineView.tsx | 6 +++---
 2 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/app/features/room/thread-view/ThreadView.tsx b/src/app/features/room/thread-view/ThreadView.tsx
index 88fad377..3a8a0c07 100644
--- a/src/app/features/room/thread-view/ThreadView.tsx
+++ b/src/app/features/room/thread-view/ThreadView.tsx
@@ -74,7 +74,11 @@ export function ThreadView({ threadTimeline, threadFocusRef, requestClose }: Thr
           </Box>
         </PageHeader>
 
-        <TimelineView threadTimeline={threadTimeline} threadInputRef={threadInputRef} />
+        <TimelineView
+          threadTimeline={threadTimeline}
+          threadInputRef={threadInputRef}
+          editor={editor}
+        />
         <Box shrink="No" direction="Column">
           <div style={{ padding: `0 ${config.space.S400}` }}>
             <RoomInput
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index 53f82f73..df0db9f6 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -8,6 +8,7 @@ import React, {
   useState,
 } from 'react';
 import { ReactEditor } from 'slate-react';
+import { Editor } from 'slate';
 import { Box, Scroll, Text, config } from 'folds';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { useVirtualPaginator } from '../../../hooks/useVirtualPaginator';
@@ -60,7 +61,6 @@ import {
   useUsernameClickHandler,
 } from '../hooks/useTimeline';
 import { rContent } from '../../../../client/reader';
-import { useEditor } from '../../../components/editor';
 import {
   TimelineFloat,
   JumpToLatestButton,
@@ -78,15 +78,15 @@ import { useSendReaction } from '../hooks/useSendReaction';
 type TimelineViewProps = {
   threadTimeline: ThreadTimeline;
   threadInputRef: RefObject<HTMLElement>;
+  editor: Editor;
 };
 
 const PAGINATION_LIMIT = 80;
 
-export function TimelineView({ threadTimeline, threadInputRef }: TimelineViewProps) {
+export function TimelineView({ threadTimeline, threadInputRef, editor }: TimelineViewProps) {
   const ct = useClient();
   const roomId = useRoom();
   const encryptedRooms = useObservableValue(ct.encryptedRooms);
-  const editor = useEditor();
 
   const {
     hideActivity,

From 94e613171a6a47736b8e7ce7f88b9797369c9bfd Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 7 Oct 2026 19:34:20 +0530
Subject: [PATCH 134/158] upgrade element call and widget api dependencies

---
 package-lock.json | 16 ++++++++--------
 package.json      |  4 ++--
 2 files changed, 10 insertions(+), 10 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 7d588927..4a47822c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -46,7 +46,7 @@
         "linkify-react": "4.3.2",
         "linkifyjs": "4.3.2",
         "matrix-js-sdk": "41.7.0",
-        "matrix-widget-api": "1.16.1",
+        "matrix-widget-api": "1.20.0",
         "millify": "6.1.0",
         "pdfjs-dist": "4.2.67",
         "prismjs": "1.30.0",
@@ -68,7 +68,7 @@
         "ua-parser-js": "1.0.35"
       },
       "devDependencies": {
-        "@element-hq/element-call-embedded": "0.20.1",
+        "@element-hq/element-call-embedded": "0.26.1",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rollup/plugin-inject": "5.0.3",
         "@rollup/plugin-wasm": "6.1.1",
@@ -1776,9 +1776,9 @@
       }
     },
     "node_modules/@element-hq/element-call-embedded": {
-      "version": "0.20.1",
-      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.20.1.tgz",
-      "integrity": "sha512-ODg2r7UmR8UjRpapLKbn6v1PS8fu/r58zdbvXMYaAlUEAC2f6L/9Moc9S4noG1+ARgWxY+m2vLmNDK9G9uFZYQ==",
+      "version": "0.26.1",
+      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.26.1.tgz",
+      "integrity": "sha512-0zAC8Qh+xNLTqiC7yiosu2NQ7Fw36xR7Gimgmp2WZjTbiPf8b7DmYOBZk0sWFzYbrHHZTeB2wWPDmS3TgYq51g==",
       "dev": true
     },
     "node_modules/@emotion/hash": {
@@ -10136,9 +10136,9 @@
       }
     },
     "node_modules/matrix-widget-api": {
-      "version": "1.16.1",
-      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.16.1.tgz",
-      "integrity": "sha512-oCfTV4xNPo02qIgveqdkIyKQjOPpsjhF3bmJBotHrhr8TsrhVa7kx8PtuiUPnQTjz0tdBle7falR2Fw8VKsedw==",
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.20.0.tgz",
+      "integrity": "sha512-qwFP37rgns7mPesM5/vvZgknzb+kvyRB5BISv5sCuBxsGMceMr+Kogf7OkjRxBXdMCPBFuf6gIuYRe5S+lpzQw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@types/events": "^3.0.0",
diff --git a/package.json b/package.json
index d0da1dae..8530bf26 100644
--- a/package.json
+++ b/package.json
@@ -70,7 +70,7 @@
     "linkify-react": "4.3.2",
     "linkifyjs": "4.3.2",
     "matrix-js-sdk": "41.7.0",
-    "matrix-widget-api": "1.16.1",
+    "matrix-widget-api": "1.20.0",
     "millify": "6.1.0",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.30.0",
@@ -92,7 +92,7 @@
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
-    "@element-hq/element-call-embedded": "0.20.1",
+    "@element-hq/element-call-embedded": "0.26.1",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",

From e5d683d51fdf6d1092af27838d26391c9fdf83a0 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 18 Oct 2026 08:17:21 +0530
Subject: [PATCH 135/158] move calls to new sdk

---
 call.config.json                              |   1 +
 package-lock.json                             |  36 +-
 package.json                                  |   6 +-
 src/app/components/CallEmbedProvider.tsx      | 268 ++++---
 src/app/features/call-status/CallRoomName.tsx |  49 +-
 src/app/features/call-status/CallStatus.tsx   |  25 +-
 src/app/features/call-status/LiveChip.tsx     |  34 +-
 src/app/features/call-status/MemberGlance.tsx |  45 +-
 .../features/call-status/MemberSpeaking.tsx   |  13 +-
 src/app/features/call/CallMemberCard.tsx      |  46 +-
 src/app/features/call/CallView.tsx            |  28 +-
 src/app/features/call/PrescreenControls.tsx   |  14 +-
 src/app/features/lobby/Lobby.tsx              |   2 +-
 src/app/features/room-nav/RoomNavItem.tsx     |  67 +-
 src/app/features/room/CallChatView.tsx        |  11 +-
 src/app/features/room/OutboxView.tsx          |   2 +-
 src/app/features/room/Room.tsx                |  75 +-
 src/app/features/room/RoomTombstone.tsx       |   2 +-
 src/app/features/room/RoomViewHeader.tsx      | 146 ++++
 .../hooks/useEnsureRoomEncryptionSession.ts   |  75 --
 .../room/hooks/useSendEditedMessage.ts        |   2 +-
 src/app/features/room/hooks/useSendMessage.ts |   2 +-
 .../features/room/thread-view/ThreadView.tsx  | 121 ++-
 .../features/room/thread-view/styles.css.ts   |  21 -
 src/app/hooks/useAllJoinedRoomsSet.ts         |  10 +
 src/app/hooks/useCall.ts                      |  60 +-
 src/app/hooks/useCallEmbed.ts                 |  35 +-
 src/app/hooks/useCallSpeakers.ts              |   2 +-
 .../hooks/useEnsureRoomEncryptionSession.ts   |  83 +++
 src/app/hooks/useGetRoom.ts                   |  29 -
 src/app/hooks/useImagePackRooms.ts            |   2 +-
 src/app/hooks/usePendingMembers.ts            |  76 +-
 src/app/hooks/usePowerLevels.ts               |   9 -
 src/app/hooks/useSpaceHierarchy.ts            |   2 +-
 src/app/pages/Router.tsx                      |  21 +-
 src/app/pages/client/space/Space.tsx          |   2 +-
 src/app/plugins/call/CallControl.ts           |  68 +-
 src/app/plugins/call/CallEmbed.ts             | 289 +++-----
 src/app/plugins/call/CallWidgetDriver.ts      | 693 +++++++++++++-----
 src/app/plugins/call/hooks.ts                 |  17 +-
 src/app/plugins/call/utils.ts                 |  41 +-
 src/app/plugins/msc4140-delayed-events.ts     |  31 +
 src/app/plugins/msc4143-matrixrtc.ts          |  21 +
 src/app/plugins/msc4195-matrixrtc-livekit.ts  |  45 ++
 src/app/plugins/msc4354-sticky-events.ts      |  22 +
 src/app/state/upload.ts                       |   5 +-
 src/app/utils/room.ts                         |   2 +
 src/client/SyncResponseManager.ts             |   9 +-
 src/client/call/CallSession.ts                | 282 +++++++
 src/client/call/CallSessions.ts               | 129 ++++
 src/client/call/index.ts                      |   2 +
 src/client/call/rtcMember.ts                  | 144 ++++
 src/client/context.ts                         |  18 +
 src/client/decryption/DecryptionManager.ts    |  31 +-
 src/client/initialize.ts                      |   9 +
 src/client/storage/collections/JoinRoom.ts    |  38 +
 src/client/storage/index.ts                   |   8 +-
 src/client/syncWriter/index.ts                |   2 +
 src/client/syncWriter/utils.ts                |  55 ++
 src/types/matrix/room.ts                      |  16 +
 vite.config.js                                |   5 +
 61 files changed, 2361 insertions(+), 1043 deletions(-)
 create mode 100644 call.config.json
 delete mode 100644 src/app/features/room/hooks/useEnsureRoomEncryptionSession.ts
 create mode 100644 src/app/hooks/useAllJoinedRoomsSet.ts
 create mode 100644 src/app/hooks/useEnsureRoomEncryptionSession.ts
 delete mode 100644 src/app/hooks/useGetRoom.ts
 create mode 100644 src/app/plugins/msc4140-delayed-events.ts
 create mode 100644 src/app/plugins/msc4143-matrixrtc.ts
 create mode 100644 src/app/plugins/msc4195-matrixrtc-livekit.ts
 create mode 100644 src/app/plugins/msc4354-sticky-events.ts
 create mode 100644 src/client/call/CallSession.ts
 create mode 100644 src/client/call/CallSessions.ts
 create mode 100644 src/client/call/index.ts
 create mode 100644 src/client/call/rtcMember.ts

diff --git a/call.config.json b/call.config.json
new file mode 100644
index 00000000..0967ef42
--- /dev/null
+++ b/call.config.json
@@ -0,0 +1 @@
+{}
diff --git a/package-lock.json b/package-lock.json
index 4a47822c..6095a684 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,7 +13,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",
-        "@matrix-org/matrix-sdk-crypto-wasm": "18.3.1",
         "@tanstack/react-query": "5.24.1",
         "@tanstack/react-query-devtools": "5.24.1",
         "@tanstack/react-virtual": "3.2.0",
@@ -33,7 +32,7 @@
         "emojibase-data": "15.3.2",
         "file-saver": "2.0.5",
         "focus-trap-react": "10.0.2",
-        "folds": "2.7.1",
+        "folds": "2.7.3",
         "html-dom-parser": "4.0.0",
         "html-react-parser": "4.2.0",
         "i18next": "23.12.2",
@@ -48,6 +47,7 @@
         "matrix-js-sdk": "41.7.0",
         "matrix-widget-api": "1.20.0",
         "millify": "6.1.0",
+        "neurone": "0.0.9",
         "pdfjs-dist": "4.2.67",
         "prismjs": "1.30.0",
         "react": "18.2.0",
@@ -68,7 +68,7 @@
         "ua-parser-js": "1.0.35"
       },
       "devDependencies": {
-        "@element-hq/element-call-embedded": "0.26.1",
+        "@element-hq/element-call-embedded": "0.28.0",
         "@esbuild-plugins/node-globals-polyfill": "0.2.3",
         "@rollup/plugin-inject": "5.0.3",
         "@rollup/plugin-wasm": "6.1.1",
@@ -1776,9 +1776,9 @@
       }
     },
     "node_modules/@element-hq/element-call-embedded": {
-      "version": "0.26.1",
-      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.26.1.tgz",
-      "integrity": "sha512-0zAC8Qh+xNLTqiC7yiosu2NQ7Fw36xR7Gimgmp2WZjTbiPf8b7DmYOBZk0sWFzYbrHHZTeB2wWPDmS3TgYq51g==",
+      "version": "0.28.0",
+      "resolved": "https://registry.npmjs.org/@element-hq/element-call-embedded/-/element-call-embedded-0.28.0.tgz",
+      "integrity": "sha512-wM5tLXrSCLbveGlvQg1Pj6dNAp75mhJe2Zr3Vb8dtK6z9tuuFMcsn1q1Gjy1KYWQdzBzKK2wLc1O8H7DzYZRHQ==",
       "dev": true
     },
     "node_modules/@emotion/hash": {
@@ -7908,9 +7908,9 @@
       }
     },
     "node_modules/folds": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/folds/-/folds-2.7.1.tgz",
-      "integrity": "sha512-A1XGXJ4hp1W0cpFUIjYj9gPSzKVxqj9BlTBJTqmmtTUiEFDzXvhBITJdcqmlDsmcd756tu/iygSAzdky5fDcrg==",
+      "version": "2.7.3",
+      "resolved": "https://registry.npmjs.org/folds/-/folds-2.7.3.tgz",
+      "integrity": "sha512-oMdMOBmU5RCUI4nmQKiEKpJNh+ZmCijvR4+aalk/btZPp1jIRGha7MXBb2NFOy1y9od+RynNFp+bw6E7GMATBA==",
       "license": "Apache-2.0",
       "peerDependencies": {
         "@vanilla-extract/css": "1.9.2",
@@ -10390,6 +10390,24 @@
       "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
       "dev": true
     },
+    "node_modules/neurone": {
+      "version": "0.0.9",
+      "resolved": "https://registry.npmjs.org/neurone/-/neurone-0.0.9.tgz",
+      "integrity": "sha512-A//2eeyxJLwuDGCZh7N6jNy0tloQ1pgY/0pNna5SrOsj5UPKb2W7U3wE9+2q7sN2kT+0SZr2xijfi06EGkrlyQ==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@matrix-org/matrix-sdk-crypto-wasm": "18.3.1",
+        "another-json": "0.2.0",
+        "bs58": "6.0.0",
+        "idb": "8.0.0"
+      }
+    },
+    "node_modules/neurone/node_modules/idb": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/idb/-/idb-8.0.0.tgz",
+      "integrity": "sha512-l//qvlAKGmQO31Qn7xdzagVPPaHTxXx199MhrAFuVBTPqydcPYBWjkrbv4Y0ktB+GmWOiwHl237UUOrLmQxLvw==",
+      "license": "ISC"
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
diff --git a/package.json b/package.json
index 8530bf26..5915bfb9 100644
--- a/package.json
+++ b/package.json
@@ -37,7 +37,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",
-    "@matrix-org/matrix-sdk-crypto-wasm": "18.3.1",
     "@tanstack/react-query": "5.24.1",
     "@tanstack/react-query-devtools": "5.24.1",
     "@tanstack/react-virtual": "3.2.0",
@@ -57,7 +56,7 @@
     "emojibase-data": "15.3.2",
     "file-saver": "2.0.5",
     "focus-trap-react": "10.0.2",
-    "folds": "2.7.1",
+    "folds": "2.7.3",
     "html-dom-parser": "4.0.0",
     "html-react-parser": "4.2.0",
     "i18next": "23.12.2",
@@ -72,6 +71,7 @@
     "matrix-js-sdk": "41.7.0",
     "matrix-widget-api": "1.20.0",
     "millify": "6.1.0",
+    "neurone": "0.0.9",
     "pdfjs-dist": "4.2.67",
     "prismjs": "1.30.0",
     "react": "18.2.0",
@@ -92,7 +92,7 @@
     "ua-parser-js": "1.0.35"
   },
   "devDependencies": {
-    "@element-hq/element-call-embedded": "0.26.1",
+    "@element-hq/element-call-embedded": "0.28.0",
     "@esbuild-plugins/node-globals-polyfill": "0.2.3",
     "@rollup/plugin-inject": "5.0.3",
     "@rollup/plugin-wasm": "6.1.1",
diff --git a/src/app/components/CallEmbedProvider.tsx b/src/app/components/CallEmbedProvider.tsx
index a6f6dec5..d22b20da 100644
--- a/src/app/components/CallEmbedProvider.tsx
+++ b/src/app/components/CallEmbedProvider.tsx
@@ -17,15 +17,7 @@ import {
   Text,
   toRem,
 } from 'folds';
-import {
-  EventTimelineSetHandlerMap,
-  EventType,
-  RelationType,
-  Room,
-  RoomEvent,
-} from 'matrix-js-sdk';
-import { IRTCNotificationContent, RTCNotificationType } from 'matrix-js-sdk/lib/matrixrtc/types';
-import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
+import { putSend } from 'neurone/lib/api/matrix/client/v3/rooms';
 import {
   CallEmbedContextProvider,
   CallEmbedRefContextProvider,
@@ -39,57 +31,66 @@ import { callChatAtom, callEmbedAtom } from '../state/callEmbed';
 import { CallEmbed } from '../plugins/call';
 import { useSelectedRoom } from '../hooks/router/useSelectedRoom';
 import { ScreenSize, useScreenSizeContext } from '../hooks/useScreenSize';
-import { useMatrixClient } from '../hooks/useMatrixClient';
 import CallSound from '../../../public/sound/call.ogg';
 import { useCallMembersChange, useCallSession } from '../hooks/useCall';
-import { useRoomAvatar, useRoomName } from '../hooks/useRoomMeta';
 import { mDirectAtom } from '../state/mDirectList';
 import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
-import { mxcUrlToHttp } from '../utils/matrix';
 import { RoomAvatar, RoomIcon } from './room-avatar';
 import { useRoomNavigate } from '../hooks/useRoomNavigate';
-import { getStateEvent } from '../utils/room';
-import { StateEvent } from '../../types/matrix/room';
-import { getPowersLevelFromMatrixEvent } from '../hooks/usePowerLevels';
-import { getRoomCreatorsForRoomId } from '../hooks/useRoomCreators';
-import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
+import { CallEventType, MessageEvent } from '../../types/matrix/room';
 import { useLivekitSupport } from '../hooks/useLivekitSupport';
 import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
+import { useClient } from '../hooks/useClient';
+import { useGetRoomName } from '../hooks/storage/useGetRoomName';
+import { useRoomHeroes } from '../hooks/storage/useRoomHeros';
+import { useGetRoomAvatar } from '../hooks/storage/useGetRoomAvatar';
+import { mxcToHttp } from '../../client/mxcToHttp';
+import { RelationType } from '../../types/matrix/common';
+import { ensureEncryptionSession } from '../hooks/useEnsureRoomEncryptionSession';
 
 type IncomingCallInfo = {
-  room: Room;
+  roomId: string;
   sender: string;
   senderTs: number;
   lifetime: number;
   intent?: string;
-  notificationType: RTCNotificationType;
+  silent?: boolean;
   refEventId: string;
 };
 type IncomingCallProps = {
   dm: boolean;
   info: IncomingCallInfo;
   onIgnore: () => void;
-  onAnswer: (room: Room, video: boolean) => void;
-  onReject: (room: Room, eventId: string) => void;
+  onAnswer: (roomId: string, video: boolean) => void;
+  onReject: (roomId: string, eventId: string) => void;
 };
 function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const livekitSupported = useLivekitSupport();
   const rtcSupported = webRTCSupported();
   const canAnswer = livekitSupported && rtcSupported;
-  const { room } = info;
+  const { roomId } = info;
 
   const audioRef = useRef<HTMLAudioElement>(null);
 
-  const roomName = useRoomName(room);
-  const roomAvatar = useRoomAvatar(room, dm);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const getRoomAvatar = useGetRoomAvatar(getRoomHeroes);
+
+  const roomName = getRoomName(roomId);
+  const roomAvatar = getRoomAvatar(roomId);
+
   const avatarUrl = roomAvatar
-    ? mxcUrlToHttp(mx, roomAvatar, useAuthentication, 96, 96, 'crop') ?? undefined
+    ? mxcToHttp(ct.session.baseUrl, roomAvatar, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+        method: 'crop',
+      })
     : undefined;
 
-  const session = useCallSession(room);
+  const session = useCallSession(roomId);
   useCallMembersChange(
     session,
     useCallback(
@@ -108,10 +109,10 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
   }, []);
 
   useEffect(() => {
-    if (info.notificationType === 'ring') {
+    if (!info.silent) {
       playSound();
     }
-  }, [playSound, info.notificationType]);
+  }, [playSound, info.silent]);
 
   return (
     <>
@@ -134,14 +135,14 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                   <Box shrink="No">
                     <Avatar size="500" className={CallAvatarAnimation}>
                       <RoomAvatar
-                        roomId={room.roomId}
+                        roomId={roomId}
                         src={avatarUrl}
                         alt={roomName}
                         renderFallback={() => (
                           <RoomIcon
-                            roomType={room.getType()}
+                            roomType={ct.roomToType.read.get(roomId)}
                             size="400"
-                            joinRule={room.getJoinRule()}
+                            joinRule={ct.roomToJoinRule.read.get(roomId)}
                             filled
                           />
                         )}
@@ -181,7 +182,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                     variant="Success"
                     size="400"
                     radii="400"
-                    onClick={() => onAnswer(room, info.intent === 'video')}
+                    onClick={() => onAnswer(roomId, info.intent === 'video')}
                     before={
                       <Icon
                         size="200"
@@ -201,7 +202,7 @@ function IncomingCall({ dm, info, onIgnore, onAnswer, onReject }: IncomingCallPr
                     fill="Soft"
                     size="400"
                     radii="400"
-                    onClick={() => (dm ? onReject(room, info.refEventId) : onIgnore())}
+                    onClick={() => (dm ? onReject(roomId, info.refEventId) : onIgnore())}
                     before={<Icon size="200" src={Icons.Cross} filled />}
                   >
                     <Text as="span" size="B400">
@@ -226,117 +227,140 @@ type IncomingCallListenerProps = {
   joined?: boolean;
 };
 function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const directs = useAtomValue(mDirectAtom);
   const { navigateRoom } = useRoomNavigate();
 
   const [callInfo, setCallInfo] = useState<IncomingCallInfo>();
-  const dm = callInfo ? directs.has(callInfo.room.roomId) : false;
-  const startCall = useCallStart(dm);
-
-  const handleTimelineEvent: EventTimelineSetHandlerMap[RoomEvent.Timeline] = useCallback(
-    async (event, room, toStartOfTimeline, removed, data) => {
-      // only process rtc notification reference events.
-      // we do not want to wait to decrypt all events.
-      if (event.getRelation()?.rel_type !== RelationType.Reference) return;
-      if (room?.isCallRoom()) return;
-
-      if (event.isEncrypted()) {
-        if (!event.isBeingDecrypted()) {
-          await event.attemptDecryption(mx.getCrypto() as CryptoBackend);
-        }
-        await event.getDecryptionPromise();
-      }
-
-      if (
-        !room ||
-        event.getType() !== EventType.RTCNotification ||
-        event.getSender() === mx.getSafeUserId() ||
-        !data.liveEvent
-      ) {
-        return;
-      }
-
-      const sender = event.getSender();
-      const content = event.getContent<IRTCNotificationContent>();
-      const senderTs =
-        content.sender_ts - event.getTs() > 20000 ? event.getTs() : content.sender_ts;
-      const lifetime = Math.min(content.lifetime, 120000);
-      const notificationType = content.notification_type;
-      const relation =
-        event.getRelation()?.rel_type === RelationType.Reference ? event.getRelation() : undefined;
-      const refEventId = relation?.event_id;
-
-      const mention =
-        content['m.mentions']?.room ||
-        content['m.mentions']?.user_ids?.includes(mx.getSafeUserId());
-      if (!sender || !refEventId || !mention || Date.now() >= senderTs + lifetime) {
-        return;
-      }
-
-      const powerLevelsEvent = getStateEvent(room, StateEvent.RoomPowerLevels);
-      const powerLevels = getPowersLevelFromMatrixEvent(powerLevelsEvent);
-      const creators = getRoomCreatorsForRoomId(mx, room.roomId);
-      const permissions = getRoomPermissionsAPI(creators, powerLevels);
-
-      const hasCallPermission = permissions.stateEvent(
-        StateEvent.GroupCallMemberPrefix,
-        mx.getSafeUserId()
-      );
-      if (!hasCallPermission) return;
-
-      const info: IncomingCallInfo = {
-        room,
-        sender,
-        senderTs,
-        lifetime,
-        intent:
-          'm.call.intent' in content && typeof content['m.call.intent'] === 'string'
-            ? content['m.call.intent']
-            : undefined,
-        notificationType,
-        refEventId,
-      };
-
-      setCallInfo(info);
-    },
-    [mx]
-  );
-
-  useEffect(() => {
-    mx.on(RoomEvent.Timeline, handleTimelineEvent);
-    return () => {
-      mx.removeListener(RoomEvent.Timeline, handleTimelineEvent);
-    };
-  }, [mx, handleTimelineEvent]);
+  const dm = callInfo ? directs.has(callInfo.roomId) : false;
+  const startCall = useCallStart();
+  //
+  //   const handleSync = useCallback(
+  //     async (syncValue: SyncValue) => {
+  //       // only process rtc notification reference events.
+  //       // we do not want to wait to decrypt all events.
+  //       if (event.getRelation()?.rel_type !== RelationType.Reference) return;
+  //       if (room?.isCallRoom()) return;
+  //
+  //       if (event.isEncrypted()) {
+  //         if (!event.isBeingDecrypted()) {
+  //           await event.attemptDecryption(mx.getCrypto() as CryptoBackend);
+  //         }
+  //         await event.getDecryptionPromise();
+  //       }
+  //
+  //       if (
+  //         !room ||
+  //         event.getType() !== EventType.RTCNotification ||
+  //         event.getSender() === mx.getSafeUserId() ||
+  //         !data.liveEvent
+  //       ) {
+  //         return;
+  //       }
+  //
+  //       const sender = event.getSender();
+  //       const content = event.getContent<IRTCNotificationContent>();
+  //       const senderTs =
+  //         content.sender_ts - event.getTs() > 20000 ? event.getTs() : content.sender_ts;
+  //       const lifetime = Math.min(content.lifetime, 120000);
+  //       const notificationType = content.notification_type;
+  //       const relation =
+  //         event.getRelation()?.rel_type === RelationType.Reference ? event.getRelation() : undefined;
+  //       const refEventId = relation?.event_id;
+  //
+  //       const mention =
+  //         content['m.mentions']?.room ||
+  //         content['m.mentions']?.user_ids?.includes(mx.getSafeUserId());
+  //       if (!sender || !refEventId || !mention || Date.now() >= senderTs + lifetime) {
+  //         return;
+  //       }
+  //
+  //       const powerLevelsEvent = getStateEvent(room, StateEvent.RoomPowerLevels);
+  //       const powerLevels = getPowersLevelFromMatrixEvent(powerLevelsEvent);
+  //       const creators = getRoomCreatorsForRoomId(mx, room.roomId);
+  //       const permissions = getRoomPermissionsAPI(creators, powerLevels);
+  //
+  //       const hasCallPermission = permissions.stateEvent(
+  //         StateEvent.GroupCallMemberPrefix,
+  //         mx.getSafeUserId()
+  //       );
+  //       if (!hasCallPermission) return;
+  //
+  //       const info: IncomingCallInfo = {
+  //         room,
+  //         sender,
+  //         senderTs,
+  //         lifetime,
+  //         intent:
+  //           'm.call.intent' in content && typeof content['m.call.intent'] === 'string'
+  //             ? content['m.call.intent']
+  //             : undefined,
+  //         notificationType,
+  //         refEventId,
+  //       };
+  //
+  //       setCallInfo(info);
+  //     },
+  //     [mx]
+  //   );
+  //
+  //   useEffect(() => {
+  //     const unsub = ct.sync.observable.subscribe(handleSync)
+  //     return () => {
+  //       unsub()
+  //     }
+  //   }, [ct, handleSync]);
 
   const handleIgnore = useCallback(() => {
     setCallInfo(undefined);
   }, []);
 
   const handleReject = useCallback(
-    (room: Room, eventId: string) => {
-      mx.sendEvent(room.roomId, EventType.RTCDecline, {
+    async (roomId: string, eventId: string) => {
+      setCallInfo(undefined);
+      const content = {
         'm.relates_to': {
           rel_type: RelationType.Reference,
           event_id: eventId,
         },
-      });
-      setCallInfo(undefined);
+      };
+
+      let encContent: object | undefined;
+      if (ct.encryptedRooms.read.has(roomId)) {
+        await ensureEncryptionSession(ct, roomId);
+
+        const encStr = await ct.machine.roomEncryption.encryptMessageEvent(
+          roomId,
+          CallEventType.RTCDecline,
+          content
+        );
+        encContent = JSON.parse(encStr);
+      }
+
+      ct.requestAuthJSON(
+        putSend({
+          pathParams: {
+            roomId,
+            eventType: encContent ? MessageEvent.RoomMessageEncrypted : CallEventType.RTCDecline,
+            txnId: ct.getTxnId(),
+          },
+          body: encContent ?? content,
+        })
+      );
     },
-    [mx]
+    [ct]
   );
 
   const handleAnswer = useCallback(
-    (room: Room, video: boolean) => {
-      startCall(room, { microphone: true, video, sound: true });
+    (roomId: string, video: boolean) => {
+      startCall(roomId, { microphone: true, video, sound: true });
       setCallInfo(undefined);
-      navigateRoom(room.roomId);
+      navigateRoom(roomId);
     },
     [startCall, navigateRoom]
   );
 
-  if (callInfo && callEmbed?.roomId === callInfo.room.roomId) {
+  if (callInfo && callEmbed?.roomId === callInfo.roomId) {
     return null;
   }
   return !joined && callInfo ? (
diff --git a/src/app/features/call-status/CallRoomName.tsx b/src/app/features/call-status/CallRoomName.tsx
index 8b65528a..7a56a8ae 100644
--- a/src/app/features/call-status/CallRoomName.tsx
+++ b/src/app/features/call-status/CallRoomName.tsx
@@ -1,35 +1,43 @@
 import React from 'react';
-import { Room } from 'matrix-js-sdk';
 import { Chip, Icon, Icons, Text } from 'folds';
 import { useAtomValue } from 'jotai';
-import { useRoomName } from '../../hooks/useRoomMeta';
 import { RoomIcon } from '../../components/room-avatar';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
 import { getAllParents, guessPerfectParent } from '../../utils/room';
 import { useOrphanSpaces } from '../../state/hooks/roomList';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { allRoomsAtom } from '../../state/room-list/roomList';
 import { mDirectAtom } from '../../state/mDirectList';
-import { useAllJoinedRoomsSet, useGetRoom } from '../../hooks/useGetRoom';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
+import { useClient } from '../../hooks/useClient';
+import { useGetRoomName } from '../../hooks/storage/useGetRoomName';
+import { useRoomHeroes } from '../../hooks/storage/useRoomHeros';
+import { useObservableValue } from '../../hooks/useObservableValue';
 
 type CallRoomNameProps = {
-  room: Room;
+  roomId: string;
 };
-export function CallRoomName({ room }: CallRoomNameProps) {
-  const mx = useMatrixClient();
-  const name = useRoomName(room);
+export function CallRoomName({ roomId }: CallRoomNameProps) {
+  const ct = useClient();
+  const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
+  const getRoomHeroes = useRoomHeroes();
+  const getRoomName = useGetRoomName(getRoomHeroes);
+  const name = getRoomName(roomId);
+
   const roomToParents = useAtomValue(roomToParentsAtom);
-  const orphanSpaces = useOrphanSpaces(mx, allRoomsAtom, roomToParents);
+  const orphanSpaces = useOrphanSpaces(ct, allRoomsAtom, roomToParents);
   const mDirects = useAtomValue(mDirectAtom);
-  const dm = mDirects.has(room.roomId);
+  const dm = mDirects.has(roomId);
 
-  const allRoomsSet = useAllJoinedRoomsSet();
-  const getRoom = useGetRoom(allRoomsSet);
-
-  const allParents = getAllParents(roomToParents, room.roomId);
+  const allParents = getAllParents(roomToParents, roomId);
   const orphanParents = allParents && orphanSpaces.filter((o) => allParents.has(o));
-  const perfectOrphanParent = orphanParents && guessPerfectParent(mx, room.roomId, orphanParents);
+  const perfectOrphanParent =
+    orphanParents &&
+    guessPerfectParent(
+      roomId,
+      orphanParents,
+      (rId) => ct.roomToCreators.read.get(rId),
+      () => undefined
+    );
 
   const { navigateRoom } = useRoomNavigate();
 
@@ -41,16 +49,21 @@ export function CallRoomName({ room }: CallRoomNameProps) {
         dm ? (
           <Icon size="200" src={Icons.VolumeHigh} filled />
         ) : (
-          <RoomIcon size="200" joinRule={room.getJoinRule()} roomType={room.getType()} filled />
+          <RoomIcon
+            size="200"
+            joinRule={roomToJoinRule.get(roomId)}
+            roomType={ct.roomToType.read.get(roomId)}
+            filled
+          />
         )
       }
-      onClick={() => navigateRoom(room.roomId)}
+      onClick={() => navigateRoom(roomId)}
     >
       <Text size="L400" truncate>
         {name}
         {!dm && perfectOrphanParent && (
           <Text as="span" size="T200" priority="300">
-            {' •'} <b>{getRoom(perfectOrphanParent)?.name ?? perfectOrphanParent}</b>
+            {' •'} <b>{getRoomName(perfectOrphanParent) ?? perfectOrphanParent}</b>
           </Text>
         )}
       </Text>
diff --git a/src/app/features/call-status/CallStatus.tsx b/src/app/features/call-status/CallStatus.tsx
index 58b8d399..404b56e5 100644
--- a/src/app/features/call-status/CallStatus.tsx
+++ b/src/app/features/call-status/CallStatus.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import { Box, Spinner } from 'folds';
 import classNames from 'classnames';
 import { LiveChip } from './LiveChip';
@@ -15,15 +15,19 @@ import { useCallEmbed, useCallJoined } from '../../hooks/useCallEmbed';
 import { useCallSpeakers } from '../../hooks/useCallSpeakers';
 import { MemberSpeaking } from './MemberSpeaking';
 import { useSelectedRoom } from '../../hooks/router/useSelectedRoom';
+import { useRoomMembers } from '../../hooks/useRoomMembers';
 
 type CallStatusProps = {
   callEmbed: CallEmbed;
 };
 export function CallStatus({ callEmbed }: CallStatusProps) {
-  const { room } = callEmbed;
+  const { roomId } = callEmbed;
 
-  const callSession = useCallSession(room);
+  const callSession = useCallSession(roomId);
   const callMembers = useCallMembers(callSession);
+  const users = useMemo(() => Array.from(new Set(callMembers.map((m) => m.userId))), [callMembers]);
+  const membersAPI = useRoomMembers(roomId, users);
+
   const screenSize = useScreenSize();
   const callJoined = useCallJoined(callEmbed);
   const speakers = useCallSpeakers(callEmbed);
@@ -43,7 +47,7 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
       <Box grow="Yes" alignItems="Center" gap="200">
         {memberVisible ? (
           <Box shrink="No">
-            <LiveChip count={callMembers.length} room={room} members={callMembers} />
+            <LiveChip count={users.length} roomId={roomId} users={users} membersAPI={membersAPI} />
           </Box>
         ) : (
           <Spinner variant="Secondary" size="200" />
@@ -51,12 +55,12 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
         <Box grow="Yes" alignItems="Center" gap="Inherit">
           {!compact && (
             <>
-              <CallRoomName room={room} />
+              <CallRoomName roomId={roomId} />
               {speakers.size > 0 && (
                 <>
                   <StatusDivider />
                   <span data-spacing-node />
-                  <MemberSpeaking room={room} speakers={speakers} />
+                  <MemberSpeaking membersAPI={membersAPI} speakers={speakers} />
                 </>
               )}
             </>
@@ -64,7 +68,12 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
         </Box>
         {memberVisible && (
           <Box shrink="No">
-            <MemberGlance room={room} members={callMembers} speakers={speakers} />
+            <MemberGlance
+              roomId={roomId}
+              users={users}
+              membersAPI={membersAPI}
+              speakers={speakers}
+            />
           </Box>
         )}
       </Box>
@@ -72,7 +81,7 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
       <Box shrink="No" alignItems="Center" gap="Inherit">
         {compact && (
           <Box grow="Yes">
-            <CallRoomName room={room} />
+            <CallRoomName roomId={roomId} />
           </Box>
         )}
         <CallControl callJoined={callJoined} compact={compact} callEmbed={callEmbed} />
diff --git a/src/app/features/call-status/LiveChip.tsx b/src/app/features/call-status/LiveChip.tsx
index 32df3289..6769a1fd 100644
--- a/src/app/features/call-status/LiveChip.tsx
+++ b/src/app/features/call-status/LiveChip.tsx
@@ -15,26 +15,25 @@ import {
   Text,
   toRem,
 } from 'folds';
-import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import FocusTrap from 'focus-trap-react';
-import { Room } from 'matrix-js-sdk';
 import * as css from './styles.css';
 import { stopPropagation } from '../../utils/keyboard';
-import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { UserAvatar } from '../../components/user-avatar';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { getMouseEventCords } from '../../utils/dom';
+import { useClient } from '../../hooks/useClient';
+import { RoomMembersAPI } from '../../hooks/useRoomMembers';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 type LiveChipProps = {
-  room: Room;
-  members: CallMembership[];
+  roomId: string;
+  users: string[];
   count: number;
+  membersAPI: RoomMembersAPI;
 };
-export function LiveChip({ count, room, members }: LiveChipProps) {
-  const mx = useMatrixClient();
+export function LiveChip({ count, roomId, users, membersAPI }: LiveChipProps) {
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const openUserProfile = useOpenUserRoomProfile();
 
@@ -70,26 +69,27 @@ export function LiveChip({ count, room, members }: LiveChipProps) {
             <Box grow="Yes">
               <Scroll size="0" hideTrack visibility="Hover">
                 <Box direction="Column" style={{ padding: config.space.S100 }}>
-                  {members.map((callMember) => {
-                    const userId = callMember.sender;
+                  {users.map((userId) => {
                     if (!userId) return null;
-                    const name =
-                      getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
-                    const avatarMxc = getMemberAvatarMxc(room, userId);
+                    const name = membersAPI.getName(userId);
+                    const avatarMxc = membersAPI.getAvatar(userId);
                     const avatarUrl = avatarMxc
-                      ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+                      ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+                          width: 96,
+                          height: 96,
+                        })
                       : undefined;
 
                     return (
                       <MenuItem
-                        key={callMember.memberId}
+                        key={userId}
                         size="400"
                         variant="Surface"
                         radii="300"
                         style={{ paddingLeft: config.space.S200 }}
                         onClick={(evt) =>
                           openUserProfile(
-                            room.roomId,
+                            roomId,
                             undefined,
                             userId,
                             getMouseEventCords(evt.nativeEvent),
diff --git a/src/app/features/call-status/MemberGlance.tsx b/src/app/features/call-status/MemberGlance.tsx
index dabc440f..39ce39a5 100644
--- a/src/app/features/call-status/MemberGlance.tsx
+++ b/src/app/features/call-status/MemberGlance.tsx
@@ -1,59 +1,54 @@
 import { Box, config, Icon, Icons, Text } from 'folds';
-import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import React from 'react';
-import { Room } from 'matrix-js-sdk';
 import { UserAvatar } from '../../components/user-avatar';
-import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { StackedAvatar } from '../../components/stacked-avatar';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { getMouseEventCords } from '../../utils/dom';
 import * as css from './styles.css';
+import { RoomMembersAPI } from '../../hooks/useRoomMembers';
+import { useClient } from '../../hooks/useClient';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 type MemberGlanceProps = {
-  room: Room;
-  members: CallMembership[];
+  roomId: string;
+  users: string[];
+  membersAPI: RoomMembersAPI;
   speakers: Set<string>;
   max?: number;
 };
-export function MemberGlance({ room, members, speakers, max = 6 }: MemberGlanceProps) {
-  const mx = useMatrixClient();
+export function MemberGlance({ roomId, users, membersAPI, speakers, max = 6 }: MemberGlanceProps) {
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
   const openUserProfile = useOpenUserRoomProfile();
 
-  const visibleMembers = members.slice(0, max);
-  const remainingCount = max && members.length > max ? members.length - max : 0;
+  const visibleMembers = users.slice(0, max);
+  const remainingCount = max && users.length > max ? users.length - max : 0;
 
   return (
     <Box alignItems="Center">
-      {visibleMembers.map((callMember) => {
-        const { userId } = callMember;
+      {visibleMembers.map((userId) => {
         if (!userId) return null;
-        const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
-        const avatarMxc = getMemberAvatarMxc(room, userId);
+        const name = membersAPI.getName(userId);
+        const avatarMxc = membersAPI.getAvatar(userId);
         const avatarUrl = avatarMxc
-          ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+          ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+              width: 96,
+              height: 96,
+            })
           : undefined;
 
         return (
           <StackedAvatar
-            key={callMember.memberId}
-            className={speakers.has(callMember.sender) ? css.SpeakerAvatarOutline : undefined}
+            key={userId}
+            className={speakers.has(userId) ? css.SpeakerAvatarOutline : undefined}
             title={name}
             as="button"
             variant="Background"
             size="200"
             radii="Pill"
             onClick={(evt) =>
-              openUserProfile(
-                room.roomId,
-                undefined,
-                userId,
-                getMouseEventCords(evt.nativeEvent),
-                'Top'
-              )
+              openUserProfile(roomId, undefined, userId, getMouseEventCords(evt.nativeEvent), 'Top')
             }
           >
             <UserAvatar
diff --git a/src/app/features/call-status/MemberSpeaking.tsx b/src/app/features/call-status/MemberSpeaking.tsx
index 27e272f2..e3985657 100644
--- a/src/app/features/call-status/MemberSpeaking.tsx
+++ b/src/app/features/call-status/MemberSpeaking.tsx
@@ -1,17 +1,14 @@
-import { Room } from 'matrix-js-sdk';
 import React from 'react';
 import { Box, Icon, Icons, Text } from 'folds';
-import { getMemberDisplayName } from '../../utils/room';
-import { getMxIdLocalPart } from '../../utils/matrix';
+import { RoomMembersAPI } from '../../hooks/useRoomMembers';
 
 type MemberSpeakingProps = {
-  room: Room;
+  membersAPI: RoomMembersAPI;
   speakers: Set<string>;
 };
-export function MemberSpeaking({ room, speakers }: MemberSpeakingProps) {
-  const speakingNames = Array.from(speakers).map(
-    (userId) => getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId
-  );
+export function MemberSpeaking({ membersAPI, speakers }: MemberSpeakingProps) {
+  const speakingNames = Array.from(speakers).map((userId) => membersAPI.getName(userId));
+
   return (
     <Box alignItems="Center" gap="100">
       <Icon size="100" src={Icons.Mic} filled />
diff --git a/src/app/features/call/CallMemberCard.tsx b/src/app/features/call/CallMemberCard.tsx
index 8c37160b..c4292225 100644
--- a/src/app/features/call/CallMemberCard.tsx
+++ b/src/app/features/call/CallMemberCard.tsx
@@ -1,53 +1,51 @@
-import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
 import React, { useState } from 'react';
 import { Avatar, Box, Icon, Icons, Text } from 'folds';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { useOpenUserRoomProfile } from '../../state/hooks/userRoomProfile';
 import { SequenceCard } from '../../components/sequence-card';
-import { getMemberAvatarMxc, getMemberDisplayName } from '../../utils/room';
 import { useRoom } from '../../hooks/useRoom';
-import { getMxIdLocalPart, mxcUrlToHttp } from '../../utils/matrix';
 import { UserAvatar } from '../../components/user-avatar';
 import { getMouseEventCords } from '../../utils/dom';
 import * as css from './styles.css';
+import { CallMember } from '../../../client/call';
+import { useClient } from '../../hooks/useClient';
+import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
+import { mxcToHttp } from '../../../client/mxcToHttp';
 
 type CallMemberCardProps = {
-  member: CallMembership;
+  member: CallMember;
 };
 export function CallMemberCard({ member }: CallMemberCardProps) {
-  const mx = useMatrixClient();
+  const ct = useClient();
   const useAuthentication = useMediaAuthentication();
-  const room = useRoom();
+  const roomId = useRoom();
+  const membersAPI = useRoomMembersAPI();
 
   const openUserProfile = useOpenUserRoomProfile();
 
   const { userId } = member;
   if (!userId) return null;
 
-  const name = getMemberDisplayName(room, userId) ?? getMxIdLocalPart(userId) ?? userId;
-  const avatarMxc = getMemberAvatarMxc(room, userId);
+  const name = membersAPI.getName(member.userId);
+  const avatarMxc = membersAPI.getAvatar(member.userId);
   const avatarUrl = avatarMxc
-    ? mxcUrlToHttp(mx, avatarMxc, useAuthentication, 96, 96) ?? undefined
+    ? mxcToHttp(ct.session.baseUrl, avatarMxc, useAuthentication).thumbnail({
+        width: 96,
+        height: 96,
+      })
     : undefined;
 
-  const audioOnly = member.callIntent === 'audio';
+  const audioOnly = member.intent === 'audio';
 
   return (
     <SequenceCard
       as="button"
-      key={member.memberId}
+      key={member.userId}
       className={css.CallMemberCard}
       variant="SurfaceVariant"
       radii="500"
       onClick={(evt: any) =>
-        openUserProfile(
-          room.roomId,
-          undefined,
-          userId,
-          getMouseEventCords(evt.nativeEvent),
-          'Right'
-        )
+        openUserProfile(roomId, undefined, userId, getMouseEventCords(evt.nativeEvent), 'Right')
       }
     >
       <Box grow="Yes" gap="300" alignItems="Center">
@@ -70,13 +68,7 @@ export function CallMemberCard({ member }: CallMemberCardProps) {
   );
 }
 
-export function CallMemberRenderer({
-  members,
-  max = 4,
-}: {
-  members: CallMembership[];
-  max?: number;
-}) {
+export function CallMemberRenderer({ members, max = 4 }: { members: CallMember[]; max?: number }) {
   const [viewMore, setViewMore] = useState(false);
 
   const truncatedMembers = viewMore ? members : members.slice(0, 4);
@@ -85,7 +77,7 @@ export function CallMemberRenderer({
   return (
     <>
       {truncatedMembers.map((member) => (
-        <CallMemberCard key={member.memberId} member={member} />
+        <CallMemberCard key={member.userId} member={member} />
       ))}
       {members.length > max && (
         <SequenceCard
diff --git a/src/app/features/call/CallView.tsx b/src/app/features/call/CallView.tsx
index 1fb97650..d2757b93 100644
--- a/src/app/features/call/CallView.tsx
+++ b/src/app/features/call/CallView.tsx
@@ -1,4 +1,4 @@
-import React, { RefObject, useRef } from 'react';
+import React, { RefObject, useMemo, useRef } from 'react';
 import { Badge, Box, color, Header, Scroll, Text, toRem } from 'folds';
 import { useCallEmbed, useCallJoined, useCallEmbedPlacementSync } from '../../hooks/useCallEmbed';
 import { ContainerColor } from '../../styles/ContainerColor.css';
@@ -7,7 +7,6 @@ import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { useRoom } from '../../hooks/useRoom';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
 import { useRoomPermissions } from '../../hooks/useRoomPermissions';
-import { useMatrixClient } from '../../hooks/useMatrixClient';
 import { StateEvent } from '../../../types/matrix/room';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
 import { CallMemberRenderer } from './CallMemberCard';
@@ -15,6 +14,7 @@ import * as css from './styles.css';
 import { CallControls } from './CallControls';
 import { useLivekitSupport } from '../../hooks/useLivekitSupport';
 import { webRTCSupported } from '../../utils/rtc';
+import { useClient } from '../../hooks/useClient';
 
 function LivekitServerMissingMessage() {
   return (
@@ -75,26 +75,26 @@ function AlreadyInCallMessage() {
 }
 
 function CallPrescreen() {
-  const mx = useMatrixClient();
-  const room = useRoom();
+  const ct = useClient();
+  const roomId = useRoom();
   const livekitSupported = useLivekitSupport();
   const rtcSupported = webRTCSupported();
 
   const powerLevels = usePowerLevelsContext();
-  const creators = useRoomCreators(room);
+  const creators = useRoomCreators(roomId);
 
   const permissions = useRoomPermissions(creators, powerLevels);
-  const hasPermission = permissions.stateEvent(
-    StateEvent.GroupCallMemberPrefix,
-    mx.getSafeUserId()
-  );
+  const hasPermission = permissions.stateEvent(StateEvent.GroupCallMemberPrefix, ct.session.userId);
 
-  const callSession = useCallSession(room);
+  const callSession = useCallSession(roomId);
   const callMembers = useCallMembers(callSession);
+
+  const users = useMemo(() => Array.from(new Set(callMembers.map((m) => m.userId))), [callMembers]);
+
   const hasParticipant = callMembers.length > 0;
 
   const callEmbed = useCallEmbed();
-  const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;
+  const inOtherCall = callEmbed && callEmbed.roomId !== roomId;
 
   const canJoin = hasPermission && livekitSupported && rtcSupported;
 
@@ -109,7 +109,7 @@ function CallPrescreen() {
               </Box>
               <Badge variant="Critical" fill="Solid" size="400">
                 <Text as="span" size="L400" truncate>
-                  {callMembers.length} Live
+                  {users.length} Live
                 </Text>
               </Badge>
             </Header>
@@ -151,14 +151,14 @@ function CallJoined({ joined, containerRef }: CallJoinedProps) {
 }
 
 export function CallView() {
-  const room = useRoom();
+  const roomId = useRoom();
   const callContainerRef = useRef<HTMLDivElement>(null);
   useCallEmbedPlacementSync(callContainerRef);
 
   const callEmbed = useCallEmbed();
   const callJoined = useCallJoined(callEmbed);
 
-  const currentJoined = callEmbed?.roomId === room.roomId && callJoined;
+  const currentJoined = callEmbed?.roomId === roomId && callJoined;
 
   return (
     <Box
diff --git a/src/app/features/call/PrescreenControls.tsx b/src/app/features/call/PrescreenControls.tsx
index ec779b83..c8a08ddd 100644
--- a/src/app/features/call/PrescreenControls.tsx
+++ b/src/app/features/call/PrescreenControls.tsx
@@ -3,7 +3,7 @@ import { Box, Button, Icon, Icons, Spinner, Text } from 'folds';
 import { SequenceCard } from '../../components/sequence-card';
 import * as css from './styles.css';
 import { ChatButton, ControlDivider, MicrophoneButton, SoundButton, VideoButton } from './Controls';
-import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
+import { useRoom } from '../../hooks/useRoom';
 import { useCallEmbed, useCallJoined, useCallStart } from '../../hooks/useCallEmbed';
 import { useCallPreferences } from '../../state/hooks/callPreferences';
 
@@ -11,22 +11,20 @@ type PrescreenControlsProps = {
   canJoin?: boolean;
 };
 export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
-  const room = useRoom();
+  const roomId = useRoom();
   const callEmbed = useCallEmbed();
   const callJoined = useCallJoined(callEmbed);
-  const direct = useIsDirectRoom();
 
-  const inOtherCall = callEmbed && callEmbed.roomId !== room.roomId;
+  const inOtherCall = callEmbed && callEmbed.roomId !== roomId;
 
-  const startCall = useCallStart(direct);
-  const joining = callEmbed?.roomId === room.roomId && !callJoined;
+  const startCall = useCallStart();
+  const joining = callEmbed?.roomId === roomId && !callJoined;
 
   const disabled = inOtherCall || !canJoin;
 
   const { microphone, video, sound, toggleMicrophone, toggleVideo, toggleSound } =
     useCallPreferences();
 
-
   const handleMicrophoneToggle = useCallback(async () => toggleMicrophone(), [toggleMicrophone]);
   const handleVideoToggle = useCallback(async () => toggleVideo(), [toggleVideo]);
 
@@ -53,7 +51,7 @@ export function PrescreenControls({ canJoin }: PrescreenControlsProps) {
         <Button
           variant={disabled ? 'Secondary' : 'Success'}
           fill={disabled ? 'Soft' : 'Solid'}
-          onClick={() => startCall(room, { microphone, video, sound })}
+          onClick={() => startCall(roomId, { microphone, video, sound })}
           disabled={disabled || joining}
           before={
             joining ? (
diff --git a/src/app/features/lobby/Lobby.tsx b/src/app/features/lobby/Lobby.tsx
index e5baa199..6ef93256 100644
--- a/src/app/features/lobby/Lobby.tsx
+++ b/src/app/features/lobby/Lobby.tsx
@@ -58,7 +58,7 @@ import { RoomMembersAPIProvider, useCreateRoomMembersAPI } from '../../hooks/use
 import { usePendingMemberLoader, usePendingMembers } from '../../hooks/usePendingMembers';
 import { useAccountData } from '../../hooks/storage/useAccountData';
 import { AccountDataType } from '../../../types/matrix/accountData';
-import { useAllJoinedRoomsSet } from '../../hooks/useGetRoom';
+import { useAllJoinedRoomsSet } from '../../hooks/useAllJoinedRoomsSet';
 import {
   PowerLevelTagsContextProvider,
   usePowerLevelTags,
diff --git a/src/app/features/room-nav/RoomNavItem.tsx b/src/app/features/room-nav/RoomNavItem.tsx
index 48001ffc..63b7f81e 100644
--- a/src/app/features/room-nav/RoomNavItem.tsx
+++ b/src/app/features/room-nav/RoomNavItem.tsx
@@ -18,12 +18,12 @@ import {
 } from 'folds';
 import { useFocusWithin, useHover } from 'react-aria';
 import FocusTrap from 'focus-trap-react';
-import { useAtom } from 'jotai';
+import { useAtom, useAtomValue } from 'jotai';
 import { NavItem, NavItemContent, NavItemOptions, NavLink } from '../../components/nav';
 import { UnreadBadge, UnreadBadgeCenter } from '../../components/unread-badge';
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { nameInitials } from '../../utils/common';
-import { usePowerLevels, usePowerLevelsState } from '../../hooks/usePowerLevels';
+import { getPowerLevels, usePowerLevels, usePowerLevelsState } from '../../hooks/usePowerLevels';
 import { copyToClipboard } from '../../utils/dom';
 import { UseStateProvider } from '../../components/UseStateProvider';
 import { LeaveRoomPrompt } from '../../components/leave-room-prompt';
@@ -42,13 +42,21 @@ import {
 } from '../../hooks/useRoomsNotificationPreferences';
 import { RoomNotificationModeSwitcher } from '../../components/RoomNotificationSwitcher';
 import { useRoomCreators } from '../../hooks/useRoomCreators';
-import { useRoomPermissions } from '../../hooks/useRoomPermissions';
+import { getRoomPermissionsAPI, useRoomPermissions } from '../../hooks/useRoomPermissions';
 import { InviteUserPrompt } from '../../components/invite-user-prompt';
-import { JoinRule } from '../../../types/matrix/room';
+import { JoinRule, StateEvent } from '../../../types/matrix/room';
 import { useClient } from '../../hooks/useClient';
 import { mxcToHttp } from '../../../client/mxcToHttp';
 import { TotalNotifications } from '../../state/hooks/roomNotifications';
 import { callChatAtom } from '../../state/callEmbed';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
+import { useCallPreferencesAtom } from '../../state/hooks/callPreferences';
+import { useAutoDiscoveryInfo } from '../../hooks/useAutoDiscoveryInfo';
+import { livekitSupport } from '../../hooks/useLivekitSupport';
+import { webRTCSupported } from '../../utils/rtc';
+import { getJoinRoomStateId } from '../../../client/storage/collections';
+import { isCallRoom } from '../../utils/room';
 
 type RoomNavItemMenuProps = {
   roomId: string;
@@ -276,6 +284,41 @@ export function RoomNavItem({
 
   const optionsVisible = hover || !!menuAnchor;
   const unreadOrNotification = (notifications && notifications.count > 0) || unread;
+  const callSession = useCallSession(roomId);
+  const callMembers = useCallMembers(callSession);
+  const startCall = useCallStart();
+  const callEmbed = useCallEmbed();
+  const callPref = useAtomValue(useCallPreferencesAtom());
+  const autoDiscoveryInfo = useAutoDiscoveryInfo();
+
+  const handleStartCall: MouseEventHandler<HTMLAnchorElement> = async (evt) => {
+    const powerLevelsStateObj = await ct.storage.joinRoomState.read.get(
+      getJoinRoomStateId(roomId, StateEvent.RoomPowerLevels, '')
+    );
+    const powerLevels = getPowerLevels(powerLevelsStateObj);
+    const creators = ct.roomToCreators.read.get(roomId);
+    const permissions = getRoomPermissionsAPI(creators, powerLevels);
+
+    const hasCallPermission = permissions.stateEvent(
+      StateEvent.GroupCallMemberPrefix,
+      ct.session.userId
+    );
+
+    // Do not join if missing permissions or no livekit support or no webRTC support
+    if (!hasCallPermission || !livekitSupport(autoDiscoveryInfo) || !webRTCSupported()) {
+      return;
+    }
+
+    // Do not join if already in call
+    if (callEmbed) {
+      return;
+    }
+    // Start call in second click
+    if (selected) {
+      evt.preventDefault();
+      startCall(roomId, callPref);
+    }
+  };
 
   return (
     <NavItem
@@ -288,7 +331,10 @@ export function RoomNavItem({
       {...hoverProps}
       {...focusWithinProps}
     >
-      <NavLink to={linkPath}>
+      <NavLink
+        to={linkPath}
+        onClick={isCallRoom(ct.roomToType.read.get(roomId)) ? handleStartCall : undefined}
+      >
         <NavItemContent>
           <Box as="span" grow="Yes" alignItems="Center" gap="200">
             <Avatar size="200" radii="400">
@@ -351,11 +397,22 @@ export function RoomNavItem({
                 aria-label={notificationMode}
               />
             )}
+            {callMembers.length > 0 && (
+              <Badge variant="Critical" fill="Solid" size="400">
+                <Text as="span" size="L400" truncate>
+                  {new Set(callMembers.map((m) => m.userId)).size} Live
+                </Text>
+              </Badge>
+            )}
           </Box>
         </NavItemContent>
       </NavLink>
       {optionsVisible && (
         <NavItemOptions>
+          {selected &&
+            (callEmbed?.roomId === roomId || isCallRoom(ct.roomToType.read.get(roomId))) && (
+              <CallChatToggle />
+            )}
           <PopOut
             id={`menu-${roomId}`}
             aria-expanded={!!menuAnchor}
diff --git a/src/app/features/room/CallChatView.tsx b/src/app/features/room/CallChatView.tsx
index 6c32f4a0..50df737e 100644
--- a/src/app/features/room/CallChatView.tsx
+++ b/src/app/features/room/CallChatView.tsx
@@ -1,14 +1,11 @@
-import React from 'react';
+import React, { ReactNode } from 'react';
 import { useSetAtom } from 'jotai';
-import { useParams } from 'react-router-dom';
 import { Box, Text, TooltipProvider, Tooltip, Icon, Icons, IconButton, toRem } from 'folds';
 import { Page, PageHeader } from '../../components/page';
 import { callChatAtom } from '../../state/callEmbed';
-import { RoomView } from './RoomView';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
 
-export function CallChatView() {
-  const { eventId } = useParams();
+export function CallChatView({ children }: { children: ReactNode }) {
   const setChat = useSetAtom(callChatAtom);
   const screenSize = useScreenSizeContext();
 
@@ -17,7 +14,7 @@ export function CallChatView() {
   return (
     <Page
       style={{
-        width: screenSize === ScreenSize.Desktop ? toRem(456) : '100%',
+        width: screenSize === ScreenSize.Desktop ? toRem(496) : '100%',
         flexShrink: 0,
         flexGrow: 0,
       }}
@@ -50,7 +47,7 @@ export function CallChatView() {
         </Box>
       </PageHeader>
       <Box grow="Yes" direction="Column">
-        <RoomView eventId={eventId} />
+        {children}
       </Box>
     </Page>
   );
diff --git a/src/app/features/room/OutboxView.tsx b/src/app/features/room/OutboxView.tsx
index 848cc335..1d572af9 100644
--- a/src/app/features/room/OutboxView.tsx
+++ b/src/app/features/room/OutboxView.tsx
@@ -200,7 +200,7 @@ function MessageSending({
           <div
             style={{
               marginTop: config.space.S200,
-              width: toRem(400),
+              maxWidth: toRem(400),
             }}
           >
             <MessageSendingError sender={sender} outbox={outbox} senderError={senderState} />
diff --git a/src/app/features/room/Room.tsx b/src/app/features/room/Room.tsx
index bd6da8df..808695cd 100644
--- a/src/app/features/room/Room.tsx
+++ b/src/app/features/room/Room.tsx
@@ -2,6 +2,7 @@ import React, { useCallback, useRef } from 'react';
 import { Box, Line } from 'folds';
 import { useParams } from 'react-router-dom';
 import { isKeyHotkey } from 'is-hotkey';
+import { useAtomValue } from 'jotai';
 import { RoomView } from './RoomView';
 import { MembersDrawer } from './MembersDrawer';
 import { ScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
@@ -25,6 +26,12 @@ import { useClient } from '../../hooks/useClient';
 import { ThreadView } from './thread-view';
 import { TimelineViewProvider } from './hooks/useTimeline';
 import { RoomViewHeader } from './RoomViewHeader';
+import { useCallMembers, useCallSession } from '../../hooks/useCall';
+import { useCallEmbed } from '../../hooks/useCallEmbed';
+import { callChatAtom } from '../../state/callEmbed';
+import { isCallRoom } from '../../utils/room';
+import { CallChatView } from './CallChatView';
+import { CallView } from '../call/CallView';
 
 export function Room() {
   const { eventId } = useParams();
@@ -38,6 +45,11 @@ export function Room() {
   const threadTimeline = activeThreadId ? threads?.get(activeThreadId) : undefined;
   const threadFocusRef = useRef<boolean>(false);
 
+  const callSession = useCallSession(roomId);
+  const callMembers = useCallMembers(callSession);
+  const callEmbed = useCallEmbed();
+  const chat = useAtomValue(callChatAtom);
+
   const [isDrawer] = useSetting('isPeopleDrawer');
   const [hideActivity] = useSetting('hideActivity');
   const screenSize = useScreenSizeContext();
@@ -65,6 +77,11 @@ export function Room() {
     )
   );
 
+  const callView =
+    callEmbed?.roomId === roomId ||
+    isCallRoom(ct.roomToType.read.get(roomId)) ||
+    callMembers.length > 0;
+
   return (
     <RoomMembersAPIProvider value={membersAPI}>
       <PowerLevelsContextProvider value={powerLevels}>
@@ -72,36 +89,62 @@ export function Room() {
           {timeline && (
             <Box grow="Yes">
               <TimelineViewProvider value={timeline}>
-                <Box grow="Yes" direction="Column">
-                  <RoomViewHeader />
-                  <Box grow="Yes">
+                {callView && (screenSize === ScreenSize.Desktop || !chat) && (
+                  <Box grow="Yes" direction="Column">
+                    <RoomViewHeader callView />
+                    <Box grow="Yes">
+                      <CallView />
+                    </Box>
+                  </Box>
+                )}
+                {!callView && !(threadTimeline && screenSize !== ScreenSize.Desktop) && (
+                  <Box grow="Yes" direction="Column">
+                    <RoomViewHeader />
+                    <Box grow="Yes">
+                      <RoomView
+                        key={roomId}
+                        threadFocusRef={threadFocusRef}
+                        timeline={timeline}
+                        eventId={eventId}
+                      />
+                    </Box>
+                  </Box>
+                )}
+              </TimelineViewProvider>
+
+              {callView && chat && !threadTimeline && (
+                <TimelineViewProvider value={timeline}>
+                  {screenSize === ScreenSize.Desktop && (
+                    <Line variant="Background" direction="Vertical" size="300" />
+                  )}
+                  <CallChatView>
                     <RoomView
                       key={roomId}
                       threadFocusRef={threadFocusRef}
                       timeline={timeline}
                       eventId={eventId}
                     />
-                  </Box>
-                </Box>
-              </TimelineViewProvider>
+                  </CallChatView>
+                </TimelineViewProvider>
+              )}
 
-              {threadTimeline ? (
+              {threadTimeline && (
                 <TimelineViewProvider key={threadTimeline.threadId} value={threadTimeline}>
-                  <Line variant="Surface" direction="Vertical" size="300" />
+                  {screenSize === ScreenSize.Desktop && (
+                    <Line variant="Background" direction="Vertical" size="300" />
+                  )}
                   <ThreadView
                     threadTimeline={threadTimeline}
                     threadFocusRef={threadFocusRef}
                     requestClose={() => timeline.closeThread()}
                   />
                 </TimelineViewProvider>
-              ) : (
-                screenSize === ScreenSize.Desktop &&
-                isDrawer && (
-                  <>
-                    <Line variant="Background" direction="Vertical" size="300" />
-                    <MembersDrawer key={roomId} />
-                  </>
-                )
+              )}
+              {!threadTimeline && !callView && screenSize === ScreenSize.Desktop && isDrawer && (
+                <>
+                  <Line variant="Background" direction="Vertical" size="300" />
+                  <MembersDrawer key={roomId} />
+                </>
               )}
             </Box>
           )}
diff --git a/src/app/features/room/RoomTombstone.tsx b/src/app/features/room/RoomTombstone.tsx
index 6649d7e9..0e371a23 100644
--- a/src/app/features/room/RoomTombstone.tsx
+++ b/src/app/features/room/RoomTombstone.tsx
@@ -9,7 +9,7 @@ import { RoomInputPlaceholder } from './RoomInputPlaceholder';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useClient } from '../../hooks/useClient';
 import { useRoomStateEvent } from '../../hooks/storage/useRoomStateEvent';
-import { useAllJoinedRoomsSet } from '../../hooks/useGetRoom';
+import { useAllJoinedRoomsSet } from '../../hooks/useAllJoinedRoomsSet';
 import { getMxIdServer } from '../../utils/matrix';
 
 type RoomTombstoneProps = { roomId: string; replacementRoomId: string };
diff --git a/src/app/features/room/RoomViewHeader.tsx b/src/app/features/room/RoomViewHeader.tsx
index 20c2dadb..60f0ea33 100644
--- a/src/app/features/room/RoomViewHeader.tsx
+++ b/src/app/features/room/RoomViewHeader.tsx
@@ -21,6 +21,7 @@ import {
   RectCords,
   Badge,
   Spinner,
+  Button,
 } from 'folds';
 import { useNavigate } from 'react-router-dom';
 import { PageHeader } from '../../components/page';
@@ -71,6 +72,11 @@ import { roomToNotificationsAtom } from '../../state/room/roomToNotifications';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { RoomSettingsPage } from '../../state/roomSettings';
 import { RoomAccessIndicator } from '../../components/RoomAccessIndicator';
+import { useCallEmbed, useCallStart } from '../../hooks/useCallEmbed';
+import { useLivekitSupport } from '../../hooks/useLivekitSupport';
+import { webRTCSupported } from '../../utils/rtc';
+import { StateEvent } from '../../../types/matrix/room';
+import { isCallRoom } from '../../utils/room';
 
 type RoomMenuProps = {
   requestClose: () => void;
@@ -259,6 +265,131 @@ const RoomMenu = forwardRef<HTMLDivElement, RoomMenuProps>(({ requestClose }, re
   );
 });
 
+type CallMenuProps = {
+  onVoiceCall: () => void;
+  onVideoCall: () => void;
+  requestClose: () => void;
+};
+const CallMenu = forwardRef<HTMLDivElement, CallMenuProps>(
+  ({ requestClose, onVoiceCall, onVideoCall }, ref) => {
+    const handleVoice = () => {
+      onVoiceCall();
+      requestClose();
+    };
+    const handleVideo = () => {
+      onVideoCall();
+      requestClose();
+    };
+
+    return (
+      <Menu ref={ref} style={{ padding: config.space.S200, minWidth: toRem(150) }}>
+        <Box direction="Column" gap="200">
+          <Text size="L400">Start Call</Text>
+          <Box direction="Column" gap="200">
+            <Button
+              size="300"
+              variant="Success"
+              fill="Soft"
+              outlined
+              radii="300"
+              before={<Icon size="100" src={Icons.Phone} filled />}
+              onClick={handleVoice}
+            >
+              <Text size="B300">Voice</Text>
+            </Button>
+            <Button
+              size="300"
+              variant="Success"
+              radii="300"
+              before={<Icon size="100" src={Icons.VideoCamera} filled />}
+              onClick={handleVideo}
+            >
+              <Text size="B300">Video</Text>
+            </Button>
+          </Box>
+        </Box>
+      </Menu>
+    );
+  }
+);
+
+function CallButton() {
+  const roomId = useRoom();
+
+  const callEmbed = useCallEmbed();
+  const startCall = useCallStart();
+  const callStarted = callEmbed && callEmbed.roomId === roomId;
+  const inAnotherCall = callEmbed && !callStarted;
+  const [menuAnchor, setMenuAnchor] = useState<RectCords>();
+
+  const handleOpenMenu: MouseEventHandler<HTMLButtonElement> = (evt) => {
+    setMenuAnchor(evt.currentTarget.getBoundingClientRect());
+  };
+
+  return (
+    <>
+      <TooltipProvider
+        position="Bottom"
+        offset={4}
+        tooltip={
+          <Tooltip>
+            {inAnotherCall ? (
+              <Text size="L400">Already in another call — End the current call to join!</Text>
+            ) : (
+              <Text>Call</Text>
+            )}
+          </Tooltip>
+        }
+      >
+        {(triggerRef) => (
+          <IconButton
+            variant="Surface"
+            fill="None"
+            ref={triggerRef}
+            onClick={handleOpenMenu}
+            onContextMenu={(evt) => {
+              evt.preventDefault();
+              startCall(roomId, {
+                microphone: true,
+                video: true,
+                sound: true,
+              });
+            }}
+            disabled={inAnotherCall || callStarted}
+            aria-pressed={!!menuAnchor}
+          >
+            <Icon size="400" src={Icons.VideoCamera} filled={!!menuAnchor} />
+          </IconButton>
+        )}
+      </TooltipProvider>
+      <PopOut
+        anchor={menuAnchor}
+        position="Bottom"
+        align="Center"
+        content={
+          <FocusTrap
+            focusTrapOptions={{
+              initialFocus: false,
+              returnFocusOnDeactivate: false,
+              onDeactivate: () => setMenuAnchor(undefined),
+              clickOutsideDeactivates: true,
+              isKeyForward: (evt: KeyboardEvent) => evt.key === 'ArrowDown',
+              isKeyBackward: (evt: KeyboardEvent) => evt.key === 'ArrowUp',
+              escapeDeactivates: stopPropagation,
+            }}
+          >
+            <CallMenu
+              onVideoCall={() => startCall(roomId, { microphone: true, video: true, sound: true })}
+              onVoiceCall={() => startCall(roomId, { microphone: true, video: false, sound: true })}
+              requestClose={() => setMenuAnchor(undefined)}
+            />
+          </FocusTrap>
+        }
+      />
+    </>
+  );
+}
+
 export function RoomViewHeader({ callView }: { callView?: boolean }) {
   const navigate = useNavigate();
   const ct = useClient();
@@ -271,6 +402,16 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
   const encryptedRooms = useObservableValue(ct.encryptedRooms);
   const roomToJoinRule = useObservableValue(ct.roomToJoinRule);
 
+  const creators = useRoomCreators(roomId);
+  const powerLevels = usePowerLevelsContext();
+  const permissions = useRoomPermissions(creators, powerLevels);
+  const hasCallPermission = permissions.stateEvent(
+    StateEvent.GroupCallMemberPrefix,
+    ct.session.userId
+  );
+  const livekitSupported = useLivekitSupport();
+  const rtcSupported = webRTCSupported();
+
   const pinnedEvents = useRoomPinnedEvents(roomId);
 
   const getRoomHeroes = useRoomHeroes();
@@ -474,6 +615,11 @@ export function RoomViewHeader({ callView }: { callView?: boolean }) {
               </FocusTrap>
             }
           />
+          {!isCallRoom(ct.roomToType.read.get(roomId)) &&
+            livekitSupported &&
+            rtcSupported &&
+            hasCallPermission && <CallButton />}
+
           {screenSize === ScreenSize.Desktop && (
             <TooltipProvider
               position="Bottom"
diff --git a/src/app/features/room/hooks/useEnsureRoomEncryptionSession.ts b/src/app/features/room/hooks/useEnsureRoomEncryptionSession.ts
deleted file mode 100644
index 793b142f..00000000
--- a/src/app/features/room/hooks/useEnsureRoomEncryptionSession.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-import { useCallback } from 'react';
-import {
-  EncryptionSettings,
-  HistoryVisibility,
-  RoomEncryptionSettings,
-} from 'neurone/lib/crypto/machine';
-import { ObjectReader } from 'neurone/lib/utils';
-import { useClient } from '../../../hooks/useClient';
-import { useRoom } from '../../../hooks/useRoom';
-import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
-
-export function buildEncryptionSettings(
-  historyVisibility: HistoryVisibility,
-  roomSettings: RoomEncryptionSettings | undefined,
-  encryptionEventContent: object | undefined
-): EncryptionSettings {
-  const rotationPeriodMs = ObjectReader.number(encryptionEventContent, 'rotation_period_ms');
-
-  const rotationPeriodMsgs = ObjectReader.number(encryptionEventContent, 'rotation_period_msgs');
-
-  const rotationMilliseconds = roomSettings?.sessionRotationPeriodMs ?? rotationPeriodMs;
-
-  return {
-    algorithm: 'm.megolm.v1.aes-sha2',
-    historyVisibility,
-    encryptStateEvents: roomSettings?.encryptStateEvents,
-    // EncryptionSettings expects microseconds.
-    rotationPeriod: rotationMilliseconds === undefined ? undefined : rotationMilliseconds * 1_000,
-    rotationPeriodMessages: roomSettings?.sessionRotationPeriodMessages ?? rotationPeriodMsgs,
-    sharingStrategy: roomSettings?.onlyAllowTrustedDevices ? 'only-trusted-devices' : 'all-devices',
-  };
-}
-
-export const useEnsureRoomEncryptionSession = () => {
-  const ct = useClient();
-  const roomId = useRoom();
-
-  const { memberEventsResult, getMembership } = useRoomMembersAPI();
-
-  const prepareEncryptionSession = useCallback(async () => {
-    if (!ct.encryptedRooms.read.has(roomId)) {
-      return;
-    }
-    const historyVisibility = ct.roomToHistoryVisibility.read.get(roomId) ?? 'shared';
-    const encryptForInvited = historyVisibility !== 'joined';
-
-    // TODO: make sure all members are loaded.
-    const targetMembers = memberEventsResult.value
-      ?.map((e) => e.userId)
-      .filter((userId) => {
-        const membership = getMembership(userId);
-        return membership === 'join' || (membership === 'invite' && encryptForInvited);
-      });
-
-    if (!targetMembers) return;
-
-    await ct.machine.userTracker.track(targetMembers);
-    await ct.machine.outgoingRequests.processAll();
-    await ct.machine.outgoingRequests.claimKeys(targetMembers);
-
-    const roomSettings = await ct.machine.roomEncryption.getSettings(roomId);
-    const encryptionEventContent = ct.state.join.encryption.read.find((ev) => ev.roomId === roomId)
-      ?.event.content;
-
-    const encryptionSettings: EncryptionSettings = buildEncryptionSettings(
-      historyVisibility,
-      roomSettings,
-      encryptionEventContent
-    );
-
-    await ct.machine.roomKeys.shareRoomKey(roomId, targetMembers, encryptionSettings);
-  }, [ct, roomId, memberEventsResult, getMembership]);
-
-  return prepareEncryptionSession;
-};
diff --git a/src/app/features/room/hooks/useSendEditedMessage.ts b/src/app/features/room/hooks/useSendEditedMessage.ts
index 80c20c7b..f395613f 100644
--- a/src/app/features/room/hooks/useSendEditedMessage.ts
+++ b/src/app/features/room/hooks/useSendEditedMessage.ts
@@ -3,7 +3,7 @@ import { Editor } from 'slate';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { useClient } from '../../../hooks/useClient';
 import { useRoom } from '../../../hooks/useRoom';
-import { useEnsureRoomEncryptionSession } from './useEnsureRoomEncryptionSession';
+import { useEnsureRoomEncryptionSession } from '../../../hooks/useEnsureRoomEncryptionSession';
 import {
   EventSenderIdle,
   LocalEvent,
diff --git a/src/app/features/room/hooks/useSendMessage.ts b/src/app/features/room/hooks/useSendMessage.ts
index 48fc1f98..136afd74 100644
--- a/src/app/features/room/hooks/useSendMessage.ts
+++ b/src/app/features/room/hooks/useSendMessage.ts
@@ -36,7 +36,7 @@ import {
   RelationType,
   StickerContent,
 } from '../../../../types/matrix/common';
-import { useEnsureRoomEncryptionSession } from './useEnsureRoomEncryptionSession';
+import { useEnsureRoomEncryptionSession } from '../../../hooks/useEnsureRoomEncryptionSession';
 import { LocalMessage } from '../../../../client/room/local-event';
 import { useTimelineView } from './useTimeline';
 
diff --git a/src/app/features/room/thread-view/ThreadView.tsx b/src/app/features/room/thread-view/ThreadView.tsx
index 3a8a0c07..7921b74b 100644
--- a/src/app/features/room/thread-view/ThreadView.tsx
+++ b/src/app/features/room/thread-view/ThreadView.tsx
@@ -1,11 +1,7 @@
 import React, { MutableRefObject, useRef } from 'react';
-import classNames from 'classnames';
-import { Box, config, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider } from 'folds';
-import FocusTrap from 'focus-trap-react';
-import * as css from './styles.css';
+import { Box, config, Icon, IconButton, Icons, Text, Tooltip, TooltipProvider, toRem } from 'folds';
 import { ThreadTimeline } from '../../../../client/room/ThreadTimeline';
 import { Page, PageHeader } from '../../../components/page';
-import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useEditor } from '../../../components/editor';
 import { RoomInput } from '../RoomInput';
 import { TimelineView } from './TimelineView';
@@ -13,6 +9,7 @@ import { useEditorAutoFocus, useThreadFocus } from '../hooks/useEditorAutoFocus'
 import { useSetting } from '../../../state/hooks/settings';
 import { FollowingMembersPlaceholder } from '../components';
 import { ThreadViewFollowing } from './ThreadViewFollowing';
+import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 
 type ThreadViewProps = {
   threadTimeline: ThreadTimeline;
@@ -22,7 +19,6 @@ type ThreadViewProps = {
 
 export function ThreadView({ threadTimeline, threadFocusRef, requestClose }: ThreadViewProps) {
   const screenSize = useScreenSizeContext();
-  const floating = screenSize !== ScreenSize.Desktop;
   const editor = useEditor();
   const threadInputRef = useRef<HTMLDivElement>(null);
   const threadViewRef = useRef<HTMLDivElement>(null);
@@ -32,69 +28,62 @@ export function ThreadView({ threadTimeline, threadFocusRef, requestClose }: Thr
   useEditorAutoFocus(editor, threadFocusRef, true);
 
   return (
-    <FocusTrap
-      paused={!floating}
-      focusTrapOptions={{
-        initialFocus: false,
-        clickOutsideDeactivates: true,
-        onDeactivate: floating ? requestClose : undefined,
+    <Page
+      ref={threadViewRef}
+      style={{
+        width: screenSize === ScreenSize.Desktop ? toRem(496) : '100%',
+        flexShrink: 0,
+        flexGrow: 0,
       }}
     >
-      <Page
-        ref={threadViewRef}
-        className={classNames(css.ThreadView, {
-          [css.ThreadViewFloating]: floating,
-        })}
-      >
-        <PageHeader>
-          <Box grow="Yes" alignItems="Center" gap="200">
-            <Box grow="Yes">
-              <Text size="H5" truncate>
-                Thread
-              </Text>
-            </Box>
-            <Box shrink="No" alignItems="Center">
-              <TooltipProvider
-                position="Bottom"
-                align="End"
-                offset={4}
-                tooltip={
-                  <Tooltip>
-                    <Text>Close</Text>
-                  </Tooltip>
-                }
-              >
-                {(triggerRef) => (
-                  <IconButton ref={triggerRef} variant="Surface" onClick={requestClose}>
-                    <Icon src={Icons.Cross} />
-                  </IconButton>
-                )}
-              </TooltipProvider>
-            </Box>
+      <PageHeader>
+        <Box grow="Yes" alignItems="Center" gap="200">
+          <Box grow="Yes">
+            <Text size="H5" truncate>
+              Thread
+            </Text>
+          </Box>
+          <Box shrink="No" alignItems="Center">
+            <TooltipProvider
+              position="Bottom"
+              align="End"
+              offset={4}
+              tooltip={
+                <Tooltip>
+                  <Text>Close</Text>
+                </Tooltip>
+              }
+            >
+              {(triggerRef) => (
+                <IconButton ref={triggerRef} variant="Surface" onClick={requestClose}>
+                  <Icon src={Icons.Cross} />
+                </IconButton>
+              )}
+            </TooltipProvider>
           </Box>
-        </PageHeader>
-
-        <TimelineView
-          threadTimeline={threadTimeline}
-          threadInputRef={threadInputRef}
-          editor={editor}
-        />
-        <Box shrink="No" direction="Column">
-          <div style={{ padding: `0 ${config.space.S400}` }}>
-            <RoomInput
-              editor={editor}
-              fileDropContainerRef={threadViewRef}
-              ref={threadInputRef}
-              threadId={threadTimeline.threadId}
-            />
-          </div>
-          {hideActivity ? (
-            <FollowingMembersPlaceholder />
-          ) : (
-            <ThreadViewFollowing threadTimeline={threadTimeline} />
-          )}
         </Box>
-      </Page>
-    </FocusTrap>
+      </PageHeader>
+
+      <TimelineView
+        threadTimeline={threadTimeline}
+        threadInputRef={threadInputRef}
+        editor={editor}
+      />
+      <Box shrink="No" direction="Column">
+        <div style={{ padding: `0 ${config.space.S400}` }}>
+          <RoomInput
+            editor={editor}
+            fileDropContainerRef={threadViewRef}
+            ref={threadInputRef}
+            threadId={threadTimeline.threadId}
+          />
+        </div>
+        {hideActivity ? (
+          <FollowingMembersPlaceholder />
+        ) : (
+          <ThreadViewFollowing threadTimeline={threadTimeline} />
+        )}
+      </Box>
+    </Page>
   );
 }
diff --git a/src/app/features/room/thread-view/styles.css.ts b/src/app/features/room/thread-view/styles.css.ts
index 9a0867e9..7aa734c0 100644
--- a/src/app/features/room/thread-view/styles.css.ts
+++ b/src/app/features/room/thread-view/styles.css.ts
@@ -1,27 +1,6 @@
 import { keyframes, style } from '@vanilla-extract/css';
-import { config, toRem } from 'folds';
 import { ContainerColor } from '../../../styles/ContainerColor.css';
 
-export const ThreadView = style({
-  // width: toRem(456),
-  width: toRem(496),
-  flexShrink: 0,
-  flexGrow: 0,
-});
-
-export const ThreadViewFloating = style({
-  position: 'absolute',
-  right: 0,
-  top: 0,
-  bottom: 0,
-  zIndex: 1,
-
-  maxWidth: toRem(496),
-  flexShrink: 1,
-  width: '100vw',
-  boxShadow: config.shadow.E400,
-});
-
 export const ZigZagLine = style([
   ContainerColor({ variant: 'Background' }),
   {
diff --git a/src/app/hooks/useAllJoinedRoomsSet.ts b/src/app/hooks/useAllJoinedRoomsSet.ts
new file mode 100644
index 00000000..09a451f9
--- /dev/null
+++ b/src/app/hooks/useAllJoinedRoomsSet.ts
@@ -0,0 +1,10 @@
+import { useAtomValue } from 'jotai';
+import { useMemo } from 'react';
+import { allRoomsAtom } from '../state/room-list/roomList';
+
+export const useAllJoinedRoomsSet = () => {
+  const allRooms = useAtomValue(allRoomsAtom);
+  const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
+
+  return allJoinedRooms;
+};
diff --git a/src/app/hooks/useCall.ts b/src/app/hooks/useCall.ts
index 817e12fc..8d1ec8bf 100644
--- a/src/app/hooks/useCall.ts
+++ b/src/app/hooks/useCall.ts
@@ -1,60 +1,28 @@
-import { Room } from 'matrix-js-sdk';
-import {
-  MatrixRTCSession,
-  MatrixRTCSessionEvent,
-  MatrixRTCSessionEventHandlerMap,
-} from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSession';
-import { CallMembership } from 'matrix-js-sdk/lib/matrixrtc/CallMembership';
-import { useEffect, useState } from 'react';
-import { MatrixRTCSessionManagerEvents } from 'matrix-js-sdk/lib/matrixrtc/MatrixRTCSessionManager';
-import { useMatrixClient } from './useMatrixClient';
+import { useEffect } from 'react';
+import { useClient } from './useClient';
+import { CallMember, CallSession } from '../../client/call';
+import { useObservableValue } from './useObservableValue';
 
-export const useCallSession = (room: Room): MatrixRTCSession => {
-  const mx = useMatrixClient();
+export const useCallSession = (roomId: string): CallSession => {
+  const ct = useClient();
 
-  const [session, setSession] = useState(mx.matrixRTC.getRoomSession(room));
-
-  useEffect(() => {
-    const start = (roomId: string) => {
-      if (roomId !== room.roomId) return;
-      setSession(mx.matrixRTC.getRoomSession(room));
-    };
-    const end = (roomId: string) => {
-      if (roomId !== room.roomId) return;
-      setSession(mx.matrixRTC.getRoomSession(room));
-    };
-    mx.matrixRTC.on(MatrixRTCSessionManagerEvents.SessionStarted, start);
-    mx.matrixRTC.on(MatrixRTCSessionManagerEvents.SessionEnded, end);
-    return () => {
-      mx.matrixRTC.off(MatrixRTCSessionManagerEvents.SessionStarted, start);
-      mx.matrixRTC.off(MatrixRTCSessionManagerEvents.SessionEnded, end);
-    };
-  }, [mx, room]);
-
-  return session;
+  return ct.callSessions.getSession(roomId);
 };
 
 export const useCallMembersChange = (
-  session: MatrixRTCSession,
-  callback: (members: CallMembership[]) => void
+  session: CallSession,
+  callback: (members: CallMember[]) => void
 ): void => {
   useEffect(() => {
-    const handleMembershipsChange: MatrixRTCSessionEventHandlerMap[MatrixRTCSessionEvent.MembershipsChanged] =
-      (oldestMembership, newMemberships) => {
-        callback(newMemberships);
-      };
-
-    session.on(MatrixRTCSessionEvent.MembershipsChanged, handleMembershipsChange);
+    const unsub = session.members.subscribe(callback);
     return () => {
-      session.removeListener(MatrixRTCSessionEvent.MembershipsChanged, handleMembershipsChange);
+      unsub();
     };
   }, [session, callback]);
 };
 
-export const useCallMembers = (session: MatrixRTCSession): CallMembership[] => {
-  const [memberships, setMemberships] = useState<CallMembership[]>(session.memberships);
+export const useCallMembers = (session: CallSession): CallMember[] => {
+  const members = useObservableValue(session.members);
 
-  useCallMembersChange(session, setMemberships);
-
-  return memberships;
+  return members;
 };
diff --git a/src/app/hooks/useCallEmbed.ts b/src/app/hooks/useCallEmbed.ts
index af6f47b4..d02fadbe 100644
--- a/src/app/hooks/useCallEmbed.ts
+++ b/src/app/hooks/useCallEmbed.ts
@@ -1,5 +1,4 @@
 import { createContext, RefObject, useCallback, useContext, useEffect, useState } from 'react';
-import { MatrixClient, Room } from 'matrix-js-sdk';
 import { useSetAtom } from 'jotai';
 import {
   CallEmbed,
@@ -7,13 +6,14 @@ import {
   ElementWidgetActions,
   useClientWidgetApiEvent,
 } from '../plugins/call';
-import { useMatrixClient } from './useMatrixClient';
 import { ThemeKind, useTheme } from './useTheme';
 import { callEmbedAtom } from '../state/callEmbed';
 import { useResizeObserver } from './useResizeObserver';
 import { CallControlState } from '../plugins/call/CallControlState';
 import { useCallMembersChange, useCallSession } from './useCall';
 import { CallPreferences } from '../state/callPreferences';
+import { ClientContext } from '../../client/context';
+import { useClient } from './useClient';
 
 const CallEmbedContext = createContext<CallEmbed | undefined>(undefined);
 
@@ -36,42 +36,49 @@ export const useCallEmbedRef = (): RefObject<HTMLDivElement> => {
 };
 
 export const createCallEmbed = (
-  mx: MatrixClient,
-  room: Room,
+  ct: ClientContext,
+  roomId: string,
   dm: boolean,
   themeKind: ElementCallThemeKind,
   container: HTMLElement,
   pref?: CallPreferences
 ): CallEmbed => {
-  const rtcSession = mx.matrixRTC.getRoomSession(room);
-  const ongoing = rtcSession.memberships.length > 0;
+  const callSession = ct.callSessions.getSession(roomId);
+  const ongoing = callSession.members.read.length > 0;
 
   const intent = CallEmbed.getIntent(dm, ongoing, pref?.video);
-  const widget = CallEmbed.getWidget(mx, room, intent, themeKind);
+  const widget = CallEmbed.getWidget(ct, roomId, intent, themeKind);
   const controlState = pref && new CallControlState(pref.microphone, pref.video, pref.sound);
 
-  const embed = new CallEmbed(mx, room, widget, container, controlState);
+  const embed = new CallEmbed(ct, roomId, widget, container, controlState);
 
   return embed;
 };
 
-export const useCallStart = (dm = false) => {
-  const mx = useMatrixClient();
+export const useCallStart = () => {
+  const ct = useClient();
   const theme = useTheme();
   const setCallEmbed = useSetAtom(callEmbedAtom);
   const callEmbedRef = useCallEmbedRef();
 
   const startCall = useCallback(
-    (room: Room, pref?: CallPreferences) => {
+    (roomId: string, pref?: CallPreferences) => {
       const container = callEmbedRef.current;
       if (!container) {
         throw new Error('Failed to start call, No embed container element found!');
       }
-      const callEmbed = createCallEmbed(mx, room, dm, theme.kind, container, pref);
+      const callEmbed = createCallEmbed(
+        ct,
+        roomId,
+        ct.directRooms.read.has(roomId),
+        theme.kind,
+        container,
+        pref
+      );
 
       setCallEmbed(callEmbed);
     },
-    [mx, dm, theme, setCallEmbed, callEmbedRef]
+    [ct, theme, setCallEmbed, callEmbedRef]
   );
 
   return startCall;
@@ -103,7 +110,7 @@ export const useCallHangupEvent = (embed: CallEmbed, callback: () => void) => {
 };
 
 export const useCallMemberSoundSync = (embed: CallEmbed) => {
-  const callSession = useCallSession(embed.room);
+  const callSession = useCallSession(embed.roomId);
   useCallMembersChange(
     callSession,
     useCallback(() => embed.control.applySound(), [embed])
diff --git a/src/app/hooks/useCallSpeakers.ts b/src/app/hooks/useCallSpeakers.ts
index 7f720074..a26dfbf3 100644
--- a/src/app/hooks/useCallSpeakers.ts
+++ b/src/app/hooks/useCallSpeakers.ts
@@ -7,7 +7,7 @@ import { useCallJoined } from './useCallEmbed';
 
 export const useCallSpeakers = (callEmbed: CallEmbed): Set<string> => {
   const [speakers, setSpeakers] = useState(new Set<string>());
-  const callSession = useCallSession(callEmbed.room);
+  const callSession = useCallSession(callEmbed.roomId);
   const callMembers = useCallMembers(callSession);
   const joined = useCallJoined(callEmbed);
 
diff --git a/src/app/hooks/useEnsureRoomEncryptionSession.ts b/src/app/hooks/useEnsureRoomEncryptionSession.ts
new file mode 100644
index 00000000..bace85fb
--- /dev/null
+++ b/src/app/hooks/useEnsureRoomEncryptionSession.ts
@@ -0,0 +1,83 @@
+import { useCallback } from 'react';
+import {
+  EncryptionSettings,
+  HistoryVisibility,
+  RoomEncryptionSettings,
+} from 'neurone/lib/crypto/machine';
+import { ObjectReader } from 'neurone/lib/utils';
+import { useClient } from './useClient';
+import { useRoom } from './useRoom';
+import { ClientContext } from '../../client/context';
+import { loadPendingMembers } from './usePendingMembers';
+
+export function buildEncryptionSettings(
+  historyVisibility: HistoryVisibility,
+  roomSettings: RoomEncryptionSettings | undefined,
+  encryptionEventContent: object | undefined
+): EncryptionSettings {
+  const rotationPeriodMs = ObjectReader.number(encryptionEventContent, 'rotation_period_ms');
+
+  const rotationPeriodMsgs = ObjectReader.number(encryptionEventContent, 'rotation_period_msgs');
+
+  const rotationMilliseconds = roomSettings?.sessionRotationPeriodMs ?? rotationPeriodMs;
+
+  return {
+    algorithm: 'm.megolm.v1.aes-sha2',
+    historyVisibility,
+    encryptStateEvents: roomSettings?.encryptStateEvents,
+    // EncryptionSettings expects microseconds.
+    rotationPeriod: rotationMilliseconds === undefined ? undefined : rotationMilliseconds * 1_000,
+    rotationPeriodMessages: roomSettings?.sessionRotationPeriodMessages ?? rotationPeriodMsgs,
+    sharingStrategy: roomSettings?.onlyAllowTrustedDevices ? 'only-trusted-devices' : 'all-devices',
+  };
+}
+
+export const ensureEncryptionSession = async (ct: ClientContext, roomId: string) => {
+  if (!ct.encryptedRooms.read.has(roomId)) {
+    return;
+  }
+  const historyVisibility = ct.roomToHistoryVisibility.read.get(roomId) ?? 'shared';
+  const encryptForInvited = historyVisibility !== 'joined';
+
+  const memberObjs = await ct.storage.joinRoomMember.read.queryIndex('roomId', roomId);
+
+  if (ct.pendingMemberRooms.read.includes(roomId)) {
+    await loadPendingMembers(ct, roomId);
+  }
+
+  const targetMembers = memberObjs
+    .filter((memberObj) => {
+      const membership = ObjectReader.string(memberObj.event.content, 'membership');
+      return membership === 'join' || (membership === 'invite' && encryptForInvited);
+    })
+    .map((memberObj) => memberObj.userId);
+
+  if (!targetMembers) return;
+
+  await ct.machine.userTracker.track(targetMembers);
+  await ct.machine.outgoingRequests.processAll();
+  await ct.machine.outgoingRequests.claimKeys(targetMembers);
+
+  const roomSettings = await ct.machine.roomEncryption.getSettings(roomId);
+  const encryptionEventContent = ct.state.join.encryption.read.find((ev) => ev.roomId === roomId)
+    ?.event.content;
+
+  const encryptionSettings: EncryptionSettings = buildEncryptionSettings(
+    historyVisibility,
+    roomSettings,
+    encryptionEventContent
+  );
+
+  await ct.machine.roomKeys.shareRoomKey(roomId, targetMembers, encryptionSettings);
+};
+
+export const useEnsureRoomEncryptionSession = () => {
+  const ct = useClient();
+  const roomId = useRoom();
+
+  const prepareEncryptionSession = useCallback(async () => {
+    await ensureEncryptionSession(ct, roomId);
+  }, [ct, roomId]);
+
+  return prepareEncryptionSession;
+};
diff --git a/src/app/hooks/useGetRoom.ts b/src/app/hooks/useGetRoom.ts
deleted file mode 100644
index 05fcf8d3..00000000
--- a/src/app/hooks/useGetRoom.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Room } from 'matrix-js-sdk';
-import { useAtomValue } from 'jotai';
-import { useCallback, useMemo } from 'react';
-import { allRoomsAtom } from '../state/room-list/roomList';
-import { useMatrixClient } from './useMatrixClient';
-
-export const useAllJoinedRoomsSet = () => {
-  const allRooms = useAtomValue(allRoomsAtom);
-  const allJoinedRooms = useMemo(() => new Set(allRooms), [allRooms]);
-
-  return allJoinedRooms;
-};
-
-export type GetRoomCallback = (roomId: string) => Room | undefined;
-export const useGetRoom = (rooms: Set<string>): GetRoomCallback => {
-  const mx = useMatrixClient();
-
-  const getRoom: GetRoomCallback = useCallback(
-    (rId: string) => {
-      if (rooms.has(rId)) {
-        return mx.getRoom(rId) ?? undefined;
-      }
-      return undefined;
-    },
-    [mx, rooms]
-  );
-
-  return getRoom;
-};
diff --git a/src/app/hooks/useImagePackRooms.ts b/src/app/hooks/useImagePackRooms.ts
index 25636589..9e650efc 100644
--- a/src/app/hooks/useImagePackRooms.ts
+++ b/src/app/hooks/useImagePackRooms.ts
@@ -1,7 +1,7 @@
 import { useAtomValue } from 'jotai';
 import { useMemo } from 'react';
 import { getAllParents } from '../utils/room';
-import { useAllJoinedRoomsSet } from './useGetRoom';
+import { useAllJoinedRoomsSet } from './useAllJoinedRoomsSet';
 import { roomToParentsAtom } from '../state/room/roomToParents';
 
 export const useImagePackRooms = (roomId: string): string[] => {
diff --git a/src/app/hooks/usePendingMembers.ts b/src/app/hooks/usePendingMembers.ts
index d533c8c9..883d112f 100644
--- a/src/app/hooks/usePendingMembers.ts
+++ b/src/app/hooks/usePendingMembers.ts
@@ -1,4 +1,4 @@
-import { useCallback, useEffect, useMemo } from 'react';
+import { useEffect, useMemo } from 'react';
 import { getMembers, GetMembersOK } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { parseMatrixResp, printMatrixError } from 'neurone/lib/matrix-request';
 import { StateEventWithoutRoomId } from 'neurone/lib/api/types';
@@ -9,7 +9,7 @@ import {
   JoinRoomMemberObject,
   sessionValue,
 } from '../../client/storage/collections';
-import { useAlive } from './useAlive';
+import { ClientContext } from '../../client/context';
 
 export const usePendingMembers = (roomId: string): boolean => {
   const ct = useClient();
@@ -22,53 +22,51 @@ export const usePendingMembers = (roomId: string): boolean => {
   return hasPendingMembers;
 };
 
+export const loadPendingMembers = async (
+  ct: ClientContext,
+  roomId: string,
+  signal?: AbortSignal
+) => {
+  const response = await ct.requestAuthJSON(getMembers({ pathParams: { roomId } }), signal);
+  const [err, result] = await parseMatrixResp<GetMembersOK>(response);
+  if (err) {
+    throw new Error(printMatrixError(err));
+  }
+
+  const memberObjects: JoinRoomMemberObject[] =
+    result?.chunk.map((event) => {
+      const eventWithoutRoomId: StateEventWithoutRoomId = event;
+      if ('room_id' in eventWithoutRoomId) delete eventWithoutRoomId.room_id;
+
+      const obj: JoinRoomMemberObject = {
+        id: getJoinRoomMemberId(roomId, eventWithoutRoomId.state_key),
+        roomId,
+        userId: eventWithoutRoomId.state_key,
+        event: eventWithoutRoomId,
+      };
+
+      return obj;
+    }) ?? [];
+
+  await ct.storage.joinRoomMember.write.putMultiple(memberObjects);
+  await ct.storage.sessionValue.write.put({
+    id: sessionValue.pendingMemberRooms.id,
+    value: ct.pendingMemberRooms.read.filter((rId) => rId !== roomId),
+  });
+};
+
 export const usePendingMemberLoader = (roomId: string, pending: boolean) => {
   const ct = useClient();
-  const alive = useAlive();
-
-  const loadMembers = useCallback(
-    async (signal?: AbortSignal) => {
-      const response = await ct.requestAuthJSON(getMembers({ pathParams: { roomId } }), signal);
-      const [err, result] = await parseMatrixResp<GetMembersOK>(response);
-      if (err) {
-        throw new Error(printMatrixError(err));
-      }
-
-      const memberObjects: JoinRoomMemberObject[] =
-        result?.chunk.map((event) => {
-          const eventWithoutRoomId: StateEventWithoutRoomId = event;
-          if ('room_id' in eventWithoutRoomId) delete eventWithoutRoomId.room_id;
-
-          const obj: JoinRoomMemberObject = {
-            id: getJoinRoomMemberId(roomId, eventWithoutRoomId.state_key),
-            roomId,
-            userId: eventWithoutRoomId.state_key,
-            event: eventWithoutRoomId,
-          };
-
-          return obj;
-        }) ?? [];
-
-      if (alive()) {
-        await ct.storage.joinRoomMember.write.putMultiple(memberObjects);
-        await ct.storage.sessionValue.write.put({
-          id: sessionValue.pendingMemberRooms.id,
-          value: ct.pendingMemberRooms.read.filter((rId) => rId !== roomId),
-        });
-      }
-    },
-    [ct, roomId, alive]
-  );
 
   useEffect(() => {
     const abortController = new AbortController();
 
     if (pending) {
-      loadMembers(abortController.signal);
+      loadPendingMembers(ct, roomId, abortController.signal);
     }
 
     return () => {
       abortController.abort();
     };
-  }, [pending, loadMembers]);
+  }, [ct, pending, roomId]);
 };
diff --git a/src/app/hooks/usePowerLevels.ts b/src/app/hooks/usePowerLevels.ts
index ef549c1f..71a334be 100644
--- a/src/app/hooks/usePowerLevels.ts
+++ b/src/app/hooks/usePowerLevels.ts
@@ -1,4 +1,3 @@
-import { MatrixEvent } from 'matrix-js-sdk';
 import { createContext, useCallback, useContext, useMemo } from 'react';
 import produce from 'immer';
 import { PendingObservableResult } from 'neurone/lib/utils/observable';
@@ -57,14 +56,6 @@ const fillMissingPowers = (powerLevels: IPowerLevels): IPowerLevels =>
     return draftPl;
   });
 
-export const getPowersLevelFromMatrixEvent = (mEvent?: MatrixEvent): IPowerLevels => {
-  const plContent = mEvent?.getContent<IPowerLevels>();
-
-  const powerLevels = !plContent ? DEFAULT_POWER_LEVELS : fillMissingPowers(plContent);
-
-  return powerLevels;
-};
-
 export function usePowerLevelsState(
   roomId: string
 ): PendingObservableResult<JoinRoomStateObject | undefined> {
diff --git a/src/app/hooks/useSpaceHierarchy.ts b/src/app/hooks/useSpaceHierarchy.ts
index 61c659d3..c4e3866b 100644
--- a/src/app/hooks/useSpaceHierarchy.ts
+++ b/src/app/hooks/useSpaceHierarchy.ts
@@ -10,7 +10,7 @@ import { SortFunc, byOrderKey, byTsOldToNew, factoryRoomIdByActivity } from '../
 import { ErrorCode } from '../cs-errorcode';
 import { useObservableValue } from './useObservableValue';
 import { useClient } from './useClient';
-import { useAllJoinedRoomsSet } from './useGetRoom';
+import { useAllJoinedRoomsSet } from './useAllJoinedRoomsSet';
 import { spaceRoomsAtom } from '../state/spaceRooms';
 import { rError } from '../../client/reader';
 import { useRoomsLatestEvent } from './useRoomsLatestEvent';
diff --git a/src/app/pages/Router.tsx b/src/app/pages/Router.tsx
index 72a34755..865cff08 100644
--- a/src/app/pages/Router.tsx
+++ b/src/app/pages/Router.tsx
@@ -83,15 +83,18 @@ export const createRouter = (clientConfig: ClientConfig, screenSize: ScreenSize)
                   <ClientRoomsNotificationPreferences>
                     <ClientBindAtoms />
                     <ClientNonUIFeatures />
-                    <ClientLayout
-                      nav={
-                        <MobileFriendlyClientNav>
-                          <SidebarNav />
-                        </MobileFriendlyClientNav>
-                      }
-                    >
-                      <Outlet />
-                    </ClientLayout>
+                    <CallEmbedProvider>
+                      <ClientLayout
+                        nav={
+                          <MobileFriendlyClientNav>
+                            <SidebarNav />
+                          </MobileFriendlyClientNav>
+                        }
+                      >
+                        <Outlet />
+                      </ClientLayout>
+                      <CallStatusRenderer />
+                    </CallEmbedProvider>
                     <SearchModalRenderer />
                     <UserRoomProfileRenderer />
                     <CreateRoomModalRenderer />
diff --git a/src/app/pages/client/space/Space.tsx b/src/app/pages/client/space/Space.tsx
index 2cb02bcf..d5d3c431 100644
--- a/src/app/pages/client/space/Space.tsx
+++ b/src/app/pages/client/space/Space.tsx
@@ -89,7 +89,7 @@ import {
   useRoomsTotalNotifications,
 } from '../../../state/hooks/roomNotifications';
 import { getJoinRoomStateId } from '../../../../client/storage/collections';
-import { useAllJoinedRoomsSet } from '../../../hooks/useGetRoom';
+import { useAllJoinedRoomsSet } from '../../../hooks/useAllJoinedRoomsSet';
 import { unreadRoomsAtom } from '../../../state/room/roomToUnread';
 import { useRoomsUnread } from '../../../state/hooks/unread';
 import { RoomAccessIndicator } from '../../../components/RoomAccessIndicator';
diff --git a/src/app/plugins/call/CallControl.ts b/src/app/plugins/call/CallControl.ts
index 62f6966a..211280f4 100644
--- a/src/app/plugins/call/CallControl.ts
+++ b/src/app/plugins/call/CallControl.ts
@@ -1,5 +1,6 @@
 import { ClientWidgetApi } from 'matrix-widget-api';
-import EventEmitter from 'events';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { Disposable } from 'neurone/lib/utils/disposable';
 import { CallControlState } from './CallControlState';
 import { ElementMediaStateDetail, ElementMediaStatePayload, ElementWidgetActions } from './types';
 
@@ -7,16 +8,18 @@ export enum CallControlEvent {
   StateUpdate = 'state_update',
 }
 
-export class CallControl extends EventEmitter implements CallControlState {
-  private state: CallControlState;
+export class CallControl implements CallControlState, Disposable {
+  private readonly publishKey = crypto.randomUUID();
 
-  private call: ClientWidgetApi;
+  public readonly state: ObservableValue<CallControlState>;
 
-  private iframe: HTMLIFrameElement;
+  private readonly call: ClientWidgetApi;
 
-  private bodyMutationObserver: MutationObserver;
+  private readonly iframe: HTMLIFrameElement;
 
-  private controlMutationObserver: MutationObserver;
+  private readonly bodyMutationObserver: MutationObserver;
+
+  private readonly controlMutationObserver: MutationObserver;
 
   private mediaStatePromiseResolver: undefined | (() => void);
 
@@ -72,9 +75,7 @@ export class CallControl extends EventEmitter implements CallControlState {
   }
 
   constructor(state: CallControlState, call: ClientWidgetApi, iframe: HTMLIFrameElement) {
-    super();
-
-    this.state = state;
+    this.state = new ObservableValue(state, this.publishKey);
     this.call = call;
     this.iframe = iframe;
 
@@ -82,28 +83,24 @@ export class CallControl extends EventEmitter implements CallControlState {
     this.controlMutationObserver = new MutationObserver(this.onControlMutation.bind(this));
   }
 
-  public getState(): CallControlState {
-    return this.state;
-  }
-
   public get microphone(): boolean {
-    return this.state.microphone;
+    return this.state.read.microphone;
   }
 
   public get video(): boolean {
-    return this.state.video;
+    return this.state.read.video;
   }
 
   public get sound(): boolean {
-    return this.state.sound;
+    return this.state.read.sound;
   }
 
   public get screenshare(): boolean {
-    return this.state.screenshare;
+    return this.state.read.screenshare;
   }
 
   public get spotlight(): boolean {
-    return this.state.spotlight;
+    return this.state.read.spotlight;
   }
 
   public async applyState() {
@@ -112,7 +109,6 @@ export class CallControl extends EventEmitter implements CallControlState {
       video_enabled: this.video,
     });
     this.setSound(this.sound);
-    this.emitStateUpdate();
   }
 
   public startObserving() {
@@ -124,10 +120,18 @@ export class CallControl extends EventEmitter implements CallControlState {
     });
     this.onBodyMutation();
   }
-  
+
   private onBodyMutation() {
     if (!this.document) return;
 
+    const style = this.document.createElement('style');
+    style.textContent = `
+      body::before {
+        display: none !important;
+      }
+    `;
+    this.document.head.appendChild(style);
+
     this.document.body.style.setProperty('background', 'none', 'important');
 
     const controls = this.leaveButton?.parentElement?.parentElement;
@@ -165,7 +169,7 @@ export class CallControl extends EventEmitter implements CallControlState {
 
   private async setMediaState(state: ElementMediaStatePayload) {
     const data = await this.call.transport.send(ElementWidgetActions.DeviceMute, state);
-    return new Promise<typeof data>(resolve => {
+    return new Promise<typeof data>((resolve) => {
       if (this.mediaStatePromiseResolver) {
         this.mediaStatePromiseResolver();
       }
@@ -195,8 +199,7 @@ export class CallControl extends EventEmitter implements CallControlState {
       this.spotlight
     );
 
-    this.state = state;
-    this.emitStateUpdate();
+    this.state.publish(this.publishKey, state);
 
     if (this.microphone && !this.sound) {
       this.toggleSound();
@@ -212,14 +215,10 @@ export class CallControl extends EventEmitter implements CallControlState {
     const screenshare: boolean = this.screenshareButton?.getAttribute('data-kind') === 'primary';
     const spotlight: boolean = this.spotlightButton?.checked ?? false;
 
-    this.state = new CallControlState(
-      this.microphone,
-      this.video,
-      this.sound,
-      screenshare,
-      spotlight
+    this.state.publish(
+      this.publishKey,
+      new CallControlState(this.microphone, this.video, this.sound, screenshare, spotlight)
     );
-    this.emitStateUpdate();
   }
 
   public toggleMicrophone() {
@@ -250,8 +249,7 @@ export class CallControl extends EventEmitter implements CallControlState {
       this.screenshare,
       this.spotlight
     );
-    this.state = state;
-    this.emitStateUpdate();
+    this.state.publish(this.publishKey, state);
 
     if (!this.sound && this.microphone) {
       this.toggleMicrophone();
@@ -282,8 +280,4 @@ export class CallControl extends EventEmitter implements CallControlState {
     this.bodyMutationObserver.disconnect();
     this.controlMutationObserver.disconnect();
   }
-
-  private emitStateUpdate() {
-    this.emit(CallControlEvent.StateUpdate);
-  }
 }
diff --git a/src/app/plugins/call/CallEmbed.ts b/src/app/plugins/call/CallEmbed.ts
index 8d03bc8a..46c048d9 100644
--- a/src/app/plugins/call/CallEmbed.ts
+++ b/src/app/plugins/call/CallEmbed.ts
@@ -1,20 +1,18 @@
-import {
-  ClientEvent,
-  KnownMembership,
-  MatrixClient,
-  MatrixEvent,
-  MatrixEventEvent,
-  Room,
-  RoomStateEvent,
-} from 'matrix-js-sdk';
 import {
   ClientWidgetApi,
-  IRoomEvent,
   IWidget,
   Widget,
   WidgetApiToWidgetAction,
   WidgetDriver,
 } from 'matrix-widget-api';
+import { ObjectReader } from 'neurone/lib/utils';
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import {
+  ProcessedToDeviceEvent,
+  ToDeviceDecrypted,
+  ToDeviceUTD,
+} from 'neurone/lib/crypto/machine/events';
+import { ClientEventWithoutRoomId, ToDeviceEvent } from 'neurone/lib/api/types';
 import { CallWidgetDriver } from './CallWidgetDriver';
 import { trimTrailingSlash } from '../../utils/common';
 import {
@@ -25,27 +23,25 @@ import {
 } from './types';
 import { CallControl } from './CallControl';
 import { CallControlState } from './CallControlState';
+import { ClientContext } from '../../../client/context';
+import { RoomType } from '../../../types/matrix/room';
 
-export class CallEmbed {
-  private mx: MatrixClient;
+export class CallEmbed implements Disposable {
+  private ct: ClientContext;
+
+  public readonly roomId: string;
 
   public readonly call: ClientWidgetApi;
 
   public readonly iframe: HTMLIFrameElement;
 
-  public readonly room: Room;
-
   public joined = false;
 
   public readonly control: CallControl;
 
   private readonly container: HTMLElement;
 
-  private readUpToMap: { [roomId: string]: string } = {}; // room ID to event ID
-
-  private eventsToFeed = new WeakSet<MatrixEvent>();
-
-  private readonly disposables: Array<() => void> = [];
+  private readonly disposer = new Disposer();
 
   static getIntent(dm: boolean, ongoing: boolean, video?: boolean): ElementCallIntent {
     if (dm && ongoing) {
@@ -80,21 +76,21 @@ export class CallEmbed {
   }
 
   static getWidget(
-    mx: MatrixClient,
-    room: Room,
+    ct: ClientContext,
+    roomId: string,
     intent: ElementCallIntent,
     themeKind: ElementCallThemeKind
   ): Widget {
-    const userId = mx.getSafeUserId();
-    const deviceId = mx.getDeviceId() ?? '';
+    const { userId, deviceId, baseUrl } = ct.session;
+
     const clientOrigin = window.location.origin;
     const widgetId = 'call-embed';
 
     const params = new URLSearchParams({
       widgetId,
       parentUrl: clientOrigin,
-      baseUrl: mx.baseUrl,
-      roomId: room.roomId,
+      baseUrl,
+      roomId,
       userId,
       deviceId,
       intent,
@@ -102,13 +98,14 @@ export class CallEmbed {
       skipLobby: 'true',
       confineToRoom: 'true',
       appPrompt: 'false',
-      perParticipantE2EE: room.hasEncryptionStateEvent().toString(),
       lang: 'en-EN',
       theme: themeKind,
       header: 'none',
     });
 
-    if (!room.isCallRoom() && CallEmbed.startingCall(intent)) {
+    const createEvent = ct.state.join.create.read.find((evt) => evt.roomId === roomId)?.event;
+    const roomType = ObjectReader.string(createEvent?.content, 'type');
+    if (roomType === RoomType.Call && CallEmbed.startingCall(intent)) {
       params.append('sendNotificationType', CallEmbed.dmCall(intent) ? 'ring' : 'notification');
     }
 
@@ -150,23 +147,21 @@ export class CallEmbed {
   }
 
   constructor(
-    mx: MatrixClient,
-    room: Room,
+    ct: ClientContext,
+    roomId: string,
     widget: Widget,
     container: HTMLElement,
     initialControlState?: CallControlState
   ) {
-    const iframe = CallEmbed.getIframe(
-      widget.getCompleteUrl({ currentUserId: mx.getSafeUserId() })
-    );
+    const iframe = CallEmbed.getIframe(widget.getCompleteUrl({ currentUserId: ct.session.userId }));
     container.append(iframe);
 
-    const callWidgetDriver: WidgetDriver = new CallWidgetDriver(mx, room.roomId);
+    const callWidgetDriver: WidgetDriver = new CallWidgetDriver(ct, roomId);
     const call: ClientWidgetApi = new ClientWidgetApi(widget, iframe, callWidgetDriver);
 
-    this.mx = mx;
+    this.ct = ct;
     this.call = call;
-    this.room = room;
+    this.roomId = roomId;
     this.iframe = iframe;
     this.container = container;
 
@@ -178,7 +173,7 @@ export class CallEmbed {
     };
 
     let initialMediaEvent = true;
-    this.disposables.push(
+    this.disposer.collect(
       this.listenAction<ElementMediaStateDetail>(ElementWidgetActions.DeviceMute, (evt) => {
         if (initialMediaEvent) {
           initialMediaEvent = false;
@@ -192,10 +187,6 @@ export class CallEmbed {
     this.start();
   }
 
-  get roomId(): string {
-    return this.room.roomId;
-  }
-
   get document(): Document | undefined {
     return this.iframe.contentDocument ?? this.iframe.contentWindow?.document;
   }
@@ -229,180 +220,68 @@ export class CallEmbed {
   private start() {
     // Room widgets get locked to the room they were added in
     this.call.setViewedRoomId(this.roomId);
-    this.disposables.push(
+    this.disposer.collect(
       this.listenAction(ElementWidgetActions.JoinCall, this.onCallJoined.bind(this))
     );
 
-    // Populate the map of "read up to" events for this widget with the current event in every room.
-    // This is a bit inefficient, but should be okay. We do this for all rooms in case the widget
-    // requests timeline capabilities in other rooms down the road. It's just easier to manage here.
-    this.mx.getRooms().forEach((room) => {
-      // Timelines are most recent last
-      const events = room.getLiveTimeline()?.getEvents() || [];
-      const roomEvent = events[events.length - 1];
-      if (!roomEvent) return; // force later code to think the room is fresh
-      this.readUpToMap[room.roomId] = roomEvent.getId()!;
-    });
+    this.disposer.collect(
+      this.ct.toDeviceEvents.subscribe((toDeviceEvents) => {
+        this.handleToDeviceEvents(toDeviceEvents);
+      }),
+      this.ct.sync.observable.subscribe((syncValue) => {
+        const [, data] = syncValue ?? [];
+        if (!data) return;
 
-    // Attach listeners for feeding events - the underlying widget classes handle permissions for us
-    this.mx.on(ClientEvent.Event, this.onEvent.bind(this));
-    this.mx.on(MatrixEventEvent.Decrypted, this.onEventDecrypted.bind(this));
-    this.mx.on(RoomStateEvent.Events, this.onStateUpdate.bind(this));
-    this.mx.on(ClientEvent.ToDeviceEvent, this.onToDeviceEvent.bind(this));
+        const roomData = data.rooms?.join?.[this.roomId];
+        const events = roomData?.timeline?.events;
+
+        if (!events) return;
+        this.handleTimelineEvents(events);
+      })
+    );
   }
 
-  /**
-   * Stops the widget messaging for if it is started. Skips stopping if it is an active
-   * widget.
-   * @param opts
-   */
-  public dispose(): void {
-    this.disposables.forEach((disposable) => {
-      disposable();
+  private handleToDeviceEvents(toDeviceEvents: ProcessedToDeviceEvent[]): void {
+    toDeviceEvents.forEach((toDevice) => {
+      const encrypted = toDevice instanceof ToDeviceDecrypted || toDevice instanceof ToDeviceUTD;
+      this.call.feedToDevice(toDevice.event as ToDeviceEvent<Record<string, unknown>>, encrypted);
     });
-    this.call.stop();
-    this.container.removeChild(this.iframe);
-    this.control.dispose();
+  }
 
-    this.mx.off(ClientEvent.Event, this.onEvent.bind(this));
-    this.mx.off(MatrixEventEvent.Decrypted, this.onEventDecrypted.bind(this));
-    this.mx.off(RoomStateEvent.Events, this.onStateUpdate.bind(this));
-    this.mx.off(ClientEvent.ToDeviceEvent, this.onToDeviceEvent.bind(this));
+  private handleTimelineEvents(events: ClientEventWithoutRoomId[]): void {
+    events.forEach(async (event) => {
+      if (this.ct.encryptedRooms.read.has(this.roomId)) {
+        const decryptedEvent = await this.ct.decryption.tryDecryptEvent(this.roomId, event);
+        this.feedEvent(decryptedEvent);
+        return;
+      }
+      this.feedEvent(event);
+    });
+  }
 
-    // Clear internal state
-    this.readUpToMap = {};
-    this.eventsToFeed = new WeakSet<MatrixEvent>();
+  private feedEvent(event: ClientEventWithoutRoomId): void {
+    if ('state_key' in event) {
+      this.call.feedStateUpdate({
+        ...event,
+        room_id: this.roomId,
+        content: event.content as Record<string, unknown>,
+        unsigned: event.unsigned as Record<string, unknown>,
+      });
+      return;
+    }
+
+    this.call.feedEvent({
+      ...event,
+      room_id: this.roomId,
+      content: event.content as Record<string, unknown>,
+      unsigned: event.unsigned as Record<string, unknown>,
+    });
   }
 
   private onCallJoined(): void {
     this.joined = true;
   }
 
-  private onEvent(ev: MatrixEvent): void {
-    this.mx.decryptEventIfNeeded(ev);
-    this.feedEvent(ev);
-  }
-
-  private onEventDecrypted(ev: MatrixEvent): void {
-    this.feedEvent(ev);
-  }
-
-  private onStateUpdate(ev: MatrixEvent): void {
-    if (this.call === null) return;
-    const raw = ev.getEffectiveEvent();
-    this.call.feedStateUpdate(raw as IRoomEvent).catch((e) => {
-      console.error('Error sending state update to widget: ', e);
-    });
-  }
-
-  private async onToDeviceEvent(ev: MatrixEvent): Promise<void> {
-    await this.mx.decryptEventIfNeeded(ev);
-    if (ev.isDecryptionFailure()) return;
-    await this.call?.feedToDevice(ev.getEffectiveEvent() as IRoomEvent, ev.isEncrypted());
-  }
-
-  /**
-   * Determines whether the event has a relation to an unknown parent.
-   */
-  private relatesToUnknown(ev: MatrixEvent): boolean {
-    // Replies to unknown events don't count
-    if (!ev.relationEventId || ev.replyEventId) return false;
-    const room = this.mx.getRoom(ev.getRoomId());
-    return room === null || !room.findEventById(ev.relationEventId);
-  }
-
-  /**
-   * Advances the "read up to" marker for a room to a certain event. No-ops if
-   * the event is before the marker.
-   * @returns Whether the "read up to" marker was advanced.
-   */
-  private advanceReadUpToMarker(ev: MatrixEvent): boolean {
-    const evId = ev.getId();
-    if (evId === undefined) return false;
-    const roomId = ev.getRoomId();
-    if (roomId === undefined) return false;
-    const room = this.mx.getRoom(roomId);
-    if (room === null) return false;
-
-    const upToEventId = this.readUpToMap[ev.getRoomId()!];
-    if (!upToEventId) {
-      // There's no marker yet; start it at this event
-      this.readUpToMap[roomId] = evId;
-      return true;
-    }
-
-    // Small optimization for exact match (skip the search)
-    if (upToEventId === evId) return false;
-
-    // Timelines are most recent last, so reverse the order and limit ourselves to 100 events
-    // to avoid overusing the CPU.
-    const timeline = room.getLiveTimeline();
-    const events = [...timeline.getEvents()].reverse().slice(0, 100);
-    function isRelevantTimelineEvent(timelineEvent: MatrixEvent): boolean {
-      return timelineEvent.getId() === upToEventId || timelineEvent.getId() === ev.getId();
-    }
-    const possibleMarkerEv = events.find(isRelevantTimelineEvent);
-    if (possibleMarkerEv?.getId() === upToEventId) {
-      // The event must be somewhere before the "read up to" marker
-      return false;
-    }
-    if (possibleMarkerEv?.getId() === ev.getId()) {
-      // The event is after the marker; advance it
-      this.readUpToMap[roomId] = evId;
-      return true;
-    }
-
-    // We can't say for sure whether the widget has seen the event; let's
-    // just assume that it has
-    return false;
-  }
-
-  /**
-   * Determines whether the event comes from a room that we've been invited to
-   * (in which case we likely don't have the full timeline).
-   */
-  private isFromInvite(ev: MatrixEvent): boolean {
-    const room = this.mx.getRoom(ev.getRoomId());
-    return room?.getMyMembership() === KnownMembership.Invite;
-  }
-
-  private feedEvent(ev: MatrixEvent): void {
-    if (this.call === null) return;
-    if (
-      // If we had decided earlier to feed this event to the widget, but
-      // it just wasn't ready, give it another try
-      this.eventsToFeed.delete(ev) ||
-      // Skip marker timeline check for events with relations to unknown parent because these
-      // events are not added to the timeline here and will be ignored otherwise:
-      // https://github.com/matrix-org/matrix-js-sdk/blob/d3dfcd924201d71b434af3d77343b5229b6ed75e/src/models/room.ts#L2207-L2213
-      this.relatesToUnknown(ev) ||
-      // Skip marker timeline check for rooms where membership is
-      // 'invite', otherwise the membership event from the invitation room
-      // will advance the marker and new state events will not be
-      // forwarded to the widget.
-      this.isFromInvite(ev) ||
-      // Check whether this event would be before or after our "read up to" marker. If it's
-      // before, or we can't decide, then we assume the widget will have already seen the event.
-      // If the event is after, or we don't have a marker for the room,
-      // then the marker will advance and we'll send it through.
-      // This approach of "read up to" prevents widgets receiving decryption spam from startup or
-      // receiving ancient events from backfill and such.
-      this.advanceReadUpToMarker(ev)
-    ) {
-      // If the event is still being decrypted, remember that we want to
-      // feed it to the widget (even if not strictly in the order given by
-      // the timeline) and get back to it later
-      if (ev.isBeingDecrypted() || ev.isDecryptionFailure()) {
-        this.eventsToFeed.add(ev);
-      } else {
-        const raw = ev.getEffectiveEvent();
-        this.call.feedEvent(raw as IRoomEvent).catch((e) => {
-          console.error('Error sending event to widget: ', e);
-        });
-      }
-    }
-  }
-
   public listenAction<T>(type: string, callback: (event: CustomEvent<T>) => void) {
     return this.listenEvent(`action:${type}`, callback);
   }
@@ -413,4 +292,16 @@ export class CallEmbed {
       this.call.off(type, callback);
     };
   }
+
+  /**
+   * Stops the widget messaging for if it is started. Skips stopping if it is an active
+   * widget.
+   * @param opts
+   */
+  public dispose(): void {
+    this.disposer.run();
+    this.call.stop();
+    this.container.removeChild(this.iframe);
+    this.control.dispose();
+  }
 }
diff --git a/src/app/plugins/call/CallWidgetDriver.ts b/src/app/plugins/call/CallWidgetDriver.ts
index d21eaa7b..8938b493 100644
--- a/src/app/plugins/call/CallWidgetDriver.ts
+++ b/src/app/plugins/call/CallWidgetDriver.ts
@@ -11,34 +11,75 @@ import {
   OpenIDRequestState,
   SimpleObservable,
   IOpenIDUpdate,
+  IRoomAccountData,
+  IRtcTransportsResult,
+  IRtcLivekitGetTokenFromWidgetRequestData,
+  IRtcLivekitGetTokenFromWidgetResponseData,
+  IRtcLivekitDelegateDelayedLeaveFromWidgetRequestData,
+  IRtcLivekitDelegateDelayedLeaveFromWidgetResponseData,
 } from 'matrix-widget-api';
 import {
-  EventType,
-  type IContent,
-  MatrixError,
-  type MatrixEvent,
-  Direction,
-  type SendDelayedEventResponse,
-  type StateEvents,
-  type TimelineEvents,
-  MatrixClient,
-} from 'matrix-js-sdk';
+  getMessages,
+  GetMessagesOK,
+  putRedact,
+  PutRedactOK,
+  putSend,
+  PutSendOK,
+  putStateEvent,
+  PutStateEventOK,
+} from 'neurone/lib/api/matrix/client/v3/rooms';
+import { parseMatrixResp } from 'neurone/lib/matrix-request';
+import { putSendToDevice } from 'neurone/lib/api/matrix/client/v3/sendToDevice';
+import { postUpload, PostUploadOK } from 'neurone/lib/api/matrix/media/v3/upload';
+import { getConfig, GetConfigOK } from 'neurone/lib/api/matrix/client/v1/media';
+import { postSearch, PostSearchOK } from 'neurone/lib/api/matrix/client/v3/userDirectory';
+import {
+  postOpenidRequestToken,
+  PostOpenidRequestTokenOK,
+} from 'neurone/lib/api/matrix/client/v3/user';
+import {
+  getRelations,
+  GetRelationsOK,
+  getRelationsRelType,
+  getRelationsRelTypeEventType,
+} from 'neurone/lib/api/matrix/client/v1/rooms';
+import { QueryRange } from 'neurone/lib/storage/collection';
+import { MatrixEndpointStruct } from 'neurone/lib/api/MatrixEndpoint';
+import { ClientEventWithoutRoomId } from 'neurone/lib/api/types';
 import { getCallCapabilities } from './utils';
-import { downloadMedia, mxcUrlToHttp } from '../../utils/matrix';
+import { downloadMedia, getMxIdServer } from '../../utils/matrix';
+import { ClientContext } from '../../../client/context';
+import { MessageEvent } from '../../../types/matrix/room';
+import { mxcToHttp } from '../../../client/mxcToHttp';
+import { getAuthUploadRequest } from '../../../client/request';
+import { getJoinRoomMemberId, getJoinRoomStateId } from '../../../client/storage/collections';
+import { MAX_UNICODE } from '../../../client/storage';
+import { rContent } from '../../../client/reader';
+import {
+  unstablePostDelayedEvents,
+  unstablePutDelayedEvent,
+  UnstablePutDelayedEventOK,
+} from '../msc4140-delayed-events';
+import { fulfilledPromiseSettledResult } from '../../utils/common';
+import { ensureEncryptionSession } from '../../hooks/useEnsureRoomEncryptionSession';
+import { unstablePutSendSticky } from '../msc4354-sticky-events';
+import { unstableGetTransports, UnstableGetTransportsOK } from '../msc4143-matrixrtc';
+import {
+  unstablePostLivekitDelegateDelayedLeave,
+  unstablePostLivekitGetToken,
+  UnstablePostLivekitGetTokenOK,
+} from '../msc4195-matrixrtc-livekit';
+import { autoDiscovery } from '../../cs-api';
 
 export class CallWidgetDriver extends WidgetDriver {
   private allowedCapabilities: Set<Capability>;
 
-  private readonly mx: MatrixClient;
-
-  public constructor(mx: MatrixClient, private inRoomId: string) {
+  public constructor(private ct: ClientContext, private inRoomId: string) {
     super();
-    this.mx = mx;
 
-    const deviceId = mx.getDeviceId();
-    if (!deviceId) throw new Error('Failed to initialize CallWidgetDriver! Device ID not found.');
+    const { deviceId, userId } = ct.session;
 
-    this.allowedCapabilities = getCallCapabilities(inRoomId, mx.getSafeUserId(), deviceId);
+    this.allowedCapabilities = getCallCapabilities(inRoomId, userId, deviceId);
   }
 
   public async validateCapabilities(requested: Set<Capability>): Promise<Set<Capability>> {
@@ -48,95 +89,217 @@ export class CallWidgetDriver extends WidgetDriver {
 
   public async sendEvent(
     eventType: string,
-    content: IContent,
+    content: object,
     stateKey: string | null = null,
     targetRoomId: string | null = null
   ): Promise<ISendEventDetails> {
     const roomId = targetRoomId || this.inRoomId;
 
-    let r: { event_id: string } | null;
     if (typeof stateKey === 'string') {
-      r = await this.mx.sendStateEvent(
-        roomId,
-        eventType as keyof StateEvents,
-        content as StateEvents[keyof StateEvents],
-        stateKey
-      );
-    } else if (eventType === EventType.RoomRedaction) {
-      // special case: extract the `redacts` property and call redact
-      r = await this.mx.redactEvent(roomId, content.redacts);
-    } else {
-      r = await this.mx.sendEvent(
-        roomId,
-        eventType as keyof TimelineEvents,
-        content as TimelineEvents[keyof TimelineEvents]
+      const resp = await this.ct.requestAuthJSON(
+        putStateEvent({ pathParams: { roomId, eventType, stateKey }, body: content })
       );
+      const [err, result] = await parseMatrixResp<PutStateEventOK>(resp);
+      if (err) throw err;
+
+      return { roomId, eventId: result.event_id };
     }
 
-    return { roomId, eventId: r.event_id };
+    if (
+      eventType === MessageEvent.RoomRedaction &&
+      'redacts' in content &&
+      typeof content.redacts === 'string'
+    ) {
+      // special case: extract the `redacts` property and call redact
+      const resp = await this.ct.requestAuthJSON(
+        putRedact({ pathParams: { roomId, eventId: content.redacts, txnId: this.ct.getTxnId() } })
+      );
+      const [err, result] = await parseMatrixResp<PutRedactOK>(resp);
+      if (err) throw err;
+
+      return { roomId, eventId: result.event_id };
+    }
+
+    let encContent: object | undefined;
+    if (this.ct.encryptedRooms.read.has(roomId)) {
+      await ensureEncryptionSession(this.ct, roomId);
+
+      const encStr = await this.ct.machine.roomEncryption.encryptMessageEvent(
+        roomId,
+        eventType,
+        content
+      );
+      encContent = JSON.parse(encStr);
+    }
+
+    const resp = await this.ct.requestAuthJSON(
+      putSend({
+        pathParams: {
+          roomId,
+          eventType: encContent ? MessageEvent.RoomMessageEncrypted : eventType,
+          txnId: this.ct.getTxnId(),
+        },
+        body: encContent ?? content,
+      })
+    );
+    const [err, result] = await parseMatrixResp<PutSendOK>(resp);
+    if (err) throw err;
+
+    return { roomId, eventId: result.event_id };
+  }
+
+  public async sendStickyEvent(
+    stickyDurationMs: number,
+    eventType: string,
+    content: object,
+    targetRoomId?: string | null
+  ): Promise<ISendEventDetails> {
+    const roomId = targetRoomId || this.inRoomId;
+
+    let encContent: object | undefined;
+    if (this.ct.encryptedRooms.read.has(roomId)) {
+      await ensureEncryptionSession(this.ct, roomId);
+
+      const encStr = await this.ct.machine.roomEncryption.encryptMessageEvent(
+        roomId,
+        eventType,
+        content
+      );
+      encContent = JSON.parse(encStr);
+    }
+
+    const resp = await this.ct.requestAuthJSON(
+      unstablePutSendSticky({
+        pathParams: {
+          roomId,
+          eventType: encContent ? MessageEvent.RoomMessageEncrypted : eventType,
+          txnId: this.ct.getTxnId(),
+        },
+        searchParams: {
+          'org.matrix.msc4354.sticky_duration_ms': stickyDurationMs,
+        },
+        body: encContent ?? content,
+      })
+    );
+    const [err, result] = await parseMatrixResp<PutSendOK>(resp);
+    if (err) throw err;
+
+    return { roomId, eventId: result.event_id };
   }
 
   public async sendDelayedEvent(
-    delay: number | null,
-    parentDelayId: string | null,
+    delay: number,
     eventType: string,
-    content: IContent,
+    content: object,
     stateKey: string | null = null,
     targetRoomId: string | null = null
   ): Promise<ISendDelayedEventDetails> {
     const roomId = targetRoomId || this.inRoomId;
 
-    let delayOpts;
-    if (delay !== null) {
-      delayOpts = {
-        delay,
-        ...(parentDelayId !== null && { parent_delay_id: parentDelayId }),
-      };
-    } else if (parentDelayId !== null) {
-      delayOpts = {
-        parent_delay_id: parentDelayId,
-      };
-    } else {
-      throw new Error('Must provide at least one of delay or parentDelayId');
-    }
+    let encContent: object | undefined;
+    if (typeof stateKey !== 'string' && this.ct.encryptedRooms.read.has(roomId)) {
+      await ensureEncryptionSession(this.ct, roomId);
 
-    let r: SendDelayedEventResponse | null;
-    if (stateKey !== null) {
-      // state event
-      r = await this.mx._unstable_sendDelayedStateEvent(
+      const encStr = await this.ct.machine.roomEncryption.encryptMessageEvent(
         roomId,
-        delayOpts,
-        eventType as keyof StateEvents,
-        content as StateEvents[keyof StateEvents],
-        stateKey
-      );
-    } else {
-      // message event
-      r = await this.mx._unstable_sendDelayedEvent(
-        roomId,
-        delayOpts,
-        null,
-        eventType as keyof TimelineEvents,
-        content as TimelineEvents[keyof TimelineEvents]
+        eventType,
+        content
       );
+      encContent = JSON.parse(encStr);
+    }
+    const resp = await this.ct.requestAuthJSON(
+      unstablePutDelayedEvent({
+        pathParams: {
+          roomId,
+          eventType: encContent ? MessageEvent.RoomMessageEncrypted : eventType,
+          txnId: this.ct.getTxnId(),
+        },
+        body: {
+          delay_ms: delay,
+          state_key: stateKey ?? undefined,
+          content: encContent ?? content,
+        },
+      })
+    );
+
+    const [err, result] = await parseMatrixResp<UnstablePutDelayedEventOK>(resp);
+
+    if (err) {
+      throw err;
     }
 
     return {
       roomId,
-      delayId: r.delay_id,
+      delayId: result.delay_id,
+    };
+  }
+
+  public async sendDelayedStickyEvent(
+    delay: number,
+    stickyDurationMs: number,
+    eventType: string,
+    content: object,
+    targetRoomId?: string | null
+  ): Promise<ISendDelayedEventDetails> {
+    const roomId = targetRoomId || this.inRoomId;
+
+    let encContent: object | undefined;
+    if (this.ct.encryptedRooms.read.has(roomId)) {
+      await ensureEncryptionSession(this.ct, roomId);
+
+      const encStr = await this.ct.machine.roomEncryption.encryptMessageEvent(
+        roomId,
+        eventType,
+        content
+      );
+      encContent = JSON.parse(encStr);
+    }
+    const resp = await this.ct.requestAuthJSON(
+      unstablePutDelayedEvent({
+        pathParams: {
+          roomId,
+          eventType: encContent ? MessageEvent.RoomMessageEncrypted : eventType,
+          txnId: this.ct.getTxnId(),
+        },
+        body: {
+          delay_ms: delay,
+          'org.matrix.msc4354.sticky_duration_ms': stickyDurationMs,
+          content: encContent ?? content,
+        },
+      })
+    );
+
+    const [err, result] = await parseMatrixResp<UnstablePutDelayedEventOK>(resp);
+
+    if (err) {
+      throw err;
+    }
+
+    return {
+      roomId,
+      delayId: result.delay_id,
     };
   }
 
   public async cancelScheduledDelayedEvent(delayId: string): Promise<void> {
-    await this.mx._unstable_cancelScheduledDelayedEvent(delayId);
+    const resp = await this.ct.requestAuthJSON(
+      unstablePostDelayedEvents({ pathParams: { delayId, action: 'cancel' } })
+    );
+    await parseMatrixResp(resp);
   }
 
   public async restartScheduledDelayedEvent(delayId: string): Promise<void> {
-    await this.mx._unstable_restartScheduledDelayedEvent(delayId);
+    const resp = await this.ct.requestAuthJSON(
+      unstablePostDelayedEvents({ pathParams: { delayId, action: 'restart' } })
+    );
+    await parseMatrixResp(resp);
   }
 
   public async sendScheduledDelayedEvent(delayId: string): Promise<void> {
-    await this.mx._unstable_sendScheduledDelayedEvent(delayId);
+    const resp = await this.ct.requestAuthJSON(
+      unstablePostDelayedEvents({ pathParams: { delayId, action: 'send' } })
+    );
+    await parseMatrixResp(resp);
   }
 
   public async sendToDevice(
@@ -144,48 +307,89 @@ export class CallWidgetDriver extends WidgetDriver {
     encrypted: boolean,
     contentMap: { [userId: string]: { [deviceId: string]: object } }
   ): Promise<void> {
+    let messages = contentMap;
+
     if (encrypted) {
-      const crypto = this.mx.getCrypto();
-      if (!crypto) throw new Error('E2EE not enabled');
+      const users = Object.keys(contentMap);
+      await this.ct.machine.outgoingRequests.claimKeys(users);
 
-      // attempt to re-batch these up into a single request
-      const invertedContentMap: { [content: string]: { userId: string; deviceId: string }[] } = {};
+      const encryptedContentMap: { [userId: string]: { [deviceId: string]: object } } = {};
 
-      // eslint-disable-next-line no-restricted-syntax
-      for (const userId of Object.keys(contentMap)) {
-        const userContentMap = contentMap[userId];
-        // eslint-disable-next-line no-restricted-syntax
-        for (const deviceId of Object.keys(userContentMap)) {
-          const content = userContentMap[deviceId];
-          const stringifiedContent = JSON.stringify(content);
-          invertedContentMap[stringifiedContent] = invertedContentMap[stringifiedContent] || [];
-          invertedContentMap[stringifiedContent].push({ userId, deviceId });
-        }
-      }
+      await Promise.allSettled(
+        Object.entries(contentMap).map(async ([userId, userContentMap]) => {
+          encryptedContentMap[userId] = {};
 
-      await Promise.all(
-        Object.entries(invertedContentMap).map(async ([stringifiedContent, recipients]) => {
-          const batch = await crypto.encryptToDeviceMessages(
-            eventType,
-            recipients,
-            JSON.parse(stringifiedContent)
+          await Promise.all(
+            Object.entries(userContentMap).map(async ([deviceId, payload]) => {
+              const userDevice = await this.ct.machine.userTracker.getDevice(userId, deviceId);
+
+              if (!userDevice) {
+                throw new Error(`Device not found: ${userId} / ${deviceId}`);
+              }
+
+              try {
+                const encryptedPayload = userDevice.encryptToDeviceEvent(eventType, payload);
+
+                if (encryptedPayload == null || typeof encryptedPayload !== 'object') {
+                  throw new Error('Encryption returned an invalid payload');
+                }
+
+                encryptedContentMap[userId][deviceId] = encryptedPayload;
+              } catch (error) {
+                const reason = error instanceof Error ? error.message : String(error);
+
+                throw new Error(
+                  `Failed to encrypt to-device event for ${userId} / ${deviceId}: ${reason}`,
+                  { cause: error }
+                );
+              }
+            })
           );
-
-          await this.mx.queueToDevice(batch);
         })
       );
-    } else {
-      await this.mx.queueToDevice({
-        eventType,
-        batch: Object.entries(contentMap).flatMap(([userId, userContentMap]) =>
-          Object.entries(userContentMap).map(([deviceId, content]) => ({
-            userId,
-            deviceId,
-            payload: content,
-          }))
-        ),
-      });
+
+      messages = encryptedContentMap;
     }
+
+    const resp = await this.ct.requestAuthJSON(
+      putSendToDevice({
+        pathParams: { eventType, txnId: this.ct.getTxnId() },
+        body: { messages },
+      })
+    );
+
+    const [err] = await parseMatrixResp(resp);
+
+    if (err) {
+      throw err;
+    }
+  }
+
+  public async readRoomAccountData(
+    eventType: string,
+    roomIds?: string[] | null
+  ): Promise<IRoomAccountData[]> {
+    const dataObjects = await this.ct.storage.joinAccountData.read.queryIndex('type', eventType);
+    const events = dataObjects
+      .filter((obj) => (Array.isArray(roomIds) ? roomIds.includes(obj.roomId) : true))
+      .map((obj) => ({
+        ...obj.event,
+        room_id: obj.roomId,
+        content: obj.event.content as Record<string, unknown>,
+      }));
+
+    return events;
+  }
+
+  public async readStickyEvents(roomId: string): Promise<IRoomEvent[]> {
+    const eventObjs = await this.ct.storage.joinRoomSticky.read.queryIndex('roomId', roomId);
+
+    return eventObjs.map(({ event }) => ({
+      room_id: roomId,
+      ...event,
+      content: event.content as Record<string, unknown>,
+      unsigned: event.unsigned as Record<string, unknown>,
+    }));
   }
 
   public async readRoomTimeline(
@@ -193,40 +397,54 @@ export class CallWidgetDriver extends WidgetDriver {
     eventType: string,
     msgtype: string | undefined,
     stateKey: string | undefined,
-    limit: number,
-    since: string | undefined
+    limit: number
   ): Promise<IRoomEvent[]> {
     const safeLimit =
-      limit > 0 ? Math.min(limit, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER; // relatively arbitrary
+      limit > 0 ? Math.min(limit, Number.MAX_SAFE_INTEGER) : Number.MAX_SAFE_INTEGER;
 
-    const room = this.mx.getRoom(roomId);
-    if (room === null) return [];
-    const results: MatrixEvent[] = [];
-    const events = room.getLiveTimeline().getEvents();
+    const msgResp = await this.ct.requestAuthJSON(
+      getMessages({
+        pathParams: { roomId },
+        searchParams: { dir: 'b', limit: safeLimit },
+      })
+    );
 
-    for (let i = events.length - 1; i >= 0; i -= 1) {
+    const [err, result] = await parseMatrixResp<GetMessagesOK>(msgResp);
+    if (err) throw err;
+
+    let events: ClientEventWithoutRoomId[] = result.chunk;
+
+    if (this.ct.encryptedRooms.read.has(roomId)) {
+      const pending = events.map((evt) => this.ct.decryption.tryDecryptEvent(roomId, evt));
+
+      events = fulfilledPromiseSettledResult(await Promise.allSettled(pending));
+    }
+
+    const resultEvents: ClientEventWithoutRoomId[] = [];
+
+    for (let i = 0; i < events.length; i += 1) {
       const ev = events[i];
-      if (results.length >= safeLimit) break;
-      if (since !== undefined && ev.getId() === since) break;
+      if (resultEvents.length >= safeLimit) break;
+
+      const eventStateKey = 'state_key' in ev ? ev.state_key : undefined;
 
       if (
-        ev.getType() === eventType &&
-        !ev.isState() &&
-        (eventType !== EventType.RoomMessage || !msgtype || msgtype === ev.getContent().msgtype) &&
-        (ev.getStateKey() === undefined || stateKey === undefined || ev.getStateKey() === stateKey)
+        ev.type === eventType &&
+        (eventStateKey === undefined || stateKey === undefined || eventStateKey === stateKey) &&
+        (eventType !== MessageEvent.RoomMessage ||
+          !msgtype ||
+          msgtype === rContent.msgtype(ev.content))
       ) {
-        results.push(ev);
+        resultEvents.push(ev);
       }
     }
 
-    return results.map((e) => e.getEffectiveEvent() as IRoomEvent);
-  }
-
-  public async askOpenID(observer: SimpleObservable<IOpenIDUpdate>): Promise<void> {
-    return observer.update({
-      state: OpenIDRequestState.Allowed,
-      token: await this.mx.getOpenIdToken(),
-    });
+    return resultEvents.map((evt) => ({
+      room_id: roomId,
+      ...evt,
+      content: evt.content as Record<string, unknown>,
+      unsigned: evt.unsigned as Record<string, unknown>,
+    }));
   }
 
   public async readRoomState(
@@ -234,58 +452,134 @@ export class CallWidgetDriver extends WidgetDriver {
     eventType: string,
     stateKey: string | undefined
   ): Promise<IRoomEvent[]> {
-    const room = this.mx.getRoom(roomId);
-    if (room === null) return [];
-    const state = room.getLiveTimeline().getState(Direction.Forward);
-    if (state === undefined) return [];
+    if (stateKey === undefined) {
+      const stateObjs =
+        eventType === 'm.room.member'
+          ? await this.ct.storage.joinRoomMember.read.queryIndex('roomId', roomId)
+          : await this.ct.storage.joinRoomState.read.query(
+              new QueryRange(
+                getJoinRoomStateId(roomId, eventType, ''),
+                getJoinRoomStateId(roomId, eventType, MAX_UNICODE)
+              )
+            );
 
-    if (stateKey === undefined)
-      return state.getStateEvents(eventType).map((e) => e.getEffectiveEvent() as IRoomEvent);
-    const event = state.getStateEvents(eventType, stateKey);
-    return event === null ? [] : [event.getEffectiveEvent() as IRoomEvent];
+      return stateObjs.map((stateObj) => ({
+        ...stateObj.event,
+        room_id: roomId,
+        content: stateObj.event.content as Record<string, unknown>,
+        unsigned: stateObj.event.unsigned as Record<string, unknown>,
+      }));
+    }
+
+    const stateObj =
+      eventType === 'm.room.member'
+        ? await this.ct.storage.joinRoomMember.read.get(getJoinRoomMemberId(roomId, stateKey))
+        : await this.ct.storage.joinRoomState.read.get(
+            getJoinRoomStateId(roomId, eventType, stateKey ?? '')
+          );
+    if (!stateObj) return [];
+    const { event: stateEvent } = stateObj;
+
+    return [
+      {
+        ...stateEvent,
+        room_id: roomId,
+        content: stateEvent.content as Record<string, unknown>,
+        unsigned: stateEvent.unsigned as Record<string, unknown>,
+      },
+    ];
   }
 
   public async readEventRelations(
     eventId: string,
     roomId?: string,
-    relationType?: string,
+    relType?: string,
     eventType?: string,
     from?: string,
     to?: string,
     limit?: number,
-    direction?: 'f' | 'b'
+    dir?: 'f' | 'b'
   ): Promise<IReadEventRelationsResult> {
-    const dir = direction as Direction;
-    const targetRoomId = roomId ?? this.inRoomId ?? undefined;
+    const targetRoomId = roomId ?? this.inRoomId;
 
     if (typeof targetRoomId !== 'string') {
       throw new Error('Error while reading the current room');
     }
 
-    const { events, nextBatch, prevBatch } = await this.mx.relations(
-      targetRoomId,
-      eventId,
-      relationType ?? null,
-      eventType ?? null,
-      { from, to, limit, dir }
-    );
+    let endpoint: MatrixEndpointStruct;
+    if (relType && eventType) {
+      endpoint = getRelationsRelTypeEventType({
+        pathParams: { roomId: targetRoomId, eventId, relType, eventType },
+        searchParams: { dir, from, to, limit },
+      });
+    } else if (relType) {
+      endpoint = getRelationsRelType({
+        pathParams: { roomId: targetRoomId, eventId, relType },
+        searchParams: { dir, from, to, limit },
+      });
+    } else {
+      endpoint = getRelations({
+        pathParams: { roomId: targetRoomId, eventId },
+        searchParams: { dir, from, to, limit },
+      });
+    }
 
-    return {
-      chunk: events.map((e) => e.getEffectiveEvent() as IRoomEvent),
-      nextBatch: nextBatch ?? undefined,
-      prevBatch: prevBatch ?? undefined,
-    };
+    const resp = await this.ct.requestAuthJSON(endpoint);
+
+    const [err, result] = await parseMatrixResp<GetRelationsOK>(resp);
+
+    if (err) {
+      throw err;
+    }
+
+    if (this.ct.encryptedRooms.read.has(targetRoomId)) {
+      const pending = result.chunk.map((evt) =>
+        this.ct.decryption.tryDecryptEvent(targetRoomId, evt)
+      );
+      const clientEvents = fulfilledPromiseSettledResult(await Promise.allSettled(pending));
+      return {
+        chunk: clientEvents.map((evt) => ({
+          room_id: targetRoomId,
+          ...evt,
+          content: evt.content as Record<string, unknown>,
+          unsigned: evt.unsigned as Record<string, unknown>,
+        })),
+        prevBatch: result.prev_batch,
+        nextBatch: result.next_batch,
+      };
+    }
+    return result as IReadEventRelationsResult;
+  }
+
+  public async askOpenID(observer: SimpleObservable<IOpenIDUpdate>): Promise<void> {
+    const resp = await this.ct.requestAuthJSON(
+      postOpenidRequestToken({
+        pathParams: {
+          userId: this.ct.session.userId,
+        },
+      })
+    );
+    const [err, result] = await parseMatrixResp<PostOpenidRequestTokenOK>(resp);
+    if (err) return;
+
+    observer.update({ state: OpenIDRequestState.Allowed, token: result });
   }
 
   public async searchUserDirectory(
     searchTerm: string,
     limit?: number
   ): Promise<ISearchUserDirectoryResult> {
-    const { limited, results } = await this.mx.searchUserDirectory({ term: searchTerm, limit });
+    const resp = await this.ct.requestAuthJSON(
+      postSearch({ body: { search_term: searchTerm, limit } })
+    );
+    const [err, result] = await parseMatrixResp<PostSearchOK>(resp);
+    if (err) {
+      throw err;
+    }
 
     return {
-      limited,
-      results: results.map((r) => ({
+      limited: result.limited,
+      results: result.results.map((r) => ({
         userId: r.user_id,
         displayName: r.display_name,
         avatarUrl: r.avatar_url,
@@ -294,32 +588,95 @@ export class CallWidgetDriver extends WidgetDriver {
   }
 
   public async getMediaConfig(): Promise<IGetMediaConfigResult> {
-    return this.mx.getMediaConfig();
+    const resp = await this.ct.requestAuthJSON(getConfig({}));
+    const [err, result] = await parseMatrixResp<GetConfigOK>(resp);
+    if (err) {
+      throw err;
+    }
+    return result;
+  }
+
+  public async getRtcTransports(): Promise<IRtcTransportsResult> {
+    const resp = await this.ct.requestAuthJSON(unstableGetTransports({}));
+    const [err, result] = await parseMatrixResp<UnstableGetTransportsOK>(resp);
+    if (result) {
+      return {
+        rtc_transports: result.rtc_transports ?? result.transports,
+      };
+    }
+
+    const userId = getMxIdServer(this.ct.session.userId);
+    if (!userId) throw err;
+
+    const [, info] = await autoDiscovery(fetch, userId);
+    const rtcInfo = info?.['org.matrix.msc4143.rtc_foci'];
+    if (rtcInfo)
+      return {
+        rtc_transports: rtcInfo,
+      };
+
+    throw err;
   }
 
   public async uploadFile(file: XMLHttpRequestBodyInit): Promise<{ contentUri: string }> {
-    const uploadResult = await this.mx.uploadContent(file);
+    if (!(file instanceof Blob) || !(file instanceof FormData)) {
+      throw new Error('Failed to upload file. Unsupported file type');
+    }
 
-    return { contentUri: uploadResult.content_uri };
+    const request = getAuthUploadRequest<PostUploadOK>(
+      this.ct.session.baseUrl,
+      this.ct.session.accessToken
+    );
+    const [err, result] = await request(postUpload({ body: file }));
+    if (err) {
+      throw err;
+    }
+    return { contentUri: result.content_uri };
   }
 
   public async downloadFile(contentUri: string): Promise<{ file: XMLHttpRequestBodyInit }> {
-    const httpUrl = mxcUrlToHttp(this.mx, contentUri, true);
-    if (!httpUrl) {
-      throw new Error('Call widget failed to download file! No http url!');
-    }
+    const httpUrl = mxcToHttp(this.ct.session.baseUrl, contentUri, true).url();
     const blob = await downloadMedia(httpUrl);
     return { file: blob };
   }
 
+  public async getRtcLivekitToken(
+    data: IRtcLivekitGetTokenFromWidgetRequestData
+  ): Promise<IRtcLivekitGetTokenFromWidgetResponseData> {
+    const resp = await this.ct.requestAuthJSON(
+      unstablePostLivekitGetToken({
+        body: data,
+      })
+    );
+    const [err, result] = await parseMatrixResp<UnstablePostLivekitGetTokenOK>(resp);
+    if (err) {
+      throw err;
+    }
+    return result;
+  }
+
+  public async delegateRtcLivekitDelayedLeave(
+    data: IRtcLivekitDelegateDelayedLeaveFromWidgetRequestData
+  ): Promise<IRtcLivekitDelegateDelayedLeaveFromWidgetResponseData> {
+    const resp = await this.ct.requestAuthJSON(
+      unstablePostLivekitDelegateDelayedLeave({
+        body: data,
+      })
+    );
+    const [err] = await parseMatrixResp(resp);
+    if (err) {
+      throw err;
+    }
+
+    return {};
+  }
+
   public getKnownRooms(): string[] {
-    return this.mx.getVisibleRooms().map((r) => r.roomId);
+    return this.ct.rooms.join.read;
   }
 
   // eslint-disable-next-line class-methods-use-this
-  public processError(error: unknown): IWidgetApiErrorResponseDataDetails | undefined {
-    return error instanceof MatrixError
-      ? { matrix_api_error: error.asWidgetApiErrorData() }
-      : undefined;
+  public processError(): IWidgetApiErrorResponseDataDetails | undefined {
+    return undefined;
   }
 }
diff --git a/src/app/plugins/call/hooks.ts b/src/app/plugins/call/hooks.ts
index f5b3ff93..4d8a6c5c 100644
--- a/src/app/plugins/call/hooks.ts
+++ b/src/app/plugins/call/hooks.ts
@@ -3,9 +3,10 @@ import {
   IWidgetApiAcknowledgeResponseData,
   IWidgetApiRequestData,
 } from 'matrix-widget-api';
-import { useCallback, useEffect, useState } from 'react';
-import { CallControl, CallControlEvent } from './CallControl';
+import { useCallback, useEffect } from 'react';
+import { CallControl } from './CallControl';
 import { CallControlState } from './CallControlState';
+import { useObservableValue } from '../../hooks/useObservableValue';
 
 export const useClientWidgetApiEvent = <T>(
   api: ClientWidgetApi | undefined,
@@ -33,17 +34,7 @@ export const useSendClientWidgetApiAction = (api: ClientWidgetApi) => {
 };
 
 export const useCallControlState = (control: CallControl): CallControlState => {
-  const [state, setState] = useState(control.getState());
-
-  useEffect(() => {
-    const handleUpdate = () => {
-      setState(control.getState());
-    };
-    control.on(CallControlEvent.StateUpdate, handleUpdate);
-    return () => {
-      control.off(CallControlEvent.StateUpdate, handleUpdate);
-    };
-  }, [control]);
+  const state = useObservableValue(control.state);
 
   return state;
 };
diff --git a/src/app/plugins/call/utils.ts b/src/app/plugins/call/utils.ts
index 58d6d967..b0fc5013 100644
--- a/src/app/plugins/call/utils.ts
+++ b/src/app/plugins/call/utils.ts
@@ -4,7 +4,7 @@ import {
   MatrixCapabilities,
   WidgetEventCapability,
 } from 'matrix-widget-api';
-import { EventType } from 'matrix-js-sdk';
+import { CallEventType, MessageEvent, StateEventType } from '../../../types/matrix/room';
 
 export function getCallCapabilities(
   roomId: string,
@@ -20,20 +20,23 @@ export function getCallCapabilities(
   capabilities.add(MatrixCapabilities.MSC3846TurnServers);
   capabilities.add(MatrixCapabilities.MSC4157SendDelayedEvent);
   capabilities.add(MatrixCapabilities.MSC4157UpdateDelayedEvent);
+  capabilities.add(MatrixCapabilities.MSC4407SendStickyEvent);
+  capabilities.add(MatrixCapabilities.MSC4407ReceiveStickyEvent);
+  capabilities.add(MatrixCapabilities.MSC4515RtcTransports);
   capabilities.add(`org.matrix.msc2762.timeline:${roomId}`);
   capabilities.add(`org.matrix.msc2762.state:${roomId}`);
 
   capabilities.add(
-    WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomMember).raw
+    WidgetEventCapability.forStateEvent(EventDirection.Receive, StateEventType.RoomMember).raw
   );
   capabilities.add(
     WidgetEventCapability.forStateEvent(EventDirection.Receive, 'org.matrix.msc3401.call').raw
   );
   capabilities.add(
-    WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomEncryption).raw
+    WidgetEventCapability.forStateEvent(EventDirection.Receive, StateEventType.RoomEncryption).raw
   );
   capabilities.add(
-    WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomName).raw
+    WidgetEventCapability.forStateEvent(EventDirection.Receive, StateEventType.RoomName).raw
   );
 
   capabilities.add(
@@ -77,34 +80,36 @@ export function getCallCapabilities(
       .raw
   );
   capabilities.add(
-    WidgetEventCapability.forStateEvent(EventDirection.Receive, EventType.RoomCreate).raw
+    WidgetEventCapability.forStateEvent(EventDirection.Receive, StateEventType.RoomCreate).raw
   );
 
   [
     'io.element.call.encryption_keys',
     'org.matrix.rageshake_request',
-    EventType.Reaction,
-    EventType.RoomRedaction,
+    MessageEvent.Reaction,
+    MessageEvent.RoomRedaction,
     'io.element.call.reaction',
     'org.matrix.msc4075.rtc.notification',
     'org.matrix.msc4310.rtc.decline',
+    'org.matrix.msc4143.rtc.member',
+    'org.matrix.msc4075.call.notify',
   ].forEach((type) => {
     capabilities.add(WidgetEventCapability.forRoomEvent(EventDirection.Send, type).raw);
     capabilities.add(WidgetEventCapability.forRoomEvent(EventDirection.Receive, type).raw);
   });
 
   [
-    EventType.CallInvite,
-    EventType.CallCandidates,
-    EventType.CallAnswer,
-    EventType.CallHangup,
-    EventType.CallReject,
-    EventType.CallSelectAnswer,
-    EventType.CallNegotiate,
-    EventType.CallSDPStreamMetadataChanged,
-    EventType.CallSDPStreamMetadataChangedPrefix,
-    EventType.CallReplaces,
-    EventType.CallEncryptionKeysPrefix,
+    CallEventType.CallInvite,
+    CallEventType.CallCandidates,
+    CallEventType.CallAnswer,
+    CallEventType.CallHangup,
+    CallEventType.CallReject,
+    CallEventType.CallSelectAnswer,
+    CallEventType.CallNegotiate,
+    CallEventType.CallSDPStreamMetadataChanged,
+    CallEventType.CallSDPStreamMetadataChangedPrefix,
+    CallEventType.CallReplaces,
+    CallEventType.CallEncryptionKeysPrefix,
   ].forEach((type) => {
     capabilities.add(WidgetEventCapability.forToDeviceEvent(EventDirection.Send, type).raw);
     capabilities.add(WidgetEventCapability.forToDeviceEvent(EventDirection.Receive, type).raw);
diff --git a/src/app/plugins/msc4140-delayed-events.ts b/src/app/plugins/msc4140-delayed-events.ts
new file mode 100644
index 00000000..04e4681d
--- /dev/null
+++ b/src/app/plugins/msc4140-delayed-events.ts
@@ -0,0 +1,31 @@
+import { MatrixEndpoint } from 'neurone/lib/api/MatrixEndpoint';
+
+export type UnstablePutDelayedEventOK = { delay_id: string };
+
+export const unstablePutDelayedEvent: MatrixEndpoint<{
+  pathParams: { roomId: string; eventType: string; txnId: string };
+  body:
+    | { delay_ms: number; state_key?: string; content: object }
+    | { delay_ms: number; 'org.matrix.msc4354.sticky_duration_ms': number; content: object };
+}> = ({ pathParams, body }) => ({
+  method: 'PUT',
+  path: `/_matrix/client/unstable/org.matrix.msc4140/rooms/${encodeURIComponent(
+    pathParams.roomId
+  )}/delayed_event/${encodeURIComponent(pathParams.eventType)}/${encodeURIComponent(
+    pathParams.txnId
+  )}`,
+  requireAuthentication: true,
+  rateLimited: true,
+  body: JSON.stringify(body),
+});
+
+export const unstablePostDelayedEvents: MatrixEndpoint<{
+  pathParams: { delayId: string; action: 'send' | 'cancel' | 'restart' };
+}> = ({ pathParams }) => ({
+  method: 'POST',
+  path: `/_matrix/client/unstable/org.matrix.msc4140/delayed_events/${encodeURIComponent(
+    pathParams.delayId
+  )}/${encodeURIComponent(pathParams.action)}`,
+  requireAuthentication: true,
+  rateLimited: true,
+});
diff --git a/src/app/plugins/msc4143-matrixrtc.ts b/src/app/plugins/msc4143-matrixrtc.ts
new file mode 100644
index 00000000..af14701a
--- /dev/null
+++ b/src/app/plugins/msc4143-matrixrtc.ts
@@ -0,0 +1,21 @@
+import { MatrixEndpoint } from 'neurone/lib/api/MatrixEndpoint';
+
+export type TransportInfo = {
+  type: string;
+  [key: string]: unknown;
+};
+export type UnstableGetTransportsOK = {
+  transports: TransportInfo[];
+  rtc_transports: TransportInfo[];
+};
+
+export const unstableGetTransports: MatrixEndpoint<object> = () => {
+  const path = `/_matrix/client/unstable/org.matrix.msc4143/rtc/transports`;
+
+  return {
+    method: 'GET',
+    path,
+    requireAuthentication: true,
+    rateLimited: true,
+  };
+};
diff --git a/src/app/plugins/msc4195-matrixrtc-livekit.ts b/src/app/plugins/msc4195-matrixrtc-livekit.ts
new file mode 100644
index 00000000..47f870a0
--- /dev/null
+++ b/src/app/plugins/msc4195-matrixrtc-livekit.ts
@@ -0,0 +1,45 @@
+import { MatrixEndpoint } from 'neurone/lib/api/MatrixEndpoint';
+
+export type UnstablePostLivekitGetTokenOK = {
+  jwt: string;
+};
+
+export const unstablePostLivekitGetToken: MatrixEndpoint<{
+  body: {
+    server_name?: string;
+    url: string;
+    room_id: string;
+    slot_id: string;
+    member_id: string;
+  };
+}> = ({ body }) => {
+  const path = `/_matrix/client/unstable/io.element.msc4195/rtc/livekit/get_token`;
+
+  return {
+    method: 'POST',
+    path,
+    requireAuthentication: true,
+    rateLimited: true,
+    body: JSON.stringify(body),
+  };
+};
+
+export const unstablePostLivekitDelegateDelayedLeave: MatrixEndpoint<{
+  body: {
+    url: string;
+    room_id: string;
+    slot_id: string;
+    member_id: string;
+    delay_id: string;
+  };
+}> = ({ body }) => {
+  const path = `/_matrix/client/unstable/io.element.msc4195/rtc/livekit/delegate_delayed_leave`;
+
+  return {
+    method: 'POST',
+    path,
+    requireAuthentication: true,
+    rateLimited: true,
+    body: JSON.stringify(body),
+  };
+};
diff --git a/src/app/plugins/msc4354-sticky-events.ts b/src/app/plugins/msc4354-sticky-events.ts
new file mode 100644
index 00000000..e8ef0da0
--- /dev/null
+++ b/src/app/plugins/msc4354-sticky-events.ts
@@ -0,0 +1,22 @@
+import { PutSendBody, PutSendPathParams } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { MatrixEndpoint } from 'neurone/lib/api/MatrixEndpoint';
+import { withSearchParams } from 'neurone/lib/api/utils';
+
+export const unstablePutSendSticky: MatrixEndpoint<{
+  pathParams: PutSendPathParams;
+  searchParams: {
+    'org.matrix.msc4354.sticky_duration_ms': number;
+  };
+  body: PutSendBody;
+}> = ({ pathParams, searchParams, body }) => {
+  const path = `/_matrix/client/v3/rooms/${encodeURIComponent(
+    pathParams.roomId
+  )}/send/${encodeURIComponent(pathParams.eventType)}/${encodeURIComponent(pathParams.txnId)}`;
+
+  return {
+    method: 'PUT',
+    path: withSearchParams(path, searchParams),
+    requireAuthentication: true,
+    body: JSON.stringify(body),
+  };
+};
diff --git a/src/app/state/upload.ts b/src/app/state/upload.ts
index 21954c33..8fc1f3d8 100644
--- a/src/app/state/upload.ts
+++ b/src/app/state/upload.ts
@@ -121,7 +121,10 @@ export const useBindUploadAtom = (uploadAtom: UploadAtom, hideFilename?: boolean
     request(
       postUpload({
         searchParams: {
-          filename: hideFilename ? undefined : file.name,
+          filename:
+            !hideFilename && 'name' in file && typeof file.name === 'string'
+              ? file.name
+              : undefined,
         },
         body: file,
       }),
diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts
index 57af4667..72dcce08 100644
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -30,6 +30,8 @@ import { ClientContext } from '../../client/context';
 import { rContent, rInReplyTo, rRelatesTo } from '../../client/reader';
 import { replaced } from '../../client/room/relations';
 
+export const isCallRoom = (roomType?: string) => roomType === 'org.matrix.msc3417.call';
+
 export const getStateEvent = (
   room: Room,
   eventType: StateEvent,
diff --git a/src/client/SyncResponseManager.ts b/src/client/SyncResponseManager.ts
index 60654454..3ec57aa8 100644
--- a/src/client/SyncResponseManager.ts
+++ b/src/client/SyncResponseManager.ts
@@ -2,7 +2,11 @@ import { GetSyncOK, JoinRoom } from 'neurone/lib/api/matrix/client/v3/sync';
 import { ObservableValue } from 'neurone/lib/utils/observable';
 import { EncryptionSyncChanges } from 'neurone/lib/crypto/machine';
 import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
-import { ToDeviceDecrypted, ToDevicePlainText } from 'neurone/lib/crypto/machine/events';
+import {
+  ProcessedToDeviceEvent,
+  ToDeviceDecrypted,
+  ToDevicePlainText,
+} from 'neurone/lib/crypto/machine/events';
 import { roomState } from 'neurone/lib/utils/sync/v3/join';
 import { ObjectReader } from 'neurone/lib/utils';
 import { InboundVerification, OutboundVerification } from 'neurone/lib/crypto/machine/verification';
@@ -17,6 +21,7 @@ export type SyncResponseManagerCallbacks = {
   onWriteComplete: () => void;
   onSyncToken: (token: string) => void;
   onVerificationRequest: (verificationFlow: OutboundVerification | InboundVerification) => void;
+  onToDeviceEvents: (toDeviceEvents: ProcessedToDeviceEvent[]) => void;
 };
 
 export class SyncResponseManager implements Disposable {
@@ -82,6 +87,8 @@ export class SyncResponseManager implements Disposable {
           this.callbacks.onVerificationRequest(v)
         );
       });
+
+    this.callbacks.onToDeviceEvents(proccessedToDeviceEvents);
     // TODO: room key bundle detection from to device events;
 
     const encryptedRooms = this.filterEncryptedRoomResponse(data.rooms?.join ?? {});
diff --git a/src/client/call/CallSession.ts b/src/client/call/CallSession.ts
new file mode 100644
index 00000000..689f8677
--- /dev/null
+++ b/src/client/call/CallSession.ts
@@ -0,0 +1,282 @@
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { StateEventWithoutRoomId } from 'neurone/lib/api/types';
+import { ObjectReader } from 'neurone/lib/utils';
+import { Storage } from '../storage';
+import {
+  JoinRoomStateObject,
+  JoinRoomStickyObject,
+  JoinRoomMemberObject,
+  getJoinRoomMemberId,
+} from '../storage/collections';
+import { CALL_APPLICATION_TYPE, DEFAULT_CALL_SLOT_IDS, resolveActiveRtcMembers } from './rtcMember';
+
+export type CallMember = {
+  kind: 'call.member' | 'rtc.member';
+  /** Unique within the room. */
+  id: string;
+  userId: string;
+  deviceId?: string;
+  expiresAt: number;
+  intent?: 'audio' | 'video';
+  capabilities?: string[];
+  event: StateEventWithoutRoomId | JoinRoomStickyObject['event'];
+};
+
+// js-sdk's DEFAULT_EXPIRE_DURATION, used when `expires` is missing.
+const DEFAULT_CALL_MEMBER_EXPIRE_MS = 4 * 60 * 60 * 1000;
+
+/**
+ * Absolute expiry (unix ms) of a legacy `call.member` event, or undefined if the
+ * event doesn't represent an active membership (empty content = left).
+ */
+export const getCallMemberExpiresAt = (event: StateEventWithoutRoomId): number | undefined => {
+  const { content } = event;
+  if (!content || Object.keys(content).length === 0) return undefined;
+
+  // Absolute timestamp variants, if an implementation sends them.
+  const absolute =
+    ObjectReader.number(content, 'expires_ts') ?? ObjectReader.number(content, 'expires_at');
+  if (absolute !== undefined) return absolute;
+
+  // `expires` is a lifetime in ms, counted from the join time.
+  const startTs =
+    ObjectReader.number(content, 'created_ts') ?? ObjectReader.number(event, 'origin_server_ts');
+  if (startTs === undefined) return undefined;
+
+  return startTs + (ObjectReader.number(content, 'expires') ?? DEFAULT_CALL_MEMBER_EXPIRE_MS);
+};
+
+export const isActiveCallMember = (event: StateEventWithoutRoomId, now: number): boolean => {
+  const expiresAt = getCallMemberExpiresAt(event);
+  return expiresAt !== undefined && expiresAt > now;
+};
+
+type EventLike = { event: { event_id: string } };
+
+const isSameEventIds = (prev: EventLike[], next: EventLike[]): boolean => {
+  if (prev.length !== next.length) return false;
+  const prevIds = new Set(prev.map((o) => o.event.event_id));
+  const nextIds = new Set(next.map((o) => o.event.event_id));
+  return prevIds.size === nextIds.size && [...nextIds].every((id) => prevIds.has(id));
+};
+
+type MemberEntries = ObservableValue<Array<JoinRoomMemberObject | undefined>>;
+
+export class CallSession implements Disposable {
+  public readonly roomId: string;
+
+  /** Active call members (legacy + MatrixRTC) whose room membership is `join`. */
+  public readonly members: ObservableValue<CallMember[]>;
+
+  private readonly storage: Storage;
+
+  private readonly publisherKey = crypto.randomUUID();
+
+  private callEvents: JoinRoomStateObject[] = [];
+
+  private rtcEvents: JoinRoomStickyObject[] = [];
+
+  private slotEvents: JoinRoomStateObject[] = [];
+
+  private readonly redacted = new ObservableValue<Set<string>>(new Set(), this.publisherKey);
+
+  /** Room-member entries for the current senders. */
+  private memberEntries?: MemberEntries;
+
+  private memberEntriesDisposer?: Disposer;
+
+  private sendersKey = '';
+
+  /** Bumped whenever the sender set changes so stale async work is discarded. */
+  private generation = 0;
+
+  private expiryTimer?: ReturnType<typeof setTimeout>;
+
+  private disposed = false;
+
+  private disposer = new Disposer();
+
+  constructor(roomId: string, storage: Storage) {
+    this.roomId = roomId;
+    this.storage = storage;
+    this.members = new ObservableValue<CallMember[]>([], this.publisherKey);
+
+    this.disposer.collect(
+      this.redacted.subscribe(() => {
+        this.refresh();
+      })
+    );
+  }
+
+  public async handleRedactions(eventIds: string[]) {
+    if (eventIds.length === 0) return;
+    const redacted = new Set([...this.redacted.read, ...eventIds]);
+    this.redacted.publish(this.publisherKey, redacted);
+  }
+
+  public async handleCallMemberChange(events: JoinRoomStateObject[]) {
+    if (isSameEventIds(this.callEvents, events)) return;
+    this.callEvents = events;
+    await this.refresh();
+  }
+
+  public async handleRtcMemberChange(events: JoinRoomStickyObject[]) {
+    if (isSameEventIds(this.rtcEvents, events)) return;
+    this.rtcEvents = events;
+    await this.refresh();
+  }
+
+  public async handleRtcSlotChange(events: JoinRoomStateObject[]) {
+    if (isSameEventIds(this.slotEvents, events)) return;
+    this.slotEvents = events;
+    await this.refresh();
+  }
+
+  private async refresh() {
+    if (this.disposed) return;
+    await this.syncMemberEntries();
+    this.recompute();
+  }
+
+  /** Slot ids of open default call slots (`m.call#room`). */
+  private getOpenSlotIds(): Set<string> {
+    const open = new Set<string>();
+    this.slotEvents.forEach(({ event }) => {
+      const application = ObjectReader.object(event.content, 'application');
+      if (
+        DEFAULT_CALL_SLOT_IDS.has(event.state_key) &&
+        ObjectReader.string(event.content, 'status') === 'open' &&
+        ObjectReader.string(application, 'type') === CALL_APPLICATION_TYPE
+      ) {
+        open.add(event.state_key);
+      }
+    });
+    return open;
+  }
+
+  private getActiveRtcMembers(now: number) {
+    const openSlots = this.getOpenSlotIds();
+    if (openSlots.size === 0) return [];
+    return resolveActiveRtcMembers(
+      this.rtcEvents.map((obj) => obj.event),
+      now
+    ).filter((m) => openSlots.has(m.slotId));
+  }
+
+  private collectSenders(): string[] {
+    const now = Date.now();
+    const senders = new Set<string>();
+    this.callEvents.forEach(({ event }) => {
+      if (isActiveCallMember(event, now)) senders.add(event.sender);
+    });
+    this.getActiveRtcMembers(now).forEach((m) => senders.add(m.userId));
+    return [...senders].sort();
+  }
+
+  private async syncMemberEntries() {
+    const senders = this.collectSenders();
+    const key = senders.join('\n');
+    if (key === this.sendersKey) return;
+
+    this.sendersKey = key;
+    this.generation += 1;
+    const { generation } = this;
+
+    if (senders.length === 0) {
+      const old = this.memberEntriesDisposer;
+      this.memberEntries = undefined;
+      this.memberEntriesDisposer = undefined;
+      old?.run();
+      return;
+    }
+
+    const entries = await this.storage.joinRoomMember.observableRead.getMultiple(
+      senders.map((userId) => getJoinRoomMemberId(this.roomId, userId))
+    );
+
+    // A newer sender set arrived (or we were disposed) while awaiting.
+    if (this.disposed || generation !== this.generation) {
+      entries.dispose();
+      return;
+    }
+
+    // Keep the old entries until the new ones are ready, so `members` doesn't flicker.
+    const old = this.memberEntriesDisposer;
+    const disposer = new Disposer();
+    disposer.collect(
+      entries.subscribe(() => this.recompute()),
+      entries // disposed exactly once, via the disposer
+    );
+    this.memberEntries = entries;
+    this.memberEntriesDisposer = disposer;
+    old?.run();
+  }
+
+  private recompute() {
+    if (this.disposed) return;
+
+    const now = Date.now();
+
+    const joined = new Set<string>();
+    this.memberEntries?.read.forEach((entry) => {
+      if (entry && ObjectReader.string(entry.event.content, 'membership') === 'join') {
+        joined.add(entry.userId);
+      }
+    });
+
+    const next: CallMember[] = [];
+    let nextExpiry = Infinity;
+
+    this.callEvents.forEach(({ event }) => {
+      const expiresAt = getCallMemberExpiresAt(event);
+      if (expiresAt === undefined || expiresAt <= now) return;
+
+      nextExpiry = Math.min(nextExpiry, expiresAt);
+      if (!joined.has(event.sender)) return;
+
+      next.push({
+        kind: 'call.member',
+        id: `call.member:${event.state_key}`,
+        userId: event.sender,
+        expiresAt,
+        event,
+      });
+    });
+
+    this.getActiveRtcMembers(now).forEach((m) => {
+      if (this.redacted.read.has(m.event.event_id)) {
+        return;
+      }
+      nextExpiry = Math.min(nextExpiry, m.expiresAt);
+      if (!joined.has(m.userId)) return;
+
+      next.push({
+        kind: 'rtc.member',
+        id: `rtc.member:${m.userId}:${m.memberId}`,
+        userId: m.userId,
+        deviceId: m.deviceId,
+        expiresAt: m.expiresAt,
+        intent: m.intent,
+        capabilities: m.capabilities,
+        event: m.event,
+      });
+    });
+
+    this.members.publish(this.publisherKey, next);
+
+    // Expiry produces no storage event, so wake up at the next one.
+    clearTimeout(this.expiryTimer);
+    if (Number.isFinite(nextExpiry)) {
+      this.expiryTimer = setTimeout(() => this.recompute(), nextExpiry - now + 50);
+    }
+  }
+
+  dispose(): void {
+    if (this.disposed) return;
+    this.disposed = true;
+    clearTimeout(this.expiryTimer);
+    this.memberEntriesDisposer?.run();
+    this.members.dispose();
+  }
+}
diff --git a/src/client/call/CallSessions.ts b/src/client/call/CallSessions.ts
new file mode 100644
index 00000000..e7793028
--- /dev/null
+++ b/src/client/call/CallSessions.ts
@@ -0,0 +1,129 @@
+import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
+import { ObservableValue } from 'neurone/lib/utils/observable';
+import { Storage } from '../storage';
+import { JoinRoomStateObject, JoinRoomStickyObject } from '../storage/collections';
+import { CallSession } from './CallSession';
+import { RTC_MEMBER_EVENT_TYPE, RTC_SLOT_EVENT_TYPE } from './rtcMember';
+import { SyncValue } from '../sync';
+import { rContent, rEvent } from '../reader';
+
+export class CallSessions implements Disposable {
+  private readonly storage: Storage;
+
+  private readonly syncObservable: ObservableValue<SyncValue>;
+
+  private readonly disposer = new Disposer();
+
+  private readonly roomToSessions = new Map<string, CallSession>();
+
+  constructor(storage: Storage, syncObservable: ObservableValue<SyncValue>) {
+    this.storage = storage;
+    this.syncObservable = syncObservable;
+
+    this.start();
+  }
+
+  private async start() {
+    const callMemberStateEvents = await this.storage.joinRoomState.observableRead.queryIndex(
+      'type',
+      'org.matrix.msc3401.call.member'
+    );
+
+    const rtcSlotEvents = await this.storage.joinRoomState.observableRead.queryIndex(
+      'type',
+      RTC_SLOT_EVENT_TYPE
+    );
+
+    const rtcMemberEvents = await this.storage.joinRoomSticky.observableRead.queryIndex(
+      'type',
+      RTC_MEMBER_EVENT_TYPE
+    );
+
+    // Slots first, so sessions know whether the slot is open before members arrive.
+    this.handleRtcSlots(rtcSlotEvents.read);
+    this.handleCallMembers(callMemberStateEvents.read);
+    this.handleRtcMembers(rtcMemberEvents.read);
+
+    this.disposer.collect(
+      callMemberStateEvents.subscribe((objs) => this.handleCallMembers(objs)),
+      callMemberStateEvents,
+      rtcSlotEvents.subscribe((objs) => this.handleRtcSlots(objs)),
+      rtcSlotEvents,
+      rtcMemberEvents.subscribe((objs) => this.handleRtcMembers(objs)),
+      rtcMemberEvents,
+      this.syncObservable.subscribe((value) => this.handleSync(value))
+    );
+  }
+
+  private handleSync(syncValue: SyncValue): void {
+    const [, result] = syncValue ?? [];
+    Object.keys(result?.rooms?.join ?? {}).forEach((roomId) => {
+      const joinRoom = result?.rooms?.join?.[roomId];
+      if (!joinRoom) return;
+      const redactionEvents = joinRoom.timeline?.events.filter(
+        (event) => event.type === 'm.room.redaction'
+      );
+      if (!redactionEvents || redactionEvents.length === 0) return;
+
+      const eventIds = redactionEvents.map(
+        (event) => rEvent.redacts(event) ?? rContent.redacts(event.content)
+      );
+
+      const session = this.roomToSessions.get(roomId);
+      session?.handleRedactions(eventIds.filter((id) => typeof id === 'string'));
+    });
+  }
+
+  /**
+   * Groups events per room and hands them to the matching session.
+   * Rooms that already have a session but no events are given an empty list,
+   * otherwise their members would never clear.
+   */
+  private dispatch<T extends { roomId: string }>(
+    objs: T[],
+    apply: (session: CallSession, events: T[]) => Promise<void>
+  ) {
+    const byRoom = new Map<string, T[]>();
+    objs.forEach((obj) => {
+      const list = byRoom.get(obj.roomId) ?? [];
+      list.push(obj);
+      byRoom.set(obj.roomId, list);
+    });
+
+    // Existing sessions whose room has NO events in this update get an empty list
+    this.roomToSessions.forEach((_, roomId) => {
+      if (!byRoom.has(roomId)) byRoom.set(roomId, []);
+    });
+
+    byRoom.forEach((events, roomId) => {
+      apply(this.getSession(roomId), events).catch((e) => console.error(e));
+    });
+  }
+
+  private handleCallMembers(objs: JoinRoomStateObject[]): void {
+    this.dispatch(objs, (s, e) => s.handleCallMemberChange(e));
+  }
+
+  private handleRtcSlots(objs: JoinRoomStateObject[]): void {
+    this.dispatch(objs, (s, e) => s.handleRtcSlotChange(e));
+  }
+
+  private handleRtcMembers(objs: JoinRoomStickyObject[]): void {
+    this.dispatch(objs, (s, e) => s.handleRtcMemberChange(e));
+  }
+
+  public getSession(roomId: string): CallSession {
+    let session = this.roomToSessions.get(roomId);
+    if (!session) {
+      session = new CallSession(roomId, this.storage);
+      this.roomToSessions.set(roomId, session);
+    }
+    return session;
+  }
+
+  dispose(): void {
+    this.roomToSessions.forEach((s) => s.dispose());
+    this.roomToSessions.clear();
+    this.disposer.run();
+  }
+}
diff --git a/src/client/call/index.ts b/src/client/call/index.ts
new file mode 100644
index 00000000..37084d6c
--- /dev/null
+++ b/src/client/call/index.ts
@@ -0,0 +1,2 @@
+export * from './CallSessions';
+export * from './CallSession';
diff --git a/src/client/call/rtcMember.ts b/src/client/call/rtcMember.ts
new file mode 100644
index 00000000..10dbd1cf
--- /dev/null
+++ b/src/client/call/rtcMember.ts
@@ -0,0 +1,144 @@
+import { ObjectReader } from 'neurone/lib/utils';
+import { JoinRoomStickyObject } from '../storage/collections';
+
+type StickyEvent = JoinRoomStickyObject['event'];
+
+// Unstable identifiers for now; add the stable ones here once MSC4143 lands.
+export const RTC_SLOT_EVENT_TYPE = 'org.matrix.msc4143.rtc.slot';
+export const RTC_MEMBER_EVENT_TYPE = 'org.matrix.msc4143.rtc.member';
+
+export const CALL_APPLICATION_TYPE = 'm.call';
+// MSC4196 says `room`, the reference implementation uses `ROOM`. Accept both.
+export const DEFAULT_CALL_SLOT_IDS: ReadonlySet<string> = new Set(['m.call#room', 'm.call#ROOM']);
+
+const STICKY_MAX_DURATION_MS = 60 * 60 * 1000;
+
+export type RtcMember = {
+  stickyKey: string;
+  memberId: string;
+  userId: string;
+  deviceId?: string;
+  slotId: string;
+  expiresAt: number;
+  intent?: 'audio' | 'video';
+  capabilities?: string[];
+  event: StickyEvent;
+};
+
+type ResolvedEntry = {
+  stickyKey: string;
+  memberId?: string;
+  membership?: string;
+  slotId?: string;
+  applicationType?: string;
+  deviceId?: string;
+  intent?: 'audio' | 'video';
+  capabilities?: string[];
+  expiresAt: number;
+  eventId: string;
+  sender: string;
+  event: StickyEvent;
+};
+
+export const getStickyExpiresAt = (event: StickyEvent): number | undefined => {
+  const sticky =
+    ObjectReader.object(event, 'msc4354_sticky') ?? ObjectReader.object(event, 'sticky');
+  const duration = sticky ? ObjectReader.number(sticky, 'duration_ms') : undefined;
+  const originTs = ObjectReader.number(event, 'origin_server_ts');
+  if (duration === undefined || originTs === undefined) return undefined;
+  return originTs + Math.min(duration, STICKY_MAX_DURATION_MS);
+};
+
+const parseIntent = (application: object | undefined): 'audio' | 'video' | undefined => {
+  if (!application) return undefined;
+  // Spec: `intent: m.audio|m.video`. Reference impl: `m.call.intent: audio|video`.
+  const raw =
+    ObjectReader.string(application, 'intent') ??
+    ObjectReader.string(application, 'm.call.intent') ??
+    ObjectReader.string(ObjectReader.object(application, 'm.call'), 'intent');
+  if (raw === 'm.audio' || raw === 'audio') return 'audio';
+  if (raw === 'm.video' || raw === 'video') return 'video';
+  return undefined;
+};
+
+const parseEntry = (event: StickyEvent): ResolvedEntry | undefined => {
+  const { content } = event;
+  const expiresAt = getStickyExpiresAt(event);
+  if (!content || expiresAt === undefined) return undefined;
+
+  const member = ObjectReader.object(content, 'member');
+  const application = ObjectReader.object(content, 'application');
+  const memberId = ObjectReader.string(member, 'id');
+
+  const stickyKey =
+    ObjectReader.string(content, 'sticky_key') ??
+    ObjectReader.string(content, 'msc4354_sticky_key') ??
+    memberId;
+  if (!stickyKey) return undefined; // not part of an ephemeral map
+
+  return {
+    stickyKey,
+    memberId,
+    membership: ObjectReader.string(member, 'membership'),
+    slotId: ObjectReader.string(content, 'slot_id'),
+    applicationType: ObjectReader.string(application, 'type'),
+    deviceId: ObjectReader.string(member, 'device_id'),
+    intent: parseIntent(application),
+    capabilities: ObjectReader.array(application, 'capabilities')?.filter(
+      (c): c is string => typeof c === 'string'
+    ),
+    expiresAt,
+    eventId: event.event_id,
+    sender: event.sender,
+    event,
+  };
+};
+
+// MSC4354 tie-break: highest expiry wins, then highest event ID.
+const isNewer = (a: ResolvedEntry, b: ResolvedEntry): boolean =>
+  a.expiresAt !== b.expiresAt ? a.expiresAt > b.expiresAt : a.eventId > b.eventId;
+
+/**
+ * Builds the MSC4354 ephemeral map for one room and returns the entries that are
+ * currently joined to the default call slot and not expired.
+ * Slot-open and room-membership checks are done by the caller.
+ */
+export const resolveActiveRtcMembers = (events: StickyEvent[], now: number): RtcMember[] => {
+  const winners = new Map<string, ResolvedEntry>();
+
+  events.forEach((event) => {
+    if (event.type !== RTC_MEMBER_EVENT_TYPE) return;
+    const entry = parseEntry(event);
+    if (!entry) return;
+
+    const mapKey = `${entry.sender}\n${entry.stickyKey}`;
+    const current = winners.get(mapKey);
+    if (!current || isNewer(entry, current)) winners.set(mapKey, entry);
+  });
+
+  const active: RtcMember[] = [];
+  winners.forEach((entry) => {
+    if (
+      entry.membership !== 'join' ||
+      entry.expiresAt <= now ||
+      !entry.memberId ||
+      !entry.slotId ||
+      !DEFAULT_CALL_SLOT_IDS.has(entry.slotId) ||
+      entry.applicationType !== CALL_APPLICATION_TYPE
+    ) {
+      return;
+    }
+    active.push({
+      stickyKey: entry.stickyKey,
+      memberId: entry.memberId,
+      userId: entry.sender,
+      deviceId: entry.deviceId,
+      slotId: entry.slotId,
+      expiresAt: entry.expiresAt,
+      intent: entry.intent,
+      capabilities: entry.capabilities,
+      event: entry.event,
+    });
+  });
+  return active;
+};
diff --git a/src/client/context.ts b/src/client/context.ts
index 791d3191..4dde5291 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -13,6 +13,7 @@ import {
   StateEventWithoutRoomId,
 } from 'neurone/lib/api/types';
 import { AesHmacSha2EncryptedData, SecretStorage } from 'neurone/lib/crypto/ssss';
+import { ProcessedToDeviceEvent } from 'neurone/lib/crypto/machine/events';
 import {
   InviteRoomStateObject,
   JoinRoomStateObject,
@@ -30,6 +31,7 @@ import { Timeline } from './room';
 import { AccountDataType } from '../types/matrix/accountData';
 import { DecryptionManager } from './decryption';
 import { MegolmBackup } from './MegolmBackup';
+import { CallSessions } from './call';
 
 export type StateContext = {
   join: {
@@ -123,6 +125,8 @@ export type ClientContext = {
 
   pendingMemberRooms: ObservableValue<string[]>;
   verificationRequest: Observable<InboundVerification | OutboundVerification>;
+  toDeviceEvents: Observable<ProcessedToDeviceEvent[]>;
+  callSessions: CallSessions;
   secrets: Secrets;
   backupInfo: ObservableValue<BackupVersionInfo | undefined>;
   megolmBackup: MegolmBackup;
@@ -939,6 +943,20 @@ export const createVerificationRequestObservable = () => {
   };
 };
 
+export const createToDeviceEventsObservable = () => {
+  const publishKey = crypto.randomUUID();
+  const toDeviceEvents = new Observable<ProcessedToDeviceEvent[]>(publishKey);
+
+  const onToDeviceEvents = (events: ProcessedToDeviceEvent[]) => {
+    toDeviceEvents.publish(publishKey, events);
+  };
+
+  return {
+    toDeviceEvents,
+    onToDeviceEvents,
+  };
+};
+
 export const createSecretsObservable = async (
   storage: Storage,
   disposer: Disposer
diff --git a/src/client/decryption/DecryptionManager.ts b/src/client/decryption/DecryptionManager.ts
index b1867144..1b37844f 100644
--- a/src/client/decryption/DecryptionManager.ts
+++ b/src/client/decryption/DecryptionManager.ts
@@ -6,7 +6,7 @@ import {
 import { Machine, RoomKeyInfo, RoomKeyWithheldInfo } from 'neurone/lib/crypto/machine';
 import { ObjectReader } from 'neurone/lib/utils';
 import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
-import { EncryptedEvent } from './EncryptedEvent';
+import { EncryptedEvent, EventDecryptionSuccess } from './EncryptedEvent';
 import { EncryptedEventIndex } from './EncryptedEventIndex';
 
 export class DecryptionManager implements Disposable {
@@ -79,6 +79,35 @@ export class DecryptionManager implements Disposable {
     return this.registerEvent(this.stateEvents, roomId, event);
   }
 
+  /**
+   * Attempts to decrypt an encrypted room event.
+   * If the event is not encrypted or decryption fails, returns the original event unchanged.
+   * @param roomId - The ID of the room the event belongs to.
+   * @param event - The event to decrypt.
+   * @returns A promise that resolves to the decrypted event if decryption succeeds,
+   * or the original event otherwise.
+   */
+  public async tryDecryptEvent(
+    roomId: string,
+    event: ClientEventWithoutRoomId
+  ): Promise<ClientEventWithoutRoomId> {
+    if (event.type !== 'm.room.encryption') {
+      return event;
+    }
+    const encryptedEvent = this.registerEvent(
+      'state_key' in event ? this.stateEvents : this.messageEvents,
+      roomId,
+      event
+    );
+    await encryptedEvent.decrypt();
+    const decryption = encryptedEvent.decryption.read;
+    if (decryption instanceof EventDecryptionSuccess) {
+      return decryption.event;
+    }
+
+    return event;
+  }
+
   dispose(): void {
     this.disposer.run();
   }
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index fc520e32..62c8b0c4 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -26,6 +26,7 @@ import {
   createVerificationRequestObservable,
   createBackupInfoObservable,
   createUserReceiptObservable,
+  createToDeviceEventsObservable,
 } from './context';
 import { createStorage } from './storage';
 import { getAuthJSONRequest } from './request';
@@ -39,6 +40,7 @@ import { DecryptionManager } from './decryption';
 import { initializeCrypto } from './crypto';
 import { MegolmBackup } from './MegolmBackup';
 import { clearUserLocalStorage } from './localStorage';
+import { CallSessions } from './call';
 
 export type InitializeClientResult = {
   ct: ClientContext;
@@ -85,6 +87,7 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
   const pendingMemberRooms = await createPendingMemberRoomObservable(storage, disposer);
 
   const { verificationRequest, onVerificationRequest } = createVerificationRequestObservable();
+  const { toDeviceEvents, onToDeviceEvents } = createToDeviceEventsObservable();
   const secrets = await createSecretsObservable(storage, disposer);
   const backupInfo = await createBackupInfoObservable(requestAuthJSON, secrets, disposer);
   const megolmBackup = new MegolmBackup(machine, requestAuthJSON, backupInfo);
@@ -100,6 +103,7 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
 
   const decryption = new DecryptionManager(machine);
 
+  const callSessions = new CallSessions(storage, syncObservable);
   const roomToTimeline = createTimelines(rooms.join, syncObservable, requestAuthJSON, disposer);
 
   const logoutObservable = createLogoutObservable(syncObservable, disposer);
@@ -149,6 +153,8 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
 
     pendingMemberRooms,
     verificationRequest,
+    toDeviceEvents,
+    callSessions,
     secrets,
     backupInfo,
     megolmBackup,
@@ -168,6 +174,7 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
     onWriteComplete,
     onSyncToken,
     onVerificationRequest,
+    onToDeviceEvents,
   });
 
   disposer.collect(
@@ -182,6 +189,8 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
     logoutManager,
     machineManager,
     verificationRequest,
+    toDeviceEvents,
+    callSessions,
     syncResponseManager
   );
 
diff --git a/src/client/storage/collections/JoinRoom.ts b/src/client/storage/collections/JoinRoom.ts
index 325e0a45..55fc3ab5 100644
--- a/src/client/storage/collections/JoinRoom.ts
+++ b/src/client/storage/collections/JoinRoom.ts
@@ -111,6 +111,44 @@ export type JoinRoomStateCollection = Collection<'id', 'roomId' | 'type', JoinRo
 export const createJoinRoomStateCollection = (driver: StorageDriver): JoinRoomStateCollection =>
   new Collection(ROOM_STATE_STORE_NAME, 'id', driver);
 
+/**
+ * JoinRoomSticky Store
+ */
+const ROOM_STATE_STICKY_NAME = 'JoinRoomSticky';
+
+export const prepareJoinRoomStickyStore = (idb: IDBPDatabase, oldVersion: number) => {
+  if (oldVersion < 3) {
+    const store = idb.createObjectStore(ROOM_STATE_STICKY_NAME, {
+      keyPath: 'id',
+    });
+
+    store.createIndex('roomId', 'roomId', { unique: false });
+    store.createIndex('type', 'type', { unique: false });
+    store.createIndex('expiresAt', 'expiresAt', { unique: false });
+  }
+};
+
+export type JoinRoomStickyObject = Entry<
+  'id',
+  'roomId' | 'type' | 'expiresAt',
+  {
+    id: string;
+    roomId: string;
+    type: string;
+    expiresAt: number;
+    event: MessageEventWithoutRoomId;
+  }
+>;
+
+export type JoinRoomStickyCollection = Collection<
+  'id',
+  'roomId' | 'type' | 'expiresAt',
+  JoinRoomStickyObject
+>;
+
+export const createJoinRoomStickyCollection = (driver: StorageDriver): JoinRoomStickyCollection =>
+  new Collection(ROOM_STATE_STICKY_NAME, 'id', driver);
+
 /**
  * JoinRoomMember Store
  */
diff --git a/src/client/storage/index.ts b/src/client/storage/index.ts
index b69edc6e..81310c71 100644
--- a/src/client/storage/index.ts
+++ b/src/client/storage/index.ts
@@ -46,12 +46,15 @@ import {
   JoinRoomLatestCollection,
   createJoinRoomLatestEventCollection,
   prepareJoinRoomLatestEventStore,
+  prepareJoinRoomStickyStore,
+  JoinRoomStickyCollection,
+  createJoinRoomStickyCollection,
 } from './collections';
 import { getSessionStoreName, Session } from '../sessions';
 
 export * from './utils';
 
-const DATABASE_VERSION = 2;
+const DATABASE_VERSION = 3;
 
 export interface Storage {
   sessionValue: SessionValueCollection;
@@ -61,6 +64,7 @@ export interface Storage {
   joinAccountData: JoinAccountDataCollection;
   joinRoomSummary: JoinRoomSummaryCollection;
   joinRoomState: JoinRoomStateCollection;
+  joinRoomSticky: JoinRoomStickyCollection;
   joinRoomMember: JoinRoomMemberCollection;
   joinRoomLatestEvent: JoinRoomLatestCollection;
 
@@ -102,6 +106,7 @@ export const createStorage = async (
       prepareJoinAccountDataStore(db, oldVersion);
       prepareJoinRoomSummaryStore(db, oldVersion);
       prepareJoinRoomStateStore(db, oldVersion);
+      prepareJoinRoomStickyStore(db, oldVersion);
       prepareJoinRoomMemberStore(db, oldVersion);
       prepareJoinRoomLatestEventStore(db, oldVersion);
 
@@ -138,6 +143,7 @@ export const createStorage = async (
     joinAccountData: createJoinAccountDataCollection(driver),
     joinRoomSummary: createJoinRoomSummaryCollection(driver),
     joinRoomState: createJoinRoomStateCollection(driver),
+    joinRoomSticky: createJoinRoomStickyCollection(driver),
     joinRoomMember: createJoinRoomMemberCollection(driver),
     joinRoomLatestEvent: createJoinRoomLatestEventCollection(driver),
 
diff --git a/src/client/syncWriter/index.ts b/src/client/syncWriter/index.ts
index fab0462c..26b92b3c 100644
--- a/src/client/syncWriter/index.ts
+++ b/src/client/syncWriter/index.ts
@@ -24,6 +24,7 @@ import {
   writeReadReceipt,
   writeUnreadNotifications,
   writeUnreadThreadNotifications,
+  writeJoinRoomSticky,
 } from './utils';
 import { sessionValue } from '../storage/collections';
 
@@ -60,6 +61,7 @@ export const writeSync = async (ct: ClientContext, data: GetSyncOK): Promise<voi
     await writeJoinAccountData(ct, joinRooms, join);
     await writeJoinRoomSummary(ct, joinRooms, join);
     await writeJoinRoomState(ct, joinRooms, join);
+    await writeJoinRoomSticky(ct, joinRooms, join);
     await writeJoinRoomMember(ct, joinRooms, join);
     await writeJoinRoomLatestEvent(ct, joinRooms, join);
 
diff --git a/src/client/syncWriter/utils.ts b/src/client/syncWriter/utils.ts
index 72e7110b..c62840b9 100644
--- a/src/client/syncWriter/utils.ts
+++ b/src/client/syncWriter/utils.ts
@@ -1,6 +1,7 @@
 import { InviteRoom, JoinRoom, KnockRoom, LeaveRoom } from 'neurone/lib/api/matrix/client/v3/sync';
 import {
   AccountDataEvent,
+  MessageEventWithoutRoomId,
   PresenceEvent,
   Receipt,
   ReceiptType,
@@ -11,6 +12,7 @@ import * as inviteRoomUtil from 'neurone/lib/utils/sync/v3/invite';
 import * as knockRoomUtil from 'neurone/lib/utils/sync/v3/knock';
 import * as leaveRoomUtil from 'neurone/lib/utils/sync/v3/leave';
 import { ObjectReader } from 'neurone/lib/utils';
+import { QueryRange } from 'neurone/lib/storage/collection';
 import { ClientContext } from '../context';
 import {
   AccountDataObject,
@@ -29,6 +31,7 @@ import {
   JoinRoomLatestEventObject,
   JoinRoomMemberObject,
   JoinRoomStateObject,
+  JoinRoomStickyObject,
   JoinRoomSummaryObject,
   KnockRoomStateObject,
   LeaveAccountDataObject,
@@ -135,6 +138,58 @@ export const writeJoinRoomState = async (
   await ct.storage.joinRoomState.write.putMultiple(roomStateObjects);
 };
 
+export const writeJoinRoomSticky = async (
+  ct: ClientContext,
+  joinRooms: string[],
+  join: Record<string, JoinRoom>
+): Promise<void> => {
+  const expiredEventKeys = await ct.storage.joinRoomSticky.read.queryIndexKeys(
+    'expiresAt',
+    new QueryRange(0, Date.now())
+  );
+  if (expiredEventKeys.length > 0) {
+    await ct.storage.joinRoomSticky.write.deleteMultiple(expiredEventKeys);
+  }
+
+  const stickyEventObjects: JoinRoomStickyObject[] = joinRooms.flatMap((roomId) => {
+    const joinRoom = join[roomId];
+
+    const stickyEvents = Array.from(
+      (ObjectReader.array(ObjectReader.object(joinRoom, 'msc4354_sticky'), 'events') as
+        | MessageEventWithoutRoomId[]
+        | undefined) ?? []
+    );
+
+    stickyEvents.push(
+      ...joinRoomUtil.roomTimeline(joinRoom).filter((event) => {
+        const remainingMs = ObjectReader.number(event.unsigned, 'msc4354_sticky_duration_ttl_ms');
+        return remainingMs && remainingMs > 0;
+      })
+    );
+
+    const stickyObjects: JoinRoomStickyObject[] = [];
+
+    stickyEvents.forEach((event) => {
+      const remainingMs = ObjectReader.number(event.unsigned, 'msc4354_sticky_duration_ttl_ms');
+      if (!remainingMs || remainingMs <= 0) return;
+
+      const obj: JoinRoomStickyObject = {
+        id: event.event_id,
+        roomId,
+        type: event.type,
+        expiresAt: Date.now() + remainingMs,
+        event,
+      };
+
+      stickyObjects.push(obj);
+    });
+
+    return stickyObjects;
+  });
+
+  await ct.storage.joinRoomSticky.write.putMultiple(stickyEventObjects);
+};
+
 export const writeJoinRoomMember = async (
   ct: ClientContext,
   joinRooms: string[],
diff --git a/src/types/matrix/room.ts b/src/types/matrix/room.ts
index 3984a988..174a6858 100644
--- a/src/types/matrix/room.ts
+++ b/src/types/matrix/room.ts
@@ -76,6 +76,22 @@ export enum MessageEvent {
   Reaction = 'm.reaction',
 }
 
+export enum CallEventType {
+  CallInvite = 'm.call.invite',
+  CallCandidates = 'm.call.candidates',
+  CallAnswer = 'm.call.answer',
+  CallHangup = 'm.call.hangup',
+  CallReject = 'm.call.reject',
+  CallSelectAnswer = 'm.call.select_answer',
+  CallNegotiate = 'm.call.negotiate',
+  CallSDPStreamMetadataChanged = 'm.call.sdp_stream_metadata_changed',
+  CallSDPStreamMetadataChangedPrefix = 'org.matrix.call.sdp_stream_metadata_changed',
+  CallReplaces = 'm.call.replaces',
+  CallEncryptionKeysPrefix = 'io.element.call.encryption_keys',
+  RTCDecline = 'org.matrix.msc4310.rtc.decline',
+  RTCInvite = 'org.matrix.msc4075.rtc.notification',
+}
+
 export enum RoomType {
   Space = 'm.space',
   Call = 'org.matrix.msc3417.call',
diff --git a/vite.config.js b/vite.config.js
index a5af94d8..2c2e59ef 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -17,6 +17,11 @@ const copyFiles = {
       src: 'node_modules/@element-hq/element-call-embedded/dist/*',
       dest: 'public/element-call',
     },
+    {
+      src: 'call.config.json',
+      dest: 'public/element-call',
+      rename: 'config.json',
+    },
     {
       src: 'node_modules/pdfjs-dist/build/pdf.worker.min.mjs',
       dest: '',

From c480817e27a98bb039d40701152afbdef229a35e Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 18 Oct 2026 08:28:07 +0530
Subject: [PATCH 136/158] when dm member left room display it in room name

---
 src/app/hooks/storage/useGetRoomName.ts | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/app/hooks/storage/useGetRoomName.ts b/src/app/hooks/storage/useGetRoomName.ts
index 5c6c6fba..2063209f 100644
--- a/src/app/hooks/storage/useGetRoomName.ts
+++ b/src/app/hooks/storage/useGetRoomName.ts
@@ -1,10 +1,11 @@
 import { useCallback } from 'react';
 import { useAtomValue } from 'jotai';
+import { ObjectReader } from 'neurone/lib/utils';
 import { useClient } from '../useClient';
 import { useObservableValue } from '../useObservableValue';
 import { GetRoomHeroesCallback } from './useRoomHeros';
 import { getMxIdLocalPart } from '../../utils/matrix';
-import { roomMemberContentDisplayname } from '../../utils/room';
+import { roomMemberContentDisplayname, roomMemberContentMembership } from '../../utils/room';
 import { roomToHeroMembersAtom } from '../../state/room/roomToHeroMembers';
 
 export type GetRoomNameCallback = (roomId: string) => string | undefined;
@@ -29,13 +30,16 @@ export const useGetRoomName = (getRoomHeroes: GetRoomHeroesCallback): GetRoomNam
         const member = members?.get(userId);
         if (!member) return getMxIdLocalPart(userId) ?? userId;
         const { content } = member;
+        const membership = roomMemberContentMembership(content);
+
         const username =
           roomMemberContentDisplayname(content)?.trim() || getMxIdLocalPart(userId) || userId;
-        return username;
+
+        return membership === 'leave' ? `${username} (left)` : username;
       });
 
       if (heroNames.length === 0) {
-        return undefined;
+        return 'NO NAME';
       }
 
       if (heroNames.length === 1) {

From a443a5bb3137683be54309780f45c207fc642ecc Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 18 Oct 2026 08:44:42 +0530
Subject: [PATCH 137/158] hide call status bar when call is open

---
 src/app/features/call-status/CallStatus.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/app/features/call-status/CallStatus.tsx b/src/app/features/call-status/CallStatus.tsx
index 404b56e5..343f5172 100644
--- a/src/app/features/call-status/CallStatus.tsx
+++ b/src/app/features/call-status/CallStatus.tsx
@@ -7,7 +7,7 @@ import { CallRoomName } from './CallRoomName';
 import { CallControl } from './CallControl';
 import { ContainerColor } from '../../styles/ContainerColor.css';
 import { useCallMembers, useCallSession } from '../../hooks/useCall';
-import { ScreenSize, useScreenSize, useScreenSizeContext } from '../../hooks/useScreenSize';
+import { ScreenSize, useScreenSize } from '../../hooks/useScreenSize';
 import { MemberGlance } from './MemberGlance';
 import { StatusDivider } from './components';
 import { CallEmbed } from '../../plugins/call/CallEmbed';
@@ -94,11 +94,9 @@ export function CallStatusRenderer() {
   const callEmbed = useCallEmbed();
   const selectedRoom = useSelectedRoom();
 
-  const screenSize = useScreenSizeContext();
-
   if (!callEmbed) return null;
 
-  if (screenSize === ScreenSize.Mobile && callEmbed.roomId === selectedRoom) return null;
+  if (callEmbed.roomId === selectedRoom) return null;
 
   return <CallStatus callEmbed={callEmbed} />;
 }

From 97dbdfe806df2b92419648b674a786aa0b840941 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 18 Oct 2026 08:54:11 +0530
Subject: [PATCH 138/158] show speaking user at first in call status bar

---
 src/app/features/call-status/MemberGlance.tsx | 13 +++++++++++--
 1 file changed, 11 insertions(+), 2 deletions(-)

diff --git a/src/app/features/call-status/MemberGlance.tsx b/src/app/features/call-status/MemberGlance.tsx
index 39ce39a5..aa187900 100644
--- a/src/app/features/call-status/MemberGlance.tsx
+++ b/src/app/features/call-status/MemberGlance.tsx
@@ -1,5 +1,5 @@
 import { Box, config, Icon, Icons, Text } from 'folds';
-import React from 'react';
+import React, { useMemo } from 'react';
 import { UserAvatar } from '../../components/user-avatar';
 import { useMediaAuthentication } from '../../hooks/useMediaAuthentication';
 import { StackedAvatar } from '../../components/stacked-avatar';
@@ -22,7 +22,16 @@ export function MemberGlance({ roomId, users, membersAPI, speakers, max = 6 }: M
   const useAuthentication = useMediaAuthentication();
   const openUserProfile = useOpenUserRoomProfile();
 
-  const visibleMembers = users.slice(0, max);
+  const visibleMembers = useMemo(
+    () =>
+      Array.from(users)
+        .sort((a, b) => {
+          if (speakers.has(a) === speakers.has(b)) return 0;
+          return speakers.has(a) ? -1 : 1;
+        })
+        .slice(0, max),
+    [users, speakers, max]
+  );
   const remainingCount = max && users.length > max ? users.length - max : 0;
 
   return (

From 2339eba18442a7683dabe296bb54bea003d9d548 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 18 Oct 2026 11:37:02 +0530
Subject: [PATCH 139/158] make incomming call dialog works

---
 src/app/components/CallEmbedProvider.tsx   | 174 ++++++++++++---------
 src/client/decryption/DecryptionManager.ts |   3 +-
 2 files changed, 99 insertions(+), 78 deletions(-)

diff --git a/src/app/components/CallEmbedProvider.tsx b/src/app/components/CallEmbedProvider.tsx
index d22b20da..6c346b58 100644
--- a/src/app/components/CallEmbedProvider.tsx
+++ b/src/app/components/CallEmbedProvider.tsx
@@ -18,6 +18,9 @@ import {
   toRem,
 } from 'folds';
 import { putSend } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { roomTimeline } from 'neurone/lib/utils/sync/v3/join';
+import { ClientEventWithoutRoomId } from 'neurone/lib/api/types';
+import { ObjectReader } from 'neurone/lib/utils';
 import {
   CallEmbedContextProvider,
   CallEmbedRefContextProvider,
@@ -37,7 +40,7 @@ import { mDirectAtom } from '../state/mDirectList';
 import { useMediaAuthentication } from '../hooks/useMediaAuthentication';
 import { RoomAvatar, RoomIcon } from './room-avatar';
 import { useRoomNavigate } from '../hooks/useRoomNavigate';
-import { CallEventType, MessageEvent } from '../../types/matrix/room';
+import { CallEventType, MessageEvent, StateEvent, StateEventType } from '../../types/matrix/room';
 import { useLivekitSupport } from '../hooks/useLivekitSupport';
 import { CallAvatarAnimation } from '../styles/Animations.css';
 import { webRTCSupported } from '../utils/rtc';
@@ -48,6 +51,13 @@ import { useGetRoomAvatar } from '../hooks/storage/useGetRoomAvatar';
 import { mxcToHttp } from '../../client/mxcToHttp';
 import { RelationType } from '../../types/matrix/common';
 import { ensureEncryptionSession } from '../hooks/useEnsureRoomEncryptionSession';
+import { SyncValue } from '../../client/sync';
+import { isCallRoom } from '../utils/room';
+import { reference } from '../../client/room/relations';
+import { rContent, rMentions, rRelatesTo } from '../../client/reader';
+import { getJoinRoomStateId } from '../../client/storage/collections';
+import { getPowerLevels } from '../hooks/usePowerLevels';
+import { getRoomPermissionsAPI } from '../hooks/useRoomPermissions';
 
 type IncomingCallInfo = {
   roomId: string;
@@ -234,82 +244,92 @@ function IncomingCallListener({ callEmbed, joined }: IncomingCallListenerProps)
   const [callInfo, setCallInfo] = useState<IncomingCallInfo>();
   const dm = callInfo ? directs.has(callInfo.roomId) : false;
   const startCall = useCallStart();
-  //
-  //   const handleSync = useCallback(
-  //     async (syncValue: SyncValue) => {
-  //       // only process rtc notification reference events.
-  //       // we do not want to wait to decrypt all events.
-  //       if (event.getRelation()?.rel_type !== RelationType.Reference) return;
-  //       if (room?.isCallRoom()) return;
-  //
-  //       if (event.isEncrypted()) {
-  //         if (!event.isBeingDecrypted()) {
-  //           await event.attemptDecryption(mx.getCrypto() as CryptoBackend);
-  //         }
-  //         await event.getDecryptionPromise();
-  //       }
-  //
-  //       if (
-  //         !room ||
-  //         event.getType() !== EventType.RTCNotification ||
-  //         event.getSender() === mx.getSafeUserId() ||
-  //         !data.liveEvent
-  //       ) {
-  //         return;
-  //       }
-  //
-  //       const sender = event.getSender();
-  //       const content = event.getContent<IRTCNotificationContent>();
-  //       const senderTs =
-  //         content.sender_ts - event.getTs() > 20000 ? event.getTs() : content.sender_ts;
-  //       const lifetime = Math.min(content.lifetime, 120000);
-  //       const notificationType = content.notification_type;
-  //       const relation =
-  //         event.getRelation()?.rel_type === RelationType.Reference ? event.getRelation() : undefined;
-  //       const refEventId = relation?.event_id;
-  //
-  //       const mention =
-  //         content['m.mentions']?.room ||
-  //         content['m.mentions']?.user_ids?.includes(mx.getSafeUserId());
-  //       if (!sender || !refEventId || !mention || Date.now() >= senderTs + lifetime) {
-  //         return;
-  //       }
-  //
-  //       const powerLevelsEvent = getStateEvent(room, StateEvent.RoomPowerLevels);
-  //       const powerLevels = getPowersLevelFromMatrixEvent(powerLevelsEvent);
-  //       const creators = getRoomCreatorsForRoomId(mx, room.roomId);
-  //       const permissions = getRoomPermissionsAPI(creators, powerLevels);
-  //
-  //       const hasCallPermission = permissions.stateEvent(
-  //         StateEvent.GroupCallMemberPrefix,
-  //         mx.getSafeUserId()
-  //       );
-  //       if (!hasCallPermission) return;
-  //
-  //       const info: IncomingCallInfo = {
-  //         room,
-  //         sender,
-  //         senderTs,
-  //         lifetime,
-  //         intent:
-  //           'm.call.intent' in content && typeof content['m.call.intent'] === 'string'
-  //             ? content['m.call.intent']
-  //             : undefined,
-  //         notificationType,
-  //         refEventId,
-  //       };
-  //
-  //       setCallInfo(info);
-  //     },
-  //     [mx]
-  //   );
-  //
-  //   useEffect(() => {
-  //     const unsub = ct.sync.observable.subscribe(handleSync)
-  //     return () => {
-  //       unsub()
-  //     }
-  //   }, [ct, handleSync]);
+
+  const handleReferenceEvent = useCallback(
+    async (roomId: string, event: ClientEventWithoutRoomId) => {
+      let targetEvent = event;
+
+      if (ct.encryptedRooms.read.has(roomId) && event.type === MessageEvent.RoomMessageEncrypted) {
+        targetEvent = await ct.decryption.tryDecryptEvent(roomId, event);
+      }
+
+      if (
+        targetEvent.type !== CallEventType.RTCInvite ||
+        targetEvent.sender === ct.session.userId
+      ) {
+        return;
+      }
+
+      const { sender, content } = targetEvent;
+
+      const senderTs = ObjectReader.number(content, 'sender_ts') ?? targetEvent.origin_server_ts;
+      const lifetime = Math.min(ObjectReader.number(content, 'lifetime') ?? 120000, 120000);
+
+      const refEventId = rRelatesTo.eventId(rContent.relatesTo(content));
+
+      const mention =
+        rMentions.room(rContent.mentions(content)) ||
+        rMentions.userIds(rContent.mentions(content))?.includes(ct.session.userId);
+
+      if (!refEventId || !mention || Date.now() >= senderTs + lifetime) {
+        return;
+      }
+
+      const powerLevelsObj = await ct.storage.joinRoomState.read.get(
+        getJoinRoomStateId(roomId, StateEventType.RoomPowerLevels, '')
+      );
+      if (!powerLevelsObj) return;
+      const powerLevels = getPowerLevels(powerLevelsObj);
+      const creators = ct.roomToCreators.read.get(roomId);
+      const permissions = getRoomPermissionsAPI(creators, powerLevels);
+
+      const hasCallPermission = permissions.stateEvent(
+        StateEvent.GroupCallMemberPrefix,
+        ct.session.userId
+      );
+      if (!hasCallPermission) return;
+
+      const info: IncomingCallInfo = {
+        roomId,
+        sender,
+        senderTs,
+        lifetime,
+        intent: ObjectReader.string(content, 'm.call.intent'),
+        silent: !ct.directRooms.read.has(roomId),
+        refEventId,
+      };
+
+      setCallInfo((currentInfo) => {
+        if (currentInfo) return currentInfo;
+        return info;
+      });
+    },
+    [ct]
+  );
+
+  useEffect(() => {
+    const unsub = ct.sync.observable.subscribe(async (syncValue: SyncValue) => {
+      const [, data] = syncValue ?? [];
+      if (!data) return;
+
+      Object.keys(data.rooms?.join ?? {}).forEach(async (roomId) => {
+        if (isCallRoom(ct.roomToType.read.get(roomId))) return;
+
+        const joinedRoom = data.rooms?.join?.[roomId];
+        if (!joinedRoom) return;
+
+        const timelineEvents = roomTimeline(joinedRoom);
+        Array.from(timelineEvents)
+          .reverse()
+          .forEach((event) => {
+            if (reference(event)) handleReferenceEvent(roomId, event);
+          });
+      });
+    });
+    return () => {
+      unsub();
+    };
+  }, [ct, handleReferenceEvent]);
 
   const handleIgnore = useCallback(() => {
     setCallInfo(undefined);
diff --git a/src/client/decryption/DecryptionManager.ts b/src/client/decryption/DecryptionManager.ts
index 1b37844f..60eaf23b 100644
--- a/src/client/decryption/DecryptionManager.ts
+++ b/src/client/decryption/DecryptionManager.ts
@@ -8,6 +8,7 @@ import { ObjectReader } from 'neurone/lib/utils';
 import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
 import { EncryptedEvent, EventDecryptionSuccess } from './EncryptedEvent';
 import { EncryptedEventIndex } from './EncryptedEventIndex';
+import { MessageEvent } from '../../types/matrix/room';
 
 export class DecryptionManager implements Disposable {
   private readonly machine: Machine;
@@ -91,7 +92,7 @@ export class DecryptionManager implements Disposable {
     roomId: string,
     event: ClientEventWithoutRoomId
   ): Promise<ClientEventWithoutRoomId> {
-    if (event.type !== 'm.room.encryption') {
+    if (event.type !== MessageEvent.RoomMessageEncrypted) {
       return event;
     }
     const encryptedEvent = this.registerEvent(

From f527b5f254e9a90e7d623513bf5eb04b20e2b190 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 18 Oct 2026 12:22:20 +0530
Subject: [PATCH 140/158] bring speaking member in glance

---
 src/app/features/call-status/CallRoomName.tsx |  3 +-
 src/app/features/call-status/CallStatus.tsx   | 28 ++++++-------
 src/app/features/call-status/MemberGlance.tsx | 39 ++++++++++++++-----
 3 files changed, 43 insertions(+), 27 deletions(-)

diff --git a/src/app/features/call-status/CallRoomName.tsx b/src/app/features/call-status/CallRoomName.tsx
index 7a56a8ae..2a7e19b4 100644
--- a/src/app/features/call-status/CallRoomName.tsx
+++ b/src/app/features/call-status/CallRoomName.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Chip, Icon, Icons, Text } from 'folds';
+import { Chip, Icon, Icons, Text, toRem } from 'folds';
 import { useAtomValue } from 'jotai';
 import { RoomIcon } from '../../components/room-avatar';
 import { roomToParentsAtom } from '../../state/room/roomToParents';
@@ -45,6 +45,7 @@ export function CallRoomName({ roomId }: CallRoomNameProps) {
     <Chip
       variant="Background"
       radii="Pill"
+      style={{ maxWidth: toRem(296) }}
       before={
         dm ? (
           <Icon size="200" src={Icons.VolumeHigh} filled />
diff --git a/src/app/features/call-status/CallStatus.tsx b/src/app/features/call-status/CallStatus.tsx
index 343f5172..57eb3bef 100644
--- a/src/app/features/call-status/CallStatus.tsx
+++ b/src/app/features/call-status/CallStatus.tsx
@@ -56,28 +56,24 @@ export function CallStatus({ callEmbed }: CallStatusProps) {
           {!compact && (
             <>
               <CallRoomName roomId={roomId} />
-              {speakers.size > 0 && (
-                <>
-                  <StatusDivider />
-                  <span data-spacing-node />
-                  <MemberSpeaking membersAPI={membersAPI} speakers={speakers} />
-                </>
+              <StatusDivider />
+              <span data-spacing-node />
+              {memberVisible && (
+                <MemberGlance
+                  roomId={roomId}
+                  users={users}
+                  membersAPI={membersAPI}
+                  speakers={speakers}
+                />
               )}
+              {speakers.size > 0 && <MemberSpeaking membersAPI={membersAPI} speakers={speakers} />}
             </>
           )}
         </Box>
-        {memberVisible && (
-          <Box shrink="No">
-            <MemberGlance
-              roomId={roomId}
-              users={users}
-              membersAPI={membersAPI}
-              speakers={speakers}
-            />
-          </Box>
+        {compact && memberVisible && (
+          <MemberGlance roomId={roomId} users={users} membersAPI={membersAPI} speakers={speakers} />
         )}
       </Box>
-      {memberVisible && !compact && <StatusDivider />}
       <Box shrink="No" alignItems="Center" gap="Inherit">
         {compact && (
           <Box grow="Yes">
diff --git a/src/app/features/call-status/MemberGlance.tsx b/src/app/features/call-status/MemberGlance.tsx
index aa187900..7190b0c3 100644
--- a/src/app/features/call-status/MemberGlance.tsx
+++ b/src/app/features/call-status/MemberGlance.tsx
@@ -22,16 +22,35 @@ export function MemberGlance({ roomId, users, membersAPI, speakers, max = 6 }: M
   const useAuthentication = useMediaAuthentication();
   const openUserProfile = useOpenUserRoomProfile();
 
-  const visibleMembers = useMemo(
-    () =>
-      Array.from(users)
-        .sort((a, b) => {
-          if (speakers.has(a) === speakers.has(b)) return 0;
-          return speakers.has(a) ? -1 : 1;
-        })
-        .slice(0, max),
-    [users, speakers, max]
-  );
+  const visibleMembers = useMemo(() => {
+    const members = Array.from(users);
+    const visible = members.slice(0, max);
+
+    const visibleSpeakers = members.filter(
+      (member) => speakers.has(member) && !visible.includes(member)
+    );
+
+    for (let i = 0; i < visibleSpeakers.length; i += 1) {
+      const speaker = visibleSpeakers[i];
+      let replaceIndex = -1;
+
+      for (let j = visible.length - 1; j >= 0; j -= 1) {
+        if (!speakers.has(visible[j])) {
+          replaceIndex = j;
+          break;
+        }
+      }
+
+      if (replaceIndex === -1) break;
+
+      visible[replaceIndex] = speaker;
+    }
+
+    // Restore the original order of the visible members
+    const memberOrder = new Map(members.map((member, index) => [member, index]));
+
+    return visible.sort((a, b) => (memberOrder.get(a) ?? 0) - (memberOrder.get(b) ?? 0));
+  }, [users, speakers, max]);
   const remainingCount = max && users.length > max ? users.length - max : 0;
 
   return (

From 9f51e17b869c039926305f44d1465b14522d3e89 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 18 Oct 2026 13:25:20 +0530
Subject: [PATCH 141/158] add camera preview in call view prescreen

---
 src/app/features/call/CallView.tsx      |   2 +
 src/app/features/call/CameraPreview.tsx | 137 ++++++++++++++++++++++++
 2 files changed, 139 insertions(+)
 create mode 100644 src/app/features/call/CameraPreview.tsx

diff --git a/src/app/features/call/CallView.tsx b/src/app/features/call/CallView.tsx
index d2757b93..005f9500 100644
--- a/src/app/features/call/CallView.tsx
+++ b/src/app/features/call/CallView.tsx
@@ -15,6 +15,7 @@ import { CallControls } from './CallControls';
 import { useLivekitSupport } from '../../hooks/useLivekitSupport';
 import { webRTCSupported } from '../../utils/rtc';
 import { useClient } from '../../hooks/useClient';
+import { CameraPreview } from './CameraPreview';
 
 function LivekitServerMissingMessage() {
   return (
@@ -114,6 +115,7 @@ function CallPrescreen() {
               </Badge>
             </Header>
           )}
+          <CameraPreview />
           <CallMemberRenderer members={callMembers} />
           <PrescreenControls canJoin={canJoin} />
           <Box className={css.PrescreenMessage} alignItems="Center">
diff --git a/src/app/features/call/CameraPreview.tsx b/src/app/features/call/CameraPreview.tsx
new file mode 100644
index 00000000..9ca8da7a
--- /dev/null
+++ b/src/app/features/call/CameraPreview.tsx
@@ -0,0 +1,137 @@
+import { Box, config, Icon, Icons, Text, toRem } from 'folds';
+import { useAtomValue } from 'jotai';
+import React, { useEffect, useRef, useState } from 'react';
+import { SequenceCard } from '../../components/sequence-card';
+import { CutoutCard } from '../../components/cutout-card';
+import { useCallPreferencesAtom } from '../../state/hooks/callPreferences';
+
+type CameraStatus = 'idle' | 'loading' | 'ready' | 'denied' | 'not-found' | 'in-use' | 'error';
+
+function useCameraStream(enabled: boolean) {
+  const [stream, setStream] = useState<MediaStream | null>(null);
+  const [status, setStatus] = useState<CameraStatus>('idle');
+
+  useEffect(() => {
+    if (!enabled) {
+      setStream(null);
+      setStatus('idle');
+      return undefined;
+    }
+
+    let cancelled = false;
+    let active: MediaStream | undefined;
+
+    setStatus('loading');
+
+    if (!navigator.mediaDevices?.getUserMedia) {
+      setStatus('error');
+      return undefined;
+    }
+
+    navigator.mediaDevices
+      .getUserMedia({ video: true, audio: false })
+      .then((s) => {
+        if (cancelled) {
+          s.getTracks().forEach((t) => t.stop());
+          return;
+        }
+        active = s;
+        setStream(s);
+        setStatus('ready');
+      })
+      .catch((e: DOMException) => {
+        if (cancelled) return;
+        setStream(null);
+        switch (e.name) {
+          case 'NotAllowedError':
+          case 'SecurityError':
+            setStatus('denied');
+            break;
+          case 'NotFoundError':
+          case 'OverconstrainedError':
+            setStatus('not-found');
+            break;
+          case 'NotReadableError':
+          case 'AbortError':
+            setStatus('in-use');
+            break;
+          default:
+            setStatus('error');
+        }
+      });
+
+    return () => {
+      cancelled = true;
+      active?.getTracks().forEach((t) => t.stop());
+    };
+  }, [enabled]);
+
+  return { stream, status };
+}
+
+const STATUS_MESSAGE: Record<Exclude<CameraStatus, 'ready'>, string> = {
+  idle: 'Camera off',
+  loading: 'Starting camera…',
+  denied: 'Camera permission denied',
+  'not-found': 'No camera found',
+  'in-use': 'Camera is in use by another app',
+  error: 'Unable to access camera',
+};
+
+export function CameraPreview() {
+  const callPrefAtom = useCallPreferencesAtom();
+  const { video } = useAtomValue(callPrefAtom);
+
+  const { stream, status } = useCameraStream(video);
+  const videoRef = useRef<HTMLVideoElement>(null);
+
+  useEffect(() => {
+    const el = videoRef.current;
+    if (el) el.srcObject = stream;
+  }, [stream]);
+
+  return (
+    <SequenceCard
+      variant="SurfaceVariant"
+      direction="Column"
+      style={{
+        padding: config.space.S400,
+      }}
+    >
+      <CutoutCard variant={status === 'idle' || status === 'ready' ? 'Surface' : 'Warning'}>
+        {status === 'ready' ? (
+          <video
+            ref={videoRef}
+            autoPlay
+            muted
+            playsInline
+            style={{
+              backgroundColor: 'black',
+              display: 'block',
+              width: '100%',
+              minHeight: toRem(148),
+              maxHeight: toRem(148),
+              transform: 'scaleX(-1)', // mirror view
+            }}
+          />
+        ) : (
+          <Box
+            style={{
+              minHeight: toRem(148),
+            }}
+            direction="Column"
+            alignItems="Center"
+            justifyContent="Center"
+            gap="200"
+            grow="Yes"
+          >
+            <Icon src={status === 'idle' ? Icons.User : Icons.Warning} />
+            <Text size="L400" align="Center">
+              {STATUS_MESSAGE[status as Exclude<CameraStatus, 'ready'>]}
+            </Text>
+          </Box>
+        )}
+      </CutoutCard>
+    </SequenceCard>
+  );
+}

From a978a5b95d116a269c9a66c1879730aa8913a8ee Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 18 Oct 2026 14:48:56 +0530
Subject: [PATCH 142/158] change how we encode indexeddb key to prevent
 conflicts

---
 src/app/features/call/CameraPreview.tsx         | 2 +-
 src/app/hooks/useSingleSessionTab.ts            | 3 ++-
 src/app/plugins/call/CallControl.ts             | 3 ++-
 src/client/MegolmBackup.ts                      | 3 ++-
 src/client/call/CallSession.ts                  | 3 ++-
 src/client/context.ts                           | 7 ++++---
 src/client/decryption/EncryptedEvent.ts         | 3 ++-
 src/client/room/ThreadTimeline.ts               | 3 ++-
 src/client/room/Timeline.ts                     | 3 ++-
 src/client/room/TimelineBatchManager.ts         | 5 +++--
 src/client/room/index.ts                        | 3 ++-
 src/client/room/local-event/LocalEventOutbox.ts | 3 ++-
 src/client/room/local-event/LocalEventSender.ts | 3 ++-
 src/client/room/messages/MessageBatch.ts        | 3 ++-
 src/client/room/messages/MessageRange.ts        | 3 ++-
 src/client/room/relations/Relations.ts          | 3 ++-
 src/client/room/relations/RelationsProcessor.ts | 3 ++-
 src/client/storage/utils.ts                     | 2 +-
 18 files changed, 37 insertions(+), 21 deletions(-)

diff --git a/src/app/features/call/CameraPreview.tsx b/src/app/features/call/CameraPreview.tsx
index 9ca8da7a..9ef670de 100644
--- a/src/app/features/call/CameraPreview.tsx
+++ b/src/app/features/call/CameraPreview.tsx
@@ -125,7 +125,7 @@ export function CameraPreview() {
             gap="200"
             grow="Yes"
           >
-            <Icon src={status === 'idle' ? Icons.User : Icons.Warning} />
+            <Icon src={status === 'idle' ? Icons.EyeBlind : Icons.Warning} />
             <Text size="L400" align="Center">
               {STATUS_MESSAGE[status as Exclude<CameraStatus, 'ready'>]}
             </Text>
diff --git a/src/app/hooks/useSingleSessionTab.ts b/src/app/hooks/useSingleSessionTab.ts
index ab8da517..ad794712 100644
--- a/src/app/hooks/useSingleSessionTab.ts
+++ b/src/app/hooks/useSingleSessionTab.ts
@@ -1,11 +1,12 @@
 import { useEffect, useMemo } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { getRootPath } from '../pages/pathUtils';
+import { randomStr } from '../utils/common';
 
 export const useSingleSessionTab = (userId?: string) => {
   const broadcast = useMemo(() => new BroadcastChannel('in.cinny.broadcast'), []);
 
-  const tabId = useMemo(() => crypto.randomUUID(), []);
+  const tabId = useMemo(() => randomStr(), []);
   const navigate = useNavigate();
 
   useEffect(() => {
diff --git a/src/app/plugins/call/CallControl.ts b/src/app/plugins/call/CallControl.ts
index 211280f4..3c073af7 100644
--- a/src/app/plugins/call/CallControl.ts
+++ b/src/app/plugins/call/CallControl.ts
@@ -3,13 +3,14 @@ import { ObservableValue } from 'neurone/lib/utils/observable';
 import { Disposable } from 'neurone/lib/utils/disposable';
 import { CallControlState } from './CallControlState';
 import { ElementMediaStateDetail, ElementMediaStatePayload, ElementWidgetActions } from './types';
+import { randomStr } from '../../utils/common';
 
 export enum CallControlEvent {
   StateUpdate = 'state_update',
 }
 
 export class CallControl implements CallControlState, Disposable {
-  private readonly publishKey = crypto.randomUUID();
+  private readonly publishKey = randomStr();
 
   public readonly state: ObservableValue<CallControlState>;
 
diff --git a/src/client/MegolmBackup.ts b/src/client/MegolmBackup.ts
index 5d19c8ba..990d1e57 100644
--- a/src/client/MegolmBackup.ts
+++ b/src/client/MegolmBackup.ts
@@ -7,6 +7,7 @@ import { Base64 } from 'neurone/lib/utils';
 import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
 import { ObservableValue } from 'neurone/lib/utils/observable';
 import { ProgressCallback, responseProgress } from './responseProgress';
+import { randomStr } from '../app/utils/common';
 
 export type ImportBackupIdle = {
   type: 'idle';
@@ -43,7 +44,7 @@ export type BackupRestoreState =
 export class MegolmBackup implements Disposable {
   private readonly disposer = new Disposer();
 
-  private readonly publishKey = crypto.randomUUID();
+  private readonly publishKey = randomStr();
 
   public readonly keyBackup: ObservableValue<KeyBackup | undefined>;
 
diff --git a/src/client/call/CallSession.ts b/src/client/call/CallSession.ts
index 689f8677..39a20d6d 100644
--- a/src/client/call/CallSession.ts
+++ b/src/client/call/CallSession.ts
@@ -10,6 +10,7 @@ import {
   getJoinRoomMemberId,
 } from '../storage/collections';
 import { CALL_APPLICATION_TYPE, DEFAULT_CALL_SLOT_IDS, resolveActiveRtcMembers } from './rtcMember';
+import { randomStr } from '../../app/utils/common';
 
 export type CallMember = {
   kind: 'call.member' | 'rtc.member';
@@ -71,7 +72,7 @@ export class CallSession implements Disposable {
 
   private readonly storage: Storage;
 
-  private readonly publisherKey = crypto.randomUUID();
+  private readonly publisherKey = randomStr();
 
   private callEvents: JoinRoomStateObject[] = [];
 
diff --git a/src/client/context.ts b/src/client/context.ts
index 4dde5291..68065c69 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -32,6 +32,7 @@ import { AccountDataType } from '../types/matrix/accountData';
 import { DecryptionManager } from './decryption';
 import { MegolmBackup } from './MegolmBackup';
 import { CallSessions } from './call';
+import { randomStr } from '../app/utils/common';
 
 export type StateContext = {
   join: {
@@ -929,7 +930,7 @@ export const createPendingMemberRoomObservable = async (
 };
 
 export const createVerificationRequestObservable = () => {
-  const publishKey = crypto.randomUUID();
+  const publishKey = randomStr();
   const verificationRequest = new Observable<InboundVerification | OutboundVerification>(
     publishKey
   );
@@ -944,7 +945,7 @@ export const createVerificationRequestObservable = () => {
 };
 
 export const createToDeviceEventsObservable = () => {
-  const publishKey = crypto.randomUUID();
+  const publishKey = randomStr();
   const toDeviceEvents = new Observable<ProcessedToDeviceEvent[]>(publishKey);
 
   const onToDeviceEvents = (events: ProcessedToDeviceEvent[]) => {
@@ -1036,7 +1037,7 @@ export const createBackupInfoObservable = async (
   secrets: Secrets,
   disposer: Disposer
 ): Promise<ObservableValue<BackupVersionInfo | undefined>> => {
-  const publishKey = crypto.randomUUID();
+  const publishKey = randomStr();
   const backupInfo = new ObservableValue<BackupVersionInfo | undefined>(undefined, publishKey);
 
   const update = async () => {
diff --git a/src/client/decryption/EncryptedEvent.ts b/src/client/decryption/EncryptedEvent.ts
index a48b6d41..42d6f160 100644
--- a/src/client/decryption/EncryptedEvent.ts
+++ b/src/client/decryption/EncryptedEvent.ts
@@ -5,6 +5,7 @@ import {
 } from 'neurone/lib/api/types';
 import { MegolmDecryptionError, RoomEncryption } from 'neurone/lib/crypto/machine';
 import { ObservableValue } from 'neurone/lib/utils/observable';
+import { randomStr } from '../../app/utils/common';
 
 export class EventDecryptionIdle {}
 
@@ -36,7 +37,7 @@ export class EventDecryptionSuccess<T extends ClientEventWithoutRoomId> {
 export class EncryptedEvent<T extends ClientEventWithoutRoomId> {
   private readonly roomEncryption: RoomEncryption;
 
-  private readonly publishKey = crypto.randomUUID();
+  private readonly publishKey = randomStr();
 
   private decryptPromise: Promise<void> | undefined;
 
diff --git a/src/client/room/ThreadTimeline.ts b/src/client/room/ThreadTimeline.ts
index 3cd05844..f92f5063 100644
--- a/src/client/room/ThreadTimeline.ts
+++ b/src/client/room/ThreadTimeline.ts
@@ -23,6 +23,7 @@ import { rRelations, rThread, rUnsigned } from '../reader';
 import { TimelineUtils } from './TimelineUtils';
 import { LocalEventOutbox } from './local-event/LocalEventOutbox';
 import { EventSenderIdle, LocalEvent, LocalEventSender, LocalMessage } from './local-event';
+import { randomStr } from '../../app/utils/common';
 
 export type ThreadSyncData = {
   events: MessageEventWithoutRoomId[];
@@ -31,7 +32,7 @@ export type ThreadSyncData = {
 };
 
 export class ThreadTimeline implements TimelineView, Disposable {
-  private readonly publishKey = crypto.randomUUID();
+  private readonly publishKey = randomStr();
 
   public readonly roomId: string;
 
diff --git a/src/client/room/Timeline.ts b/src/client/room/Timeline.ts
index f3f63468..ce3f9d1c 100644
--- a/src/client/room/Timeline.ts
+++ b/src/client/room/Timeline.ts
@@ -25,9 +25,10 @@ import { getThreadId } from '../../app/utils/room';
 import { TimelineUtils } from './TimelineUtils';
 import { EventSenderIdle, LocalEvent, LocalEventSender, LocalMessage } from './local-event';
 import { LocalEventOutbox } from './local-event/LocalEventOutbox';
+import { randomStr } from '../../app/utils/common';
 
 export class Timeline implements TimelineView, Disposable {
-  private readonly publishKey = crypto.randomUUID();
+  private readonly publishKey = randomStr();
 
   public readonly roomId: string;
 
diff --git a/src/client/room/TimelineBatchManager.ts b/src/client/room/TimelineBatchManager.ts
index 61a72a82..f4bb84e5 100644
--- a/src/client/room/TimelineBatchManager.ts
+++ b/src/client/room/TimelineBatchManager.ts
@@ -1,6 +1,7 @@
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { ObservableValue } from 'neurone/lib/utils/observable';
 import { MessageBatch, Messages, BatchInfo, BatchChange } from './messages';
+import { randomStr } from '../../app/utils/common';
 
 export class TimelineBatchManager {
   private readonly publishKey: string;
@@ -30,7 +31,7 @@ export class TimelineBatchManager {
       this.batch.publish(
         this.publishKey,
         new MessageBatch(
-          crypto.randomUUID(),
+          randomStr(),
           this.batch.read.messages,
           this.batch.read.prev,
           new BatchInfo(undefined, false),
@@ -117,7 +118,7 @@ export class TimelineBatchManager {
 
   public loadEvents(events: MessageEventWithoutRoomId[], prevToken?: string, nextToken?: string) {
     const newBatch = new MessageBatch(
-      crypto.randomUUID(),
+      randomStr(),
       new Messages(events),
       new BatchInfo(prevToken, !prevToken),
       new BatchInfo(nextToken, !nextToken),
diff --git a/src/client/room/index.ts b/src/client/room/index.ts
index 012879e4..52857ff7 100644
--- a/src/client/room/index.ts
+++ b/src/client/room/index.ts
@@ -4,6 +4,7 @@ import { JoinRoom } from 'neurone/lib/api/matrix/client/v3/sync';
 import { MatrixRequest } from 'neurone/lib/matrix-request';
 import { Timeline } from './Timeline';
 import { SyncValue } from '../sync';
+import { randomStr } from '../../app/utils/common';
 
 export * from './Timeline';
 export * from './TimelineView';
@@ -14,7 +15,7 @@ export const createTimelines = (
   request: MatrixRequest,
   disposer: Disposer
 ): ObservableValue<Map<string, Timeline>> => {
-  const publishKey: string = crypto.randomUUID();
+  const publishKey: string = randomStr();
 
   const roomToTimeline = new ObservableValue<Map<string, Timeline>>(new Map(), publishKey);
 
diff --git a/src/client/room/local-event/LocalEventOutbox.ts b/src/client/room/local-event/LocalEventOutbox.ts
index 0e2c67ca..23b532b5 100644
--- a/src/client/room/local-event/LocalEventOutbox.ts
+++ b/src/client/room/local-event/LocalEventOutbox.ts
@@ -1,8 +1,9 @@
 import { ObservableValue } from 'neurone/lib/utils/observable';
 import { EventSenderSuccess, LocalEventSender } from './LocalEventSender';
+import { randomStr } from '../../../app/utils/common';
 
 export class LocalEventOutbox {
-  private readonly publishKey = crypto.randomUUID();
+  private readonly publishKey = randomStr();
 
   public readonly senders: ObservableValue<readonly LocalEventSender[]>;
 
diff --git a/src/client/room/local-event/LocalEventSender.ts b/src/client/room/local-event/LocalEventSender.ts
index 7126823c..ef1a6d37 100644
--- a/src/client/room/local-event/LocalEventSender.ts
+++ b/src/client/room/local-event/LocalEventSender.ts
@@ -3,6 +3,7 @@ import { MatrixError, MatrixRequest, parseMatrixResp } from 'neurone/lib/matrix-
 import { ObservableValue } from 'neurone/lib/utils/observable';
 import to from 'await-to-js';
 import { LocalEvent } from './LocalEvent';
+import { randomStr } from '../../../app/utils/common';
 
 export class EventSenderIdle {
   constructor(public readonly send: () => Promise<void>) {}
@@ -35,7 +36,7 @@ export class LocalEventSender<TContent extends object = object> {
 
   private readonly request: MatrixRequest;
 
-  private readonly publishKey = crypto.randomUUID();
+  private readonly publishKey = randomStr();
 
   public readonly state: ObservableValue<LocalEventSenderState>;
 
diff --git a/src/client/room/messages/MessageBatch.ts b/src/client/room/messages/MessageBatch.ts
index a9d5d8b1..49e71150 100644
--- a/src/client/room/messages/MessageBatch.ts
+++ b/src/client/room/messages/MessageBatch.ts
@@ -1,6 +1,7 @@
 import { BatchChange } from './BatchChange';
 import { BatchInfo } from './BatchInfo';
 import { Messages } from '.';
+import { randomStr } from '../../../app/utils/common';
 
 export class MessageBatch {
   public readonly id: string;
@@ -15,7 +16,7 @@ export class MessageBatch {
 
   static emptyAtForwardEnd(): MessageBatch {
     return new MessageBatch(
-      crypto.randomUUID(),
+      randomStr(),
       new Messages([]),
       new BatchInfo(),
       new BatchInfo(undefined, true),
diff --git a/src/client/room/messages/MessageRange.ts b/src/client/room/messages/MessageRange.ts
index 41e9b0f4..b7808544 100644
--- a/src/client/room/messages/MessageRange.ts
+++ b/src/client/room/messages/MessageRange.ts
@@ -1,6 +1,7 @@
 import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
 import { ObservableValue } from 'neurone/lib/utils/observable';
 import { MessageBatch } from './MessageBatch';
+import { randomStr } from '../../../app/utils/common';
 
 export type RangeInfo = {
   start: number;
@@ -12,7 +13,7 @@ export class MessageRange implements Disposable {
 
   public readonly info: ObservableValue<RangeInfo>;
 
-  private readonly publishKey = crypto.randomUUID();
+  private readonly publishKey = randomStr();
 
   private oldLength: number;
 
diff --git a/src/client/room/relations/Relations.ts b/src/client/room/relations/Relations.ts
index c59029b8..20fb707e 100644
--- a/src/client/room/relations/Relations.ts
+++ b/src/client/room/relations/Relations.ts
@@ -3,6 +3,7 @@ import { Disposable, Disposer } from 'neurone/lib/utils/disposable';
 import { ObservableValue } from 'neurone/lib/utils/observable';
 import { Relation, RelationType } from '../../../types/matrix/common';
 import { rContent, rRelatesTo } from '../../reader';
+import { randomStr } from '../../../app/utils/common';
 
 export class Relations<T extends RelationType, Content extends Relation<T> = Relation<T>>
   implements Disposable
@@ -13,7 +14,7 @@ export class Relations<T extends RelationType, Content extends Relation<T> = Rel
     Map<string, MessageEventWithoutRoomId<Content>[]>
   >;
 
-  private publishKey: string = crypto.randomUUID();
+  private publishKey: string = randomStr();
 
   private disposer = new Disposer();
 
diff --git a/src/client/room/relations/RelationsProcessor.ts b/src/client/room/relations/RelationsProcessor.ts
index 7eeb4478..b9d48f91 100644
--- a/src/client/room/relations/RelationsProcessor.ts
+++ b/src/client/room/relations/RelationsProcessor.ts
@@ -5,9 +5,10 @@ import { MessageEvent } from '../../../types/matrix/room';
 import { Relations } from './Relations';
 import { RelationType, ReactionContent } from '../../../types/matrix/common';
 import { getRedactedEventId, redacted, reference, relation, replaced, replacement } from './utils';
+import { randomStr } from '../../../app/utils/common';
 
 export class RelationsProcessor implements Disposable {
-  private readonly publishKey = crypto.randomUUID();
+  private readonly publishKey = randomStr();
 
   public readonly reactions: Relations<RelationType.Annotation, ReactionContent>;
 
diff --git a/src/client/storage/utils.ts b/src/client/storage/utils.ts
index 77a96abe..a19e1252 100644
--- a/src/client/storage/utils.ts
+++ b/src/client/storage/utils.ts
@@ -1,2 +1,2 @@
-export const encodeKey = (...args: string[]): string => args.join('');
+export const encodeKey = (...args: string[]): string => args.join('+');
 export const MAX_UNICODE = '\u{10FFFF}';

From 45292022c50c84c7ce08059c38c3f073fb6c4fec Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 18 Oct 2026 15:24:21 +0530
Subject: [PATCH 143/158] uninstall matrix-js-sdk

---
 package-lock.json                             | 120 -------
 package.json                                  |   1 -
 .../room/message/EncryptedContent.tsx         |  25 --
 src/app/features/room/message/Message.tsx     |   2 +-
 src/app/features/room/message/index.ts        |   1 -
 src/app/hooks/useAccountData.ts               |  22 --
 src/app/hooks/useAccountDataCallback.ts       |  14 -
 src/app/hooks/useMatrixClient.ts              |  12 -
 src/app/hooks/useMemberEventParser.tsx        | 228 -------------
 src/app/hooks/useMembership.ts                |  28 --
 src/app/hooks/useRelations.ts                 |  25 --
 src/app/hooks/useRoomAccountData.ts           |  29 --
 src/app/hooks/useRoomCreators.ts              |  35 --
 src/app/hooks/useRoomEventReaders.ts          |  56 ----
 src/app/hooks/useRoomMeta.ts                  |  50 ---
 src/app/hooks/useRoomState.ts                 |  50 ---
 src/app/hooks/useStateEvent.ts                |  32 --
 src/app/hooks/useStateEventCallback.ts        |  17 -
 src/app/hooks/useSyncState.ts                 |  14 -
 src/app/hooks/useUserTrustStatusChange.ts     |  16 -
 src/app/pages/client/direct/Direct.tsx        |   1 -
 src/app/pages/client/sidebar/DirectTab.tsx    |   1 -
 src/app/pages/client/sidebar/HomeTab.tsx      |   1 -
 src/app/pages/client/sidebar/SpaceTabs.tsx    |   1 -
 src/app/utils/matrix.ts                       |  61 +---
 src/app/utils/notifications.ts                |  26 --
 src/app/utils/room.ts                         | 307 +-----------------
 27 files changed, 10 insertions(+), 1165 deletions(-)
 delete mode 100644 src/app/features/room/message/EncryptedContent.tsx
 delete mode 100644 src/app/hooks/useAccountData.ts
 delete mode 100644 src/app/hooks/useAccountDataCallback.ts
 delete mode 100644 src/app/hooks/useMatrixClient.ts
 delete mode 100644 src/app/hooks/useMemberEventParser.tsx
 delete mode 100644 src/app/hooks/useMembership.ts
 delete mode 100644 src/app/hooks/useRelations.ts
 delete mode 100644 src/app/hooks/useRoomAccountData.ts
 delete mode 100644 src/app/hooks/useRoomEventReaders.ts
 delete mode 100644 src/app/hooks/useRoomMeta.ts
 delete mode 100644 src/app/hooks/useRoomState.ts
 delete mode 100644 src/app/hooks/useStateEvent.ts
 delete mode 100644 src/app/hooks/useStateEventCallback.ts
 delete mode 100644 src/app/hooks/useSyncState.ts
 delete mode 100644 src/app/hooks/useUserTrustStatusChange.ts
 delete mode 100644 src/app/utils/notifications.ts

diff --git a/package-lock.json b/package-lock.json
index 6095a684..5b81bb57 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -44,7 +44,6 @@
         "jotai": "2.6.0",
         "linkify-react": "4.3.2",
         "linkifyjs": "4.3.2",
-        "matrix-js-sdk": "41.7.0",
         "matrix-widget-api": "1.20.0",
         "millify": "6.1.0",
         "neurone": "0.0.9",
@@ -6217,19 +6216,6 @@
       "integrity": "sha512-ty/fTekppD2fIwRvnZAVdeOiGd1c7YXEixbgJTNzqcxJWKQnjJ/V1bNEEE6hygpM3WjwHFUVK6HTjWSzV4a8sQ==",
       "optional": true
     },
-    "node_modules/content-type": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/content-type/-/content-type-2.0.0.tgz",
-      "integrity": "sha512-j/O/d7GcZCyNl7/hwZAb606rzqkyvaDctLmckbxLzHvFBzTJHuGEdodATcP3yIRoDrLHkIATJuvzbFlp/ki2cQ==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/express"
-      }
-    },
     "node_modules/conventional-commit-types": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/conventional-commit-types/-/conventional-commit-types-3.0.0.tgz",
@@ -9034,18 +9020,6 @@
       "integrity": "sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==",
       "dev": true
     },
-    "node_modules/is-network-error": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/is-network-error/-/is-network-error-1.3.2.tgz",
-      "integrity": "sha512-PhBY86zaxNZUuWP6h13Vu5oFe0XY6/UlKzQnYFELzGVHygP3MxmvTfYSG7GN3aIab/iWudSMgjSnG9Dq+nHrgA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=16"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/is-number": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/is-number/-/is-number-7.0.0.tgz",
@@ -9468,15 +9442,6 @@
         "node": ">=4.0"
       }
     },
-    "node_modules/jwt-decode": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-4.0.0.tgz",
-      "integrity": "sha512-+KJGIyHgkGuIq3IEBNftfhW/LfWhXUIY6OmyVWjliu5KH1y0fw7VQ8YndE2O4qZdMSd9SqbnC8GOcZEy0Om7sA==",
-      "license": "MIT",
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
@@ -10018,19 +9983,6 @@
         "url": "https://github.com/chalk/wrap-ansi?sponsor=1"
       }
     },
-    "node_modules/loglevel": {
-      "version": "1.9.2",
-      "resolved": "https://registry.npmjs.org/loglevel/-/loglevel-1.9.2.tgz",
-      "integrity": "sha512-HgMmCqIJSAKqo68l0rS2AanEWfkxaZ5wNiEFb5ggm08lDs9Xl2KxBlX3PTcaD2chBM1gXAYf491/M2Rv8Jwayg==",
-      "license": "MIT",
-      "engines": {
-        "node": ">= 0.6.0"
-      },
-      "funding": {
-        "type": "tidelift",
-        "url": "https://tidelift.com/funding/github/npm/loglevel"
-      }
-    },
     "node_modules/longest": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/longest/-/longest-2.0.1.tgz",
@@ -10105,36 +10057,6 @@
         "node": ">= 0.4"
       }
     },
-    "node_modules/matrix-events-sdk": {
-      "version": "0.0.1",
-      "resolved": "https://registry.npmjs.org/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz",
-      "integrity": "sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/matrix-js-sdk": {
-      "version": "41.7.0",
-      "resolved": "https://registry.npmjs.org/matrix-js-sdk/-/matrix-js-sdk-41.7.0.tgz",
-      "integrity": "sha512-MP0xNv/VVRbshq00TE6EVo77IIXsQk0KjiVtgKV0t9j/V77a6Klt00QrrO0XykkTUsNC0+mQeBMxnx75rZO86Q==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "@babel/runtime": "^7.12.5",
-        "@matrix-org/matrix-sdk-crypto-wasm": "^18.3.1",
-        "another-json": "^0.2.0",
-        "bs58": "^6.0.0",
-        "content-type": "^2.0.0",
-        "jwt-decode": "^4.0.0",
-        "loglevel": "^1.9.2",
-        "matrix-events-sdk": "0.0.1",
-        "matrix-widget-api": "^1.16.1",
-        "oidc-client-ts": "^3.0.1",
-        "p-retry": "8",
-        "sdp-transform": "^3.0.0",
-        "unhomoglyph": "^1.0.6"
-      },
-      "engines": {
-        "node": ">=22.0.0"
-      }
-    },
     "node_modules/matrix-widget-api": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/matrix-widget-api/-/matrix-widget-api-1.20.0.tgz",
@@ -10599,18 +10521,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/oidc-client-ts": {
-      "version": "3.2.1",
-      "resolved": "https://registry.npmjs.org/oidc-client-ts/-/oidc-client-ts-3.2.1.tgz",
-      "integrity": "sha512-hS5AJ5s/x4bXhHvNJT1v+GGvzHUwdRWqNQQbSrp10L1IRmzfRGKQ3VWN3dstJb+oF3WtAyKezwD2+dTEIyBiAA==",
-      "license": "Apache-2.0",
-      "dependencies": {
-        "jwt-decode": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=18"
-      }
-    },
     "node_modules/once": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz",
@@ -10750,21 +10660,6 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/p-retry": {
-      "version": "8.0.0",
-      "resolved": "https://registry.npmjs.org/p-retry/-/p-retry-8.0.0.tgz",
-      "integrity": "sha512-kFVqH1HxOHp8LupNsOys7bSV09VYTRLxarH/mokO4Rqhk6wGi70E0jh4VzvVGXfEVNggHoHLAMWsQqHyU1Ey9A==",
-      "license": "MIT",
-      "dependencies": {
-        "is-network-error": "^1.3.0"
-      },
-      "engines": {
-        "node": ">=22"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/parent-module": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
@@ -11731,15 +11626,6 @@
         "compute-scroll-into-view": "^3.0.2"
       }
     },
-    "node_modules/sdp-transform": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/sdp-transform/-/sdp-transform-3.0.0.tgz",
-      "integrity": "sha512-gfYVRGxjHkGF2NPeUWHw5u6T/KGFtS5/drPms73gaSuMaVHKCY3lpLnGDfswVQO0kddeePoti09AwhYP4zA8dQ==",
-      "license": "MIT",
-      "bin": {
-        "sdp-verify": "checker.js"
-      }
-    },
     "node_modules/semver": {
       "version": "7.6.3",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.6.3.tgz",
@@ -12698,12 +12584,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/unhomoglyph": {
-      "version": "1.0.6",
-      "resolved": "https://registry.npmjs.org/unhomoglyph/-/unhomoglyph-1.0.6.tgz",
-      "integrity": "sha512-7uvcWI3hWshSADBu4JpnyYbTVc7YlhF5GDW/oPD5AxIxl34k4wXR3WDkPnzLxkN32LiTCTKMQLtKVZiwki3zGg==",
-      "license": "MIT"
-    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.1.tgz",
diff --git a/package.json b/package.json
index 5915bfb9..a78dec11 100644
--- a/package.json
+++ b/package.json
@@ -68,7 +68,6 @@
     "jotai": "2.6.0",
     "linkify-react": "4.3.2",
     "linkifyjs": "4.3.2",
-    "matrix-js-sdk": "41.7.0",
     "matrix-widget-api": "1.20.0",
     "millify": "6.1.0",
     "neurone": "0.0.9",
diff --git a/src/app/features/room/message/EncryptedContent.tsx b/src/app/features/room/message/EncryptedContent.tsx
deleted file mode 100644
index f3e61417..00000000
--- a/src/app/features/room/message/EncryptedContent.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { MatrixEvent, MatrixEventEvent, MatrixEventHandlerMap } from 'matrix-js-sdk';
-import React, { ReactNode, useEffect, useState } from 'react';
-import { MessageEvent } from '../../../../types/matrix/room';
-
-type EncryptedContentProps = {
-  mEvent: MatrixEvent;
-  children: () => ReactNode;
-};
-
-export function EncryptedContent({ mEvent, children }: EncryptedContentProps) {
-  const [, toggleEncrypted] = useState(mEvent.getType() === MessageEvent.RoomMessageEncrypted);
-
-  useEffect(() => {
-    toggleEncrypted(mEvent.getType() === MessageEvent.RoomMessageEncrypted);
-    const handleDecrypted: MatrixEventHandlerMap[MatrixEventEvent.Decrypted] = (event) => {
-      toggleEncrypted(event.getType() === MessageEvent.RoomMessageEncrypted);
-    };
-    mEvent.on(MatrixEventEvent.Decrypted, handleDecrypted);
-    return () => {
-      mEvent.removeListener(MatrixEventEvent.Decrypted, handleDecrypted);
-    };
-  }, [mEvent]);
-
-  return <>{children()}</>;
-}
diff --git a/src/app/features/room/message/Message.tsx b/src/app/features/room/message/Message.tsx
index 7dd462f7..eadeb648 100644
--- a/src/app/features/room/message/Message.tsx
+++ b/src/app/features/room/message/Message.tsx
@@ -52,7 +52,7 @@ import {
   Username,
   UsernameBold,
 } from '../../../components/message';
-import { canEditEvent, fallbackReply, getReactionGroups, getReplyId } from '../../../utils/room';
+import { canEditEvent, getReactionGroups } from '../../../utils/room';
 import { MessageLayout, MessageSpacing } from '../../../state/settings';
 import { useRecentEmoji } from '../../../hooks/useRecentEmoji';
 import * as css from './styles.css';
diff --git a/src/app/features/room/message/index.ts b/src/app/features/room/message/index.ts
index d79e2aab..3e4544a9 100644
--- a/src/app/features/room/message/index.ts
+++ b/src/app/features/room/message/index.ts
@@ -1,3 +1,2 @@
 export * from './Reactions';
 export * from './Message';
-export * from './EncryptedContent';
diff --git a/src/app/hooks/useAccountData.ts b/src/app/hooks/useAccountData.ts
deleted file mode 100644
index 30e47b47..00000000
--- a/src/app/hooks/useAccountData.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useState, useCallback } from 'react';
-import { useMatrixClient } from './useMatrixClient';
-import { useAccountDataCallback } from './useAccountDataCallback';
-
-export function useAccountData(eventType: string) {
-  const mx = useMatrixClient();
-  const [event, setEvent] = useState(() => mx.getAccountData(eventType));
-
-  useAccountDataCallback(
-    mx,
-    useCallback(
-      (evt) => {
-        if (evt.getType() === eventType) {
-          setEvent(evt);
-        }
-      },
-      [eventType, setEvent]
-    )
-  );
-
-  return event;
-}
diff --git a/src/app/hooks/useAccountDataCallback.ts b/src/app/hooks/useAccountDataCallback.ts
deleted file mode 100644
index e12f1c4d..00000000
--- a/src/app/hooks/useAccountDataCallback.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ClientEvent, ClientEventHandlerMap, MatrixClient } from 'matrix-js-sdk';
-import { useEffect } from 'react';
-
-export const useAccountDataCallback = (
-  mx: MatrixClient,
-  onAccountData: ClientEventHandlerMap[ClientEvent.AccountData]
-) => {
-  useEffect(() => {
-    mx.on(ClientEvent.AccountData, onAccountData);
-    return () => {
-      mx.removeListener(ClientEvent.AccountData, onAccountData);
-    };
-  }, [mx, onAccountData]);
-};
diff --git a/src/app/hooks/useMatrixClient.ts b/src/app/hooks/useMatrixClient.ts
deleted file mode 100644
index 5ff6d90d..00000000
--- a/src/app/hooks/useMatrixClient.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-import { createContext, useContext } from 'react';
-import { MatrixClient } from 'matrix-js-sdk';
-
-const MatrixClientContext = createContext<MatrixClient | null>(null);
-
-export const MatrixClientProvider = MatrixClientContext.Provider;
-
-export function useMatrixClient(): MatrixClient {
-  const mx = useContext(MatrixClientContext);
-  if (!mx) throw new Error('MatrixClient not initialized!');
-  return mx;
-}
diff --git a/src/app/hooks/useMemberEventParser.tsx b/src/app/hooks/useMemberEventParser.tsx
deleted file mode 100644
index 8a59aaad..00000000
--- a/src/app/hooks/useMemberEventParser.tsx
+++ /dev/null
@@ -1,228 +0,0 @@
-import React, { ReactNode } from 'react';
-import { IconSrc, Icons } from 'folds';
-import { MatrixEvent } from 'matrix-js-sdk';
-import { IMemberContent, Membership } from '../../types/matrix/room';
-import { getMxIdLocalPart } from '../utils/matrix';
-import { isMembershipChanged } from '../utils/room';
-
-export type ParsedResult = {
-  icon: IconSrc;
-  body: ReactNode;
-};
-
-export type MemberEventParser = (mEvent: MatrixEvent) => ParsedResult;
-
-export const useMemberEventParser = (): MemberEventParser => {
-  const parseMemberEvent: MemberEventParser = (mEvent) => {
-    const content = mEvent.getContent<IMemberContent>();
-    const prevContent = mEvent.getPrevContent() as IMemberContent;
-    const senderId = mEvent.getSender();
-    const userId = mEvent.getStateKey();
-    const reason = typeof content.reason === 'string' ? content.reason : undefined;
-
-    if (!senderId || !userId)
-      return {
-        icon: Icons.User,
-        body: 'Broken membership event',
-      };
-
-    const senderName = getMxIdLocalPart(senderId);
-    const userName =
-      typeof content.displayname === 'string'
-        ? content.displayname || getMxIdLocalPart(userId)
-        : getMxIdLocalPart(userId);
-
-    if (isMembershipChanged(mEvent)) {
-      if (content.membership === Membership.Invite) {
-        if (prevContent.membership === Membership.Knock) {
-          return {
-            icon: Icons.ArrowGoRightPlus,
-            body: (
-              <>
-                <b>{senderName}</b>
-                {' accepted '}
-                <b>{userName}</b>
-                {`'s join request `}
-                {reason}
-              </>
-            ),
-          };
-        }
-
-        return {
-          icon: Icons.ArrowGoRightPlus,
-          body: (
-            <>
-              <b>{senderName}</b>
-              {' invited '}
-              <b>{userName}</b> {reason}
-            </>
-          ),
-        };
-      }
-
-      if (content.membership === Membership.Knock) {
-        return {
-          icon: Icons.ArrowGoRightPlus,
-          body: (
-            <>
-              <b>{userName}</b>
-              {' request to join room '}
-              {reason}
-            </>
-          ),
-        };
-      }
-
-      if (content.membership === Membership.Join) {
-        return {
-          icon: Icons.ArrowGoRight,
-          body: (
-            <>
-              <b>{userName}</b>
-              {' joined the room'}
-            </>
-          ),
-        };
-      }
-
-      if (content.membership === Membership.Leave) {
-        if (prevContent.membership === Membership.Invite) {
-          return {
-            icon: Icons.ArrowGoRightCross,
-            body:
-              senderId === userId ? (
-                <>
-                  <b>{userName}</b>
-                  {' rejected the invitation '}
-                  {reason}
-                </>
-              ) : (
-                <>
-                  <b>{senderName}</b>
-                  {' rejected '}
-                  <b>{userName}</b>
-                  {`'s join request `}
-                  {reason}
-                </>
-              ),
-          };
-        }
-
-        if (prevContent.membership === Membership.Knock) {
-          return {
-            icon: Icons.ArrowGoRightCross,
-            body:
-              senderId === userId ? (
-                <>
-                  <b>{userName}</b>
-                  {' revoked joined request '}
-                  {reason}
-                </>
-              ) : (
-                <>
-                  <b>{senderName}</b>
-                  {' revoked '}
-                  <b>{userName}</b>
-                  {`'s invite `}
-                  {reason}
-                </>
-              ),
-          };
-        }
-
-        if (prevContent.membership === Membership.Ban) {
-          return {
-            icon: Icons.ArrowGoLeft,
-            body: (
-              <>
-                <b>{senderName}</b>
-                {' unbanned '}
-                <b>{userName}</b> {reason}
-              </>
-            ),
-          };
-        }
-
-        return {
-          icon: Icons.ArrowGoLeft,
-          body:
-            senderId === userId ? (
-              <>
-                <b>{userName}</b>
-                {' left the room '}
-                {reason}
-              </>
-            ) : (
-              <>
-                <b>{senderName}</b>
-                {' kicked '}
-                <b>{userName}</b> {reason}
-              </>
-            ),
-        };
-      }
-
-      if (content.membership === Membership.Ban) {
-        return {
-          icon: Icons.ArrowGoLeft,
-          body: (
-            <>
-              <b>{senderName}</b>
-              {' banned '}
-              <b>{userName}</b> {reason}
-            </>
-          ),
-        };
-      }
-    }
-
-    if (content.displayname !== prevContent.displayname) {
-      const prevUserName =
-        typeof prevContent.displayname === 'string'
-          ? prevContent.displayname || getMxIdLocalPart(userId)
-          : getMxIdLocalPart(userId);
-
-      return {
-        icon: Icons.Mention,
-        body:
-          typeof content.displayname === 'string' ? (
-            <>
-              <b>{prevUserName}</b>
-              {' changed display name to '}
-              <b>{userName}</b>
-            </>
-          ) : (
-            <>
-              <b>{prevUserName}</b>
-              {' removed their display name '}
-            </>
-          ),
-      };
-    }
-    if (content.avatar_url !== prevContent.avatar_url) {
-      return {
-        icon: Icons.User,
-        body:
-          content.avatar_url && typeof content.avatar_url === 'string' ? (
-            <>
-              <b>{userName}</b>
-              {' changed their avatar'}
-            </>
-          ) : (
-            <>
-              <b>{userName}</b>
-              {' removed their avatar '}
-            </>
-          ),
-      };
-    }
-
-    return {
-      icon: Icons.User,
-      body: 'Membership event with no changes',
-    };
-  };
-
-  return parseMemberEvent;
-};
diff --git a/src/app/hooks/useMembership.ts b/src/app/hooks/useMembership.ts
deleted file mode 100644
index dbdd527e..00000000
--- a/src/app/hooks/useMembership.ts
+++ /dev/null
@@ -1,28 +0,0 @@
-import { useEffect, useState } from 'react';
-import { Room, RoomMemberEvent, RoomMemberEventHandlerMap } from 'matrix-js-sdk';
-import { Membership } from '../../types/matrix/room';
-
-export const useMembership = (room: Room, userId: string): Membership => {
-  const member = room.getMember(userId);
-
-  const [membership, setMembership] = useState<Membership>(
-    () => (member?.membership as Membership | undefined) ?? Membership.Leave
-  );
-
-  useEffect(() => {
-    const handleMembershipChange: RoomMemberEventHandlerMap[RoomMemberEvent.Membership] = (
-      event,
-      m
-    ) => {
-      if (event.getRoomId() === room.roomId && m.userId === userId) {
-        setMembership((m.membership as Membership | undefined) ?? Membership.Leave);
-      }
-    };
-    member?.on(RoomMemberEvent.Membership, handleMembershipChange);
-    return () => {
-      member?.removeListener(RoomMemberEvent.Membership, handleMembershipChange);
-    };
-  }, [room, member, userId]);
-
-  return membership;
-};
diff --git a/src/app/hooks/useRelations.ts b/src/app/hooks/useRelations.ts
deleted file mode 100644
index 51978de5..00000000
--- a/src/app/hooks/useRelations.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { useEffect, useState } from 'react';
-import { RelationsEvent, type Relations } from 'matrix-js-sdk/lib/models/relations';
-
-export const useRelations = <T>(
-  relations: Relations,
-  getRelations: (relations: Relations) => T
-) => {
-  const [data, setData] = useState(() => getRelations(relations));
-
-  useEffect(() => {
-    const handleUpdate = () => {
-      setData(getRelations(relations));
-    };
-    relations.on(RelationsEvent.Add, handleUpdate);
-    relations.on(RelationsEvent.Redaction, handleUpdate);
-    relations.on(RelationsEvent.Remove, handleUpdate);
-    return () => {
-      relations.removeListener(RelationsEvent.Add, handleUpdate);
-      relations.removeListener(RelationsEvent.Redaction, handleUpdate);
-      relations.removeListener(RelationsEvent.Remove, handleUpdate);
-    };
-  }, [relations, getRelations]);
-
-  return data;
-};
diff --git a/src/app/hooks/useRoomAccountData.ts b/src/app/hooks/useRoomAccountData.ts
deleted file mode 100644
index e344ff83..00000000
--- a/src/app/hooks/useRoomAccountData.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
-import { useCallback, useEffect, useState } from 'react';
-
-export const useRoomAccountData = (room: Room): Map<string, object> => {
-  const getAccountData = useCallback((): Map<string, object> => {
-    const accountData = new Map<string, object>();
-
-    Array.from(room.accountData.entries()).forEach(([type, mEvent]) => {
-      const content = mEvent.getContent();
-      accountData.set(type, content);
-    });
-
-    return accountData;
-  }, [room]);
-
-  const [accountData, setAccountData] = useState<Map<string, object>>(getAccountData);
-
-  useEffect(() => {
-    const handleEvent: RoomEventHandlerMap[RoomEvent.AccountData] = () => {
-      setAccountData(getAccountData());
-    };
-    room.on(RoomEvent.AccountData, handleEvent);
-    return () => {
-      room.removeListener(RoomEvent.AccountData, handleEvent);
-    };
-  }, [room, getAccountData]);
-
-  return accountData;
-};
diff --git a/src/app/hooks/useRoomCreators.ts b/src/app/hooks/useRoomCreators.ts
index 911f9b2e..55333598 100644
--- a/src/app/hooks/useRoomCreators.ts
+++ b/src/app/hooks/useRoomCreators.ts
@@ -1,32 +1,7 @@
-import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
-import { IRoomCreateContent, StateEvent } from '../../types/matrix/room';
 import { creatorsSupported } from '../utils/matrix';
-import { getStateEvent } from '../utils/room';
 import { useObservableValue } from './useObservableValue';
 import { useClient } from './useClient';
 
-export const getRoomCreators = (createEvent: MatrixEvent): Set<string> => {
-  const createContent = createEvent.getContent<IRoomCreateContent>();
-
-  const creators: Set<string> = new Set();
-
-  if (!creatorsSupported(createContent.room_version)) return creators;
-
-  if (createEvent.event.sender) {
-    creators.add(createEvent.event.sender);
-  }
-
-  if ('additional_creators' in createContent && Array.isArray(createContent.additional_creators)) {
-    createContent.additional_creators.forEach((creator) => {
-      if (typeof creator === 'string') {
-        creators.add(creator);
-      }
-    });
-  }
-
-  return creators;
-};
-
 export const useRoomCreators = (roomId: string): Set<string> | undefined => {
   const ct = useClient();
   const roomToCreators = useObservableValue(ct.roomToCreators);
@@ -37,13 +12,3 @@ export const useRoomCreators = (roomId: string): Set<string> | undefined => {
 
   return roomToCreators.get(roomId);
 };
-
-export const getRoomCreatorsForRoomId = (mx: MatrixClient, roomId: string): Set<string> => {
-  const room = mx.getRoom(roomId);
-  if (!room) return new Set();
-
-  const createEvent = getStateEvent(room, StateEvent.RoomCreate);
-  if (!createEvent) return new Set();
-
-  return getRoomCreators(createEvent);
-};
diff --git a/src/app/hooks/useRoomEventReaders.ts b/src/app/hooks/useRoomEventReaders.ts
deleted file mode 100644
index 6222bf92..00000000
--- a/src/app/hooks/useRoomEventReaders.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
-import { useEffect, useState } from 'react';
-
-const getEventReaders = (room: Room, evtId?: string) => {
-  if (!evtId) return [];
-
-  // if eventId is locally generated
-  // we don't have read receipt for it yet
-  if (!evtId.startsWith('$')) return [];
-
-  const liveEvents = room.getLiveTimeline().getEvents();
-  const userIds: string[] = [];
-
-  for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
-    userIds.splice(userIds.length, 0, ...room.getUsersReadUpTo(liveEvents[i]));
-    if (liveEvents[i].getId() === evtId) break;
-  }
-
-  return [...new Set(userIds)];
-};
-
-export const useRoomEventReaders = (room: Room, eventId?: string): string[] => {
-  const [readers, setReaders] = useState<string[]>(() => getEventReaders(room, eventId));
-
-  useEffect(() => {
-    setReaders(getEventReaders(room, eventId));
-
-    const handleReceipt: RoomEventHandlerMap[RoomEvent.Receipt] = (event, r) => {
-      if (r.roomId !== room.roomId) return;
-      setReaders(getEventReaders(room, eventId));
-    };
-
-    const handleLocalEcho: RoomEventHandlerMap[RoomEvent.LocalEchoUpdated] = (
-      event,
-      r,
-      oldEventId
-    ) => {
-      // update members on local event id replaced
-      // with server generated id
-      if (r.roomId !== room.roomId || !oldEventId) return;
-      if (oldEventId.startsWith('$')) return;
-      if (oldEventId !== eventId) return;
-
-      setReaders(getEventReaders(room, event.getId()));
-    };
-
-    room.on(RoomEvent.Receipt, handleReceipt);
-    room.on(RoomEvent.LocalEchoUpdated, handleLocalEcho);
-    return () => {
-      room.removeListener(RoomEvent.Receipt, handleReceipt);
-      room.removeListener(RoomEvent.LocalEchoUpdated, handleLocalEcho);
-    };
-  }, [room, eventId]);
-
-  return readers;
-};
diff --git a/src/app/hooks/useRoomMeta.ts b/src/app/hooks/useRoomMeta.ts
deleted file mode 100644
index 086c3a56..00000000
--- a/src/app/hooks/useRoomMeta.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import { useEffect, useState } from 'react';
-import { RoomJoinRulesEventContent } from 'matrix-js-sdk/lib/types';
-import { Room, RoomEvent, RoomEventHandlerMap } from 'matrix-js-sdk';
-import { StateEvent } from '../../types/matrix/room';
-import { useStateEvent } from './useStateEvent';
-
-export const useRoomAvatar = (room: Room, dm?: boolean): string | undefined => {
-  const avatarEvent = useStateEvent(room, StateEvent.RoomAvatar);
-
-  if (dm) {
-    return room.getAvatarFallbackMember()?.getMxcAvatarUrl();
-  }
-  const content = avatarEvent?.getContent();
-  const avatarMxc = content && typeof content.url === 'string' ? content.url : undefined;
-
-  return avatarMxc;
-};
-
-export const useRoomName = (room: Room): string => {
-  const [name, setName] = useState(room.name);
-
-  useEffect(() => {
-    setName(room.name);
-
-    const handleRoomNameChange: RoomEventHandlerMap[RoomEvent.Name] = () => {
-      setName(room.name);
-    };
-    room.on(RoomEvent.Name, handleRoomNameChange);
-    return () => {
-      room.removeListener(RoomEvent.Name, handleRoomNameChange);
-    };
-  }, [room]);
-
-  return name;
-};
-
-export const useRoomTopic = (room: Room): string | undefined => {
-  const topicEvent = useStateEvent(room, StateEvent.RoomTopic);
-
-  const content = topicEvent?.getContent();
-  const topic = content && typeof content.topic === 'string' ? content.topic : undefined;
-
-  return topic;
-};
-
-export const useRoomJoinRule = (room: Room): RoomJoinRulesEventContent | undefined => {
-  const mEvent = useStateEvent(room, StateEvent.RoomJoinRules);
-  const joinRuleContent = mEvent?.getContent<RoomJoinRulesEventContent>();
-  return joinRuleContent;
-};
diff --git a/src/app/hooks/useRoomState.ts b/src/app/hooks/useRoomState.ts
deleted file mode 100644
index a62b4762..00000000
--- a/src/app/hooks/useRoomState.ts
+++ /dev/null
@@ -1,50 +0,0 @@
-import {
-  Direction,
-  MatrixEvent,
-  Room,
-  RoomStateEvent,
-  RoomStateEventHandlerMap,
-} from 'matrix-js-sdk';
-import { useCallback, useEffect, useState } from 'react';
-import { StateEvent } from '../../types/matrix/room';
-
-export type StateKeyToEvents = Map<string, MatrixEvent>;
-export type StateTypeToState = Map<string, StateKeyToEvents>;
-
-export const useRoomState = (room: Room): StateTypeToState => {
-  const getState = useCallback((): StateTypeToState => {
-    const roomState = room.getLiveTimeline().getState(Direction.Forward);
-    const state: StateTypeToState = new Map();
-
-    if (!roomState) return state;
-
-    roomState.events.forEach((stateKeyToEvents, eventType) => {
-      if (eventType === StateEvent.RoomMember) {
-        // Ignore room members from state on purpose;
-        return;
-      }
-      const kToE: StateKeyToEvents = new Map();
-      stateKeyToEvents.forEach((mEvent, stateKey) => kToE.set(stateKey, mEvent));
-
-      state.set(eventType, kToE);
-    });
-
-    return state;
-  }, [room]);
-
-  const [state, setState] = useState(getState);
-
-  useEffect(() => {
-    const roomState = room.getLiveTimeline().getState(Direction.Forward);
-    const handler: RoomStateEventHandlerMap[RoomStateEvent.Events] = () => {
-      setState(getState());
-    };
-
-    roomState?.on(RoomStateEvent.Events, handler);
-    return () => {
-      roomState?.removeListener(RoomStateEvent.Events, handler);
-    };
-  }, [room, getState]);
-
-  return state;
-};
diff --git a/src/app/hooks/useStateEvent.ts b/src/app/hooks/useStateEvent.ts
deleted file mode 100644
index 7bc66aa2..00000000
--- a/src/app/hooks/useStateEvent.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Room } from 'matrix-js-sdk';
-import { useCallback, useMemo } from 'react';
-import { useStateEventCallback } from './useStateEventCallback';
-import { useForceUpdate } from './useForceUpdate';
-import { getStateEvent } from '../utils/room';
-import { StateEvent } from '../../types/matrix/room';
-
-export const useStateEvent = (room: Room, eventType: StateEvent, stateKey = '') => {
-  const [updateCount, forceUpdate] = useForceUpdate();
-
-  useStateEventCallback(
-    room.client,
-    useCallback(
-      (event) => {
-        if (
-          event.getRoomId() === room.roomId &&
-          event.getType() === eventType &&
-          event.getStateKey() === stateKey
-        ) {
-          forceUpdate();
-        }
-      },
-      [room, eventType, stateKey, forceUpdate]
-    )
-  );
-
-  return useMemo(
-    () => getStateEvent(room, eventType, stateKey),
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [room, eventType, stateKey, updateCount]
-  );
-};
diff --git a/src/app/hooks/useStateEventCallback.ts b/src/app/hooks/useStateEventCallback.ts
deleted file mode 100644
index 85be3aeb..00000000
--- a/src/app/hooks/useStateEventCallback.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { MatrixClient, MatrixEvent, RoomState, RoomStateEvent } from 'matrix-js-sdk';
-import { useEffect } from 'react';
-
-export type StateEventCallback = (
-  event: MatrixEvent,
-  state: RoomState,
-  lastStateEvent: MatrixEvent | null
-) => void;
-
-export const useStateEventCallback = (mx: MatrixClient, onStateEvent: StateEventCallback) => {
-  useEffect(() => {
-    mx.on(RoomStateEvent.Events, onStateEvent);
-    return () => {
-      mx.removeListener(RoomStateEvent.Events, onStateEvent);
-    };
-  }, [mx, onStateEvent]);
-};
diff --git a/src/app/hooks/useSyncState.ts b/src/app/hooks/useSyncState.ts
deleted file mode 100644
index be8a6ef2..00000000
--- a/src/app/hooks/useSyncState.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { ClientEvent, ClientEventHandlerMap, MatrixClient } from 'matrix-js-sdk';
-import { useEffect } from 'react';
-
-export const useSyncState = (
-  mx: MatrixClient | undefined,
-  onChange: ClientEventHandlerMap[ClientEvent.Sync]
-): void => {
-  useEffect(() => {
-    mx?.on(ClientEvent.Sync, onChange);
-    return () => {
-      mx?.removeListener(ClientEvent.Sync, onChange);
-    };
-  }, [mx, onChange]);
-};
diff --git a/src/app/hooks/useUserTrustStatusChange.ts b/src/app/hooks/useUserTrustStatusChange.ts
deleted file mode 100644
index 56a9e385..00000000
--- a/src/app/hooks/useUserTrustStatusChange.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { CryptoEvent, CryptoEventHandlerMap } from 'matrix-js-sdk/lib/crypto-api';
-import { useEffect } from 'react';
-import { useMatrixClient } from './useMatrixClient';
-
-export const useUserTrustStatusChange = (
-  onChange: CryptoEventHandlerMap[CryptoEvent.UserTrustStatusChanged]
-) => {
-  const mx = useMatrixClient();
-
-  useEffect(() => {
-    mx.on(CryptoEvent.UserTrustStatusChanged, onChange);
-    return () => {
-      mx.removeListener(CryptoEvent.UserTrustStatusChanged, onChange);
-    };
-  }, [mx, onChange]);
-};
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index e6b25e49..bd9f2df3 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -38,7 +38,6 @@ import { useNavToActivePathMapper } from '../../../hooks/useNavToActivePathMappe
 import { useDirectRooms } from './useDirectRooms';
 import { PageNav, PageNavContent, PageNavHeader } from '../../../components/page';
 import { useClosedNavCategoriesAtom } from '../../../state/hooks/closedNavCategories';
-import { markAsRead } from '../../../utils/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
 import {
diff --git a/src/app/pages/client/sidebar/DirectTab.tsx b/src/app/pages/client/sidebar/DirectTab.tsx
index 2c2be29e..6b3b3396 100644
--- a/src/app/pages/client/sidebar/DirectTab.tsx
+++ b/src/app/pages/client/sidebar/DirectTab.tsx
@@ -15,7 +15,6 @@ import { UnreadBadge } from '../../../components/unread-badge';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useDirectRooms } from '../direct/useDirectRooms';
-import { markAsRead } from '../../../utils/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
 import {
diff --git a/src/app/pages/client/sidebar/HomeTab.tsx b/src/app/pages/client/sidebar/HomeTab.tsx
index b694af6a..ec150786 100644
--- a/src/app/pages/client/sidebar/HomeTab.tsx
+++ b/src/app/pages/client/sidebar/HomeTab.tsx
@@ -15,7 +15,6 @@ import { UnreadBadge } from '../../../components/unread-badge';
 import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useHomeRooms } from '../home/useHomeRooms';
-import { markAsRead } from '../../../utils/notifications';
 import { stopPropagation } from '../../../utils/keyboard';
 import { useSetting } from '../../../state/hooks/settings';
 import {
diff --git a/src/app/pages/client/sidebar/SpaceTabs.tsx b/src/app/pages/client/sidebar/SpaceTabs.tsx
index 488b18e2..a084e83e 100644
--- a/src/app/pages/client/sidebar/SpaceTabs.tsx
+++ b/src/app/pages/client/sidebar/SpaceTabs.tsx
@@ -78,7 +78,6 @@ import { ScreenSize, useScreenSizeContext } from '../../../hooks/useScreenSize';
 import { useNavToActivePathAtom } from '../../../state/hooks/navToActivePath';
 import { useOpenedSidebarFolderAtom } from '../../../state/hooks/openedSidebarFolder';
 import { usePowerLevels, usePowerLevelsState } from '../../../hooks/usePowerLevels';
-import { markAsRead } from '../../../utils/notifications';
 import { copyToClipboard } from '../../../utils/dom';
 import { stopPropagation } from '../../../utils/keyboard';
 import { getMatrixToRoom } from '../../../plugins/matrix-to';
diff --git a/src/app/utils/matrix.ts b/src/app/utils/matrix.ts
index 848fed57..5559077e 100644
--- a/src/app/utils/matrix.ts
+++ b/src/app/utils/matrix.ts
@@ -3,14 +3,11 @@ import {
   decryptAttachment,
   encryptAttachment,
 } from 'browser-encrypt-attachment';
-import { MatrixClient, MatrixEvent } from 'matrix-js-sdk';
 import to from 'await-to-js';
 import { putAccountData } from 'neurone/lib/api/matrix/client/v3/user';
 import { MatrixError } from 'neurone/lib/matrix-request';
 import { IImageInfo, IThumbnailContent, IVideoInfo } from '../../types/matrix/common';
 import { AccountDataType } from '../../types/matrix/accountData';
-import { getStateEvent } from './room';
-import { StateEvent } from '../../types/matrix/room';
 import { ClientContext } from '../../client/context';
 import { JoinRoomMemberObject } from '../../client/storage/collections';
 import { rError } from '../../client/reader';
@@ -33,26 +30,6 @@ export const isRoomId = (id: string): boolean => id.startsWith('!');
 
 export const isRoomAlias = (id: string): boolean => validMxId(id) && id.startsWith('#');
 
-export const getCanonicalAliasRoomId = (mx: MatrixClient, alias: string): string | undefined =>
-  mx
-    .getRooms()
-    ?.find(
-      (room) =>
-        room.getCanonicalAlias() === alias &&
-        getStateEvent(room, StateEvent.RoomTombstone) === undefined
-    )?.roomId;
-
-export const getCanonicalAliasOrRoomId = (mx: MatrixClient, roomId: string): string => {
-  const room = mx.getRoom(roomId);
-  if (!room) return roomId;
-  if (getStateEvent(room, StateEvent.RoomTombstone) !== undefined) return roomId;
-  const alias = room.getCanonicalAlias();
-  if (alias && getCanonicalAliasRoomId(mx, alias) === roomId) {
-    return alias;
-  }
-  return roomId;
-};
-
 export const getImageInfo = (img: HTMLImageElement, fileOrBlob: File | Blob): IImageInfo => {
   const info: IImageInfo = {};
   info.w = img.width;
@@ -109,9 +86,13 @@ export const encryptFile = async (
 }> => {
   const dataBuffer = await file.arrayBuffer();
   const encryptedAttachment = await encryptAttachment(dataBuffer);
-  const encFile = new File([encryptedAttachment.data], file.name, {
-    type: file.type,
-  });
+  const encFile = new File(
+    [encryptedAttachment.data],
+    file instanceof File ? file.name : 'Untitled',
+    {
+      type: file.type,
+    }
+  );
   return {
     encInfo: encryptedAttachment.info,
     file: encFile,
@@ -131,14 +112,6 @@ export const decryptFile = async (
 
 export type UploadContent = File | Blob;
 
-export const matrixEventByRecency = (m1: MatrixEvent, m2: MatrixEvent) => m2.getTs() - m1.getTs();
-
-export const factoryEventSentBy = (senderId: string) => (ev: MatrixEvent) =>
-  ev.getSender() === senderId;
-
-export const eventWithShortcode = (ev: MatrixEvent) =>
-  typeof ev.getContent().shortcode === 'string';
-
 export const getUserDirectRooms = (ct: ClientContext, userId: string): string[] => {
   const rooms = Object.keys(ct.roomToSummary.read);
   const directRooms = rooms.filter((roomId) => {
@@ -243,26 +216,6 @@ export const removeRoomIdFromMDirect = async (ct: ClientContext, roomId: string)
   );
 };
 
-export const mxcUrlToHttp = (
-  mx: MatrixClient,
-  mxcUrl: string,
-  useAuthentication?: boolean,
-  width?: number,
-  height?: number,
-  resizeMethod?: string,
-  allowDirectLinks?: boolean,
-  allowRedirects?: boolean
-): string | null =>
-  mx.mxcUrlToHttp(
-    mxcUrl,
-    width,
-    height,
-    resizeMethod,
-    allowDirectLinks,
-    allowRedirects,
-    useAuthentication
-  );
-
 export const downloadMedia = async (src: string): Promise<Blob> => {
   // this request is authenticated by service worker
   const res = await fetch(src, { method: 'GET' });
diff --git a/src/app/utils/notifications.ts b/src/app/utils/notifications.ts
deleted file mode 100644
index a23bd1a4..00000000
--- a/src/app/utils/notifications.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { MatrixClient, ReceiptType } from 'matrix-js-sdk';
-
-export async function markAsRead(mx: MatrixClient, roomId: string, privateReceipt: boolean) {
-  const room = mx.getRoom(roomId);
-  if (!room) return;
-
-  const timeline = room.getLiveTimeline().getEvents();
-  const readEventId = room.getEventReadUpTo(mx.getUserId()!);
-
-  const getLatestValidEvent = () => {
-    for (let i = timeline.length - 1; i >= 0; i -= 1) {
-      const latestEvent = timeline[i];
-      if (latestEvent.getId() === readEventId) return null;
-      if (!latestEvent.isSending()) return latestEvent;
-    }
-    return null;
-  };
-  if (timeline.length === 0) return;
-  const latestEvent = getLatestValidEvent();
-  if (latestEvent === null) return;
-
-  await mx.sendReadReceipt(
-    latestEvent,
-    privateReceipt ? ReceiptType.ReadPrivate : ReceiptType.Read
-  );
-}
diff --git a/src/app/utils/room.ts b/src/app/utils/room.ts
index 72dcce08..7167d3e1 100644
--- a/src/app/utils/room.ts
+++ b/src/app/utils/room.ts
@@ -1,99 +1,14 @@
 import { IconName, IconSrc } from 'folds';
-import {
-  EventTimeline,
-  EventTimelineSet,
-  EventType,
-  IPushRule,
-  IPushRules,
-  MatrixClient,
-  MatrixEvent,
-  MsgType,
-  NotificationCountType,
-  RelationType,
-} from 'matrix-js-sdk';
-import { CryptoBackend } from 'matrix-js-sdk/lib/common-crypto/CryptoBackend';
 import { MessageEventWithoutRoomId, RoomMembership } from 'neurone/lib/api/types';
-import { AccountDataEvent } from '../../types/matrix/accountData';
-import {
-  JoinRule,
-  Membership,
-  MessageEvent,
-  NotificationType,
-  RoomToParents,
-  RoomType,
-  StateEvent,
-  UnreadInfo,
-} from '../../types/matrix/room';
+import { JoinRule, MessageEvent, RoomToParents, RoomType } from '../../types/matrix/room';
 import { JoinRoomMemberObject } from '../../client/storage/collections';
-import { MentionsContent, ReactionContent } from '../../types/matrix/common';
+import { MentionsContent, MsgType, ReactionContent, RelationType } from '../../types/matrix/common';
 import { ClientContext } from '../../client/context';
 import { rContent, rInReplyTo, rRelatesTo } from '../../client/reader';
 import { replaced } from '../../client/room/relations';
 
 export const isCallRoom = (roomType?: string) => roomType === 'org.matrix.msc3417.call';
 
-export const getStateEvent = (
-  room: Room,
-  eventType: StateEvent,
-  stateKey = ''
-): MatrixEvent | undefined =>
-  room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getStateEvents(eventType, stateKey) ??
-  undefined;
-
-export const getStateEvents = (room: Room, eventType: StateEvent): MatrixEvent[] =>
-  room.getLiveTimeline().getState(EventTimeline.FORWARDS)?.getStateEvents(eventType) ?? [];
-
-export const getAccountData = (
-  mx: MatrixClient,
-  eventType: AccountDataEvent
-): MatrixEvent | undefined => mx.getAccountData(eventType as any);
-
-export const getMDirects = (mDirectEvent: MatrixEvent): Set<string> => {
-  const roomIds = new Set<string>();
-  const userIdToDirects = mDirectEvent?.getContent();
-
-  if (userIdToDirects === undefined) return roomIds;
-
-  Object.keys(userIdToDirects).forEach((userId) => {
-    const directs = userIdToDirects[userId];
-    if (Array.isArray(directs)) {
-      directs.forEach((id) => {
-        if (typeof id === 'string') roomIds.add(id);
-      });
-    }
-  });
-
-  return roomIds;
-};
-
-export const isSpace = (room: Room | null): boolean => {
-  if (!room) return false;
-  const event = getStateEvent(room, StateEvent.RoomCreate);
-  if (!event) return false;
-  return event.getContent().type === RoomType.Space;
-};
-
-export const isRoom = (room: Room | null): boolean => {
-  if (!room) return false;
-  const event = getStateEvent(room, StateEvent.RoomCreate);
-  if (!event) return true;
-  return event.getContent().type !== RoomType.Space;
-};
-
-export const isUnsupportedRoom = (room: Room | null): boolean => {
-  if (!room) return false;
-  const event = getStateEvent(room, StateEvent.RoomCreate);
-  if (!event) return true; // Consider room unsupported if m.room.create event doesn't exist
-  return event.getContent().type !== undefined && event.getContent().type !== RoomType.Space;
-};
-
-export function isValidChild(mEvent: MatrixEvent): boolean {
-  return (
-    mEvent.getType() === StateEvent.SpaceChild &&
-    Array.isArray(mEvent.getContent<{ via: string[] }>().via)
-  );
-}
-
 export const getAllParents = (roomToParents: RoomToParents, roomId: string): Set<string> => {
   const allParents = new Set<string>();
 
@@ -109,15 +24,6 @@ export const getAllParents = (roomToParents: RoomToParents, roomId: string): Set
   return allParents;
 };
 
-export const getSpaceChildren = (room: Room) =>
-  getStateEvents(room, StateEvent.SpaceChild).reduce<string[]>((filtered, mEvent) => {
-    const stateKey = mEvent.getStateKey();
-    if (isValidChild(mEvent) && stateKey) {
-      filtered.push(stateKey);
-    }
-    return filtered;
-  }, []);
-
 export const mapParentWithChildren = (
   roomToParents: RoomToParents,
   roomId: string,
@@ -135,15 +41,6 @@ export const mapParentWithChildren = (
   });
 };
 
-export const getRoomToParents = (mx: MatrixClient): RoomToParents => {
-  const map: RoomToParents = new Map();
-  mx.getRooms()
-    .filter((room) => isSpace(room))
-    .forEach((room) => mapParentWithChildren(map, room.roomId, getSpaceChildren(room)));
-
-  return map;
-};
-
 export const getOrphanParents = (roomToParents: RoomToParents, roomId: string): string[] => {
   const parents = getAllParents(roomToParents, roomId);
   const orphanParents = Array.from(parents).filter(
@@ -153,105 +50,6 @@ export const getOrphanParents = (roomToParents: RoomToParents, roomId: string):
   return orphanParents;
 };
 
-export const isMutedRule = (rule: IPushRule) =>
-  // Check for empty actions (new spec) or dont_notify (deprecated)
-  (rule.actions.length === 0 || rule.actions[0] === 'dont_notify') &&
-  rule.conditions?.[0]?.kind === 'event_match';
-
-export const findMutedRule = (overrideRules: IPushRule[], roomId: string) =>
-  overrideRules.find((rule) => rule.rule_id === roomId && isMutedRule(rule));
-
-export const getNotificationType = (mx: MatrixClient, roomId: string): NotificationType => {
-  let roomPushRule: IPushRule | undefined;
-  try {
-    roomPushRule = mx.getRoomPushRule('global', roomId);
-  } catch {
-    roomPushRule = undefined;
-  }
-
-  if (!roomPushRule) {
-    const overrideRules = mx.getAccountData(EventType.PushRules)?.getContent<IPushRules>()
-      ?.global?.override;
-    if (!overrideRules) return NotificationType.Default;
-
-    return findMutedRule(overrideRules, roomId) ? NotificationType.Mute : NotificationType.Default;
-  }
-
-  if (roomPushRule.actions[0] === 'notify') return NotificationType.AllMessages;
-  return NotificationType.MentionsAndKeywords;
-};
-
-const NOTIFICATION_EVENT_TYPES = [
-  'm.room.create',
-  'm.room.message',
-  'm.room.encrypted',
-  'm.room.member',
-  'm.sticker',
-];
-export const isNotificationEvent = (mEvent: MatrixEvent) => {
-  const eType = mEvent.getType();
-  if (!NOTIFICATION_EVENT_TYPES.includes(eType)) {
-    return false;
-  }
-  if (eType === 'm.room.member') return false;
-
-  if (mEvent.isRedacted()) return false;
-  if (mEvent.getRelation()?.rel_type === 'm.replace') return false;
-
-  return true;
-};
-
-export const roomHaveNotification = (room: Room): boolean => {
-  const total = room.getUnreadNotificationCount(NotificationCountType.Total);
-  const highlight = room.getUnreadNotificationCount(NotificationCountType.Highlight);
-
-  return total > 0 || highlight > 0;
-};
-
-export const roomHaveUnread = (mx: MatrixClient, room: Room) => {
-  const userId = mx.getUserId();
-  if (!userId) return false;
-  const readUpToId = room.getEventReadUpTo(userId);
-  const liveEvents = room.getLiveTimeline().getEvents();
-
-  if (liveEvents[liveEvents.length - 1]?.getSender() === userId) {
-    return false;
-  }
-
-  for (let i = liveEvents.length - 1; i >= 0; i -= 1) {
-    const event = liveEvents[i];
-    if (!event) return false;
-    if (event.getId() === readUpToId) return false;
-    if (isNotificationEvent(event)) return true;
-  }
-  return true;
-};
-
-export const getUnreadInfo = (room: Room): UnreadInfo => {
-  const total = room.getUnreadNotificationCount(NotificationCountType.Total);
-  const highlight = room.getUnreadNotificationCount(NotificationCountType.Highlight);
-  return {
-    roomId: room.roomId,
-    highlight,
-    total: highlight > total ? highlight : total,
-  };
-};
-
-export const getUnreadInfos = (mx: MatrixClient): UnreadInfo[] => {
-  const unreadInfos = mx.getRooms().reduce<UnreadInfo[]>((unread, room) => {
-    if (room.isSpaceRoom()) return unread;
-    if (room.getMyMembership() !== 'join') return unread;
-    if (getNotificationType(mx, room.roomId) === NotificationType.Mute) return unread;
-
-    if (roomHaveNotification(room) || roomHaveUnread(mx, room)) {
-      unread.push(getUnreadInfo(room));
-    }
-
-    return unread;
-  }, []);
-  return unreadInfos;
-};
-
 export const getRoomIconSrc = (
   icons: Record<IconName, IconSrc>,
   roomType?: string,
@@ -280,35 +78,6 @@ export const getRoomIconSrc = (
   return icons.Hash;
 };
 
-export const getRoomAvatarUrl = (
-  mx: MatrixClient,
-  room: Room,
-  size: 32 | 96 = 32,
-  useAuthentication = false
-): string | undefined => {
-  const mxcUrl = room.getMxcAvatarUrl();
-  return mxcUrl
-    ? mx.mxcUrlToHttp(mxcUrl, size, size, 'crop', undefined, false, useAuthentication) ?? undefined
-    : undefined;
-};
-
-export const getDirectRoomAvatarUrl = (
-  mx: MatrixClient,
-  room: Room,
-  size: 32 | 96 = 32,
-  useAuthentication = false
-): string | undefined => {
-  const mxcUrl = room.getAvatarFallbackMember()?.getMxcAvatarUrl();
-
-  if (!mxcUrl) {
-    return getRoomAvatarUrl(mx, room, size, useAuthentication);
-  }
-
-  return (
-    mx.mxcUrlToHttp(mxcUrl, size, size, 'crop', undefined, false, useAuthentication) ?? undefined
-  );
-};
-
 export const trimReplyFromBody = (body: string): string => {
   const match = body.match(/^> <.+?> .+\n(>.*\n)*?\n/m);
   if (!match) return body;
@@ -341,13 +110,6 @@ export const parseReplyFormattedBody = (
   return `<mx-reply><blockquote>${replyToLink}${userLink}<br />${formattedBody}</blockquote></mx-reply>`;
 };
 
-export const getMemberDisplayName = (room: Room, userId: string): string | undefined => {
-  const member = room.getMember(userId);
-  const name = member?.rawDisplayName;
-  if (name === userId) return undefined;
-  return name;
-};
-
 export const roomMemberContentDisplayname = (content: object): string | undefined => {
   const name =
     'displayname' in content && typeof content.displayname === 'string'
@@ -384,26 +146,6 @@ export const getMemberSearchStr = (
   query.startsWith('@') || query.indexOf(':') > -1 ? member.userId : getName(member.userId),
 ];
 
-export const getMemberAvatarMxc = (room: Room, userId: string): string | undefined => {
-  const member = room.getMember(userId);
-  return member?.getMxcAvatarUrl();
-};
-
-export const isMembershipChanged = (mEvent: MatrixEvent): boolean =>
-  mEvent.getContent().membership !== mEvent.getPrevContent().membership ||
-  mEvent.getContent().reason !== mEvent.getPrevContent().reason;
-
-export const decryptAllTimelineEvent = async (mx: MatrixClient, timeline: EventTimeline) => {
-  const crypto = mx.getCrypto();
-  if (!crypto) return;
-  const decryptionPromises = timeline
-    .getEvents()
-    .filter((event) => event.isEncrypted())
-    .reverse()
-    .map((event) => event.attemptDecryption(crypto as CryptoBackend, { isRetry: true }));
-  await Promise.allSettled(decryptionPromises);
-};
-
 export const getReactionContent = (eventId: string, key: string, shortcode?: string) => ({
   'm.relates_to': {
     event_id: eventId,
@@ -413,13 +155,6 @@ export const getReactionContent = (eventId: string, key: string, shortcode?: str
   shortcode,
 });
 
-export const getEventReactions = (timelineSet: EventTimelineSet, eventId: string) =>
-  timelineSet.relations.getChildEventsForEvent(
-    eventId,
-    RelationType.Annotation,
-    EventType.Reaction
-  );
-
 export type ReactionGroup = {
   key: string;
   users: Set<string>;
@@ -513,27 +248,6 @@ export const getThreadId = (event: MessageEventWithoutRoomId): string | undefine
   return undefined;
 };
 
-export const getEventEdits = (timelineSet: EventTimelineSet, eventId: string, eventType: string) =>
-  timelineSet.relations.getChildEventsForEvent(eventId, RelationType.Replace, eventType);
-
-export const getLatestEdit = (
-  targetEvent: MatrixEvent,
-  editEvents: MatrixEvent[]
-): MatrixEvent | undefined => {
-  const eventByTargetSender = (rEvent: MatrixEvent) =>
-    rEvent.getSender() === targetEvent.getSender();
-  return editEvents.sort((m1, m2) => m2.getTs() - m1.getTs()).find(eventByTargetSender);
-};
-
-export const getEditedEvent = (
-  mEventId: string,
-  mEvent: MatrixEvent,
-  timelineSet: EventTimelineSet
-): MatrixEvent | undefined => {
-  const edits = getEventEdits(timelineSet, mEventId, mEvent.getType());
-  return edits && getLatestEdit(mEvent, edits.getRelations());
-};
-
 export const canEditEvent = (ct: ClientContext, event: MessageEventWithoutRoomId) => {
   const { content } = event;
   const msgType = rContent.msgtype(content);
@@ -549,23 +263,6 @@ export const canEditEvent = (ct: ClientContext, event: MessageEventWithoutRoomId
   );
 };
 
-export const getLatestEditableEvt = (
-  timeline: EventTimeline,
-  canEdit: (mEvent: MatrixEvent) => boolean
-): MatrixEvent | undefined => {
-  const events = timeline.getEvents();
-
-  for (let i = events.length - 1; i >= 0; i -= 1) {
-    const evt = events[i];
-    if (canEdit(evt)) return evt;
-  }
-  return undefined;
-};
-
-export const reactionOrEditEvent = (mEvent: MatrixEvent) =>
-  mEvent.getRelation()?.rel_type === RelationType.Annotation ||
-  mEvent.getRelation()?.rel_type === RelationType.Replace;
-
 export const getMentionContent = (userIds: string[], room: boolean): MentionsContent => {
   const mMentions: MentionsContent = {};
   if (userIds.length > 0) {

From ad65f100882313ad01aa4ec06d4f04f434825624 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 18 Oct 2026 19:29:11 +0530
Subject: [PATCH 144/158] use transaction id for handling remote echo

---
 src/client/room/ThreadTimeline.ts             |  3 +-
 src/client/room/Timeline.ts                   |  3 +-
 .../room/local-event/LocalEventOutbox.ts      | 29 ++++++++++---------
 3 files changed, 18 insertions(+), 17 deletions(-)

diff --git a/src/client/room/ThreadTimeline.ts b/src/client/room/ThreadTimeline.ts
index f92f5063..7255e84e 100644
--- a/src/client/room/ThreadTimeline.ts
+++ b/src/client/room/ThreadTimeline.ts
@@ -162,8 +162,7 @@ export class ThreadTimeline implements TimelineView, Disposable {
       this.syncThreadMeta(events);
     }
 
-    const eventsWithRemoteEcho = this.outbox.getSentEventIds().filter((e) => this.findEvent(e));
-    this.outbox.removeByEventIds(eventsWithRemoteEcho);
+    this.outbox.handleRemoteEcho(events);
   }
 
   private async getMessages(
diff --git a/src/client/room/Timeline.ts b/src/client/room/Timeline.ts
index ce3f9d1c..5684a0e5 100644
--- a/src/client/room/Timeline.ts
+++ b/src/client/room/Timeline.ts
@@ -103,8 +103,7 @@ export class Timeline implements TimelineView, Disposable {
 
     this.batchManager.handleSync(messageEvents, limited, prevToken);
 
-    const eventsWithRemoteEcho = this.outbox.getSentEventIds().filter((e) => this.findEvent(e));
-    this.outbox.removeByEventIds(eventsWithRemoteEcho);
+    this.outbox.handleRemoteEcho(messageEvents);
   }
 
   private syncThreads(
diff --git a/src/client/room/local-event/LocalEventOutbox.ts b/src/client/room/local-event/LocalEventOutbox.ts
index 23b532b5..73fe1c60 100644
--- a/src/client/room/local-event/LocalEventOutbox.ts
+++ b/src/client/room/local-event/LocalEventOutbox.ts
@@ -1,6 +1,8 @@
 import { ObservableValue } from 'neurone/lib/utils/observable';
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { EventSenderSuccess, LocalEventSender } from './LocalEventSender';
 import { randomStr } from '../../../app/utils/common';
+import { rUnsigned } from '../../reader';
 
 export class LocalEventOutbox {
   private readonly publishKey = randomStr();
@@ -34,21 +36,22 @@ export class LocalEventOutbox {
     this.senders.publish(this.publishKey, n);
   }
 
-  public removeByEventIds(eventIds: readonly string[]): void {
-    const ids = new Set(eventIds);
+  public handleRemoteEcho(events: MessageEventWithoutRoomId[]): void {
+    const waitingSenders = this.items.filter((sender) => {
+      const { txnId } = sender.localEvent;
+      const eventId =
+        sender.state.read instanceof EventSenderSuccess ? sender.state.read.eventId : undefined;
 
-    const n = this.items.filter(
-      (s) => !(s.state.read instanceof EventSenderSuccess && ids.has(s.state.read.eventId))
-    );
-    if (n.length === this.items.length) {
+      const received = events.some(
+        (event) => rUnsigned.transactionId(event.unsigned) === txnId || event.event_id === eventId
+      );
+
+      return !received;
+    });
+
+    if (waitingSenders.length === this.items.length) {
       return;
     }
-    this.senders.publish(this.publishKey, n);
-  }
-
-  public getSentEventIds(): string[] {
-    return this.items
-      .map((s) => (s.state.read instanceof EventSenderSuccess ? s.state.read.eventId : undefined))
-      .filter<string>((eId) => typeof eId === 'string');
+    this.senders.publish(this.publishKey, waitingSenders);
   }
 }

From f979a994e0654601a1178c6b753307ce4d77d292 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 24 Oct 2026 12:16:38 +0530
Subject: [PATCH 145/158] remove thread notification on read

---
 src/app/state/room/roomToNotifications.ts | 36 ++++-------------------
 src/client/context.ts                     | 16 ++++++++++
 src/client/initialize.ts                  |  7 +++++
 src/client/syncWriter/utils.ts            | 19 ++++++++----
 4 files changed, 43 insertions(+), 35 deletions(-)

diff --git a/src/app/state/room/roomToNotifications.ts b/src/app/state/room/roomToNotifications.ts
index 199a1d9a..5d0268e9 100644
--- a/src/app/state/room/roomToNotifications.ts
+++ b/src/app/state/room/roomToNotifications.ts
@@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react';
 import { UnreadNotificationCounts } from 'neurone/lib/api/types';
 import { useRoomsNotificationPreferencesContext } from '../../hooks/useRoomsNotificationPreferences';
 import { ClientContext } from '../../../client/context';
-import { AsyncStatus, useAsyncCallbackValue } from '../../hooks/useAsyncCallback';
+import { useObservableValue } from '../../hooks/useObservableValue';
 
 export type Notifications = UnreadNotificationCounts & {
   threads: Map<string, UnreadNotificationCounts>;
@@ -18,25 +18,10 @@ export const useBindRoomToNotificationsAtom = (
 ) => {
   const setNotificationAtom = useSetAtom(notificationsAtom);
   const roomsNotificationPreferences = useRoomsNotificationPreferencesContext();
-
-  const [unreadState] = useAsyncCallbackValue(
-    useCallback(async () => {
-      const notifications = await ct.storage.unreadNotifications.observableRead.getAll();
-      const threadNotifications =
-        await ct.storage.unreadThreadNotifications.observableRead.getAll();
-
-      return {
-        notifications,
-        threadNotifications,
-      };
-    }, [ct])
-  );
-
-  const unread = unreadState.status === AsyncStatus.Success ? unreadState.data : undefined;
+  const notifications = useObservableValue(ct.notifications);
+  const threadNotifications = useObservableValue(ct.threadNotifications);
 
   const processNotifications = useCallback(() => {
-    const notifications = unread?.notifications.read ?? [];
-    const threadNotifications = unread?.threadNotifications.read ?? [];
     const { mute } = roomsNotificationPreferences;
 
     const roomToThreadsNotifications = new Map<string, Map<string, UnreadNotificationCounts>>();
@@ -66,18 +51,9 @@ export const useBindRoomToNotificationsAtom = (
     });
 
     setNotificationAtom(roomToNotifications);
-  }, [unread, setNotificationAtom, roomsNotificationPreferences]);
+  }, [notifications, threadNotifications, setNotificationAtom, roomsNotificationPreferences]);
 
   useEffect(() => {
-    if (unread) {
-      processNotifications();
-    }
-
-    const unsubscribeN = unread?.notifications.subscribe(() => processNotifications());
-    const unsubscribeTn = unread?.threadNotifications.subscribe(() => processNotifications());
-    return () => {
-      unsubscribeN?.();
-      unsubscribeTn?.();
-    };
-  }, [unread, processNotifications]);
+    processNotifications();
+  }, [processNotifications]);
 };
diff --git a/src/client/context.ts b/src/client/context.ts
index 68065c69..f89bfd26 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -21,6 +21,8 @@ import {
   LeaveRoomStateObject,
   ReadReceiptObject,
   sessionValue,
+  UnreadNotificationsObject,
+  UnreadThreadNotificationsObject,
 } from './storage/collections';
 import { Storage } from './storage';
 import { SyncContext, SyncValue } from './sync';
@@ -122,6 +124,8 @@ export type ClientContext = {
   roomToVersion: ObservableValue<Map<string, string>>;
   roomToLatestEvent: ObservableValue<Map<string, MessageEventWithoutRoomId>>;
   userReadReceipt: ObservableValue<ReadReceiptObject[]>;
+  notifications: ObservableValue<UnreadNotificationsObject[]>;
+  threadNotifications: ObservableValue<UnreadThreadNotificationsObject[]>;
   roomToTimeline: ObservableValue<Map<string, Timeline>>;
 
   pendingMemberRooms: ObservableValue<string[]>;
@@ -864,6 +868,18 @@ export const createUserReceiptObservable = async (
   return receiptObservable;
 };
 
+export const createNotificationsObservable = async (storage: Storage, disposer: Disposer) => {
+  const notifications = await storage.unreadNotifications.observableRead.getAll();
+  const threadNotifications = await storage.unreadThreadNotifications.observableRead.getAll();
+
+  disposer.collect(notifications, threadNotifications);
+
+  return {
+    notifications,
+    threadNotifications,
+  };
+};
+
 export const createLogoutObservable = (
   syncObservable: ObservableValue<SyncValue>,
   disposer: Disposer
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index 62c8b0c4..a54f99b7 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -27,6 +27,7 @@ import {
   createBackupInfoObservable,
   createUserReceiptObservable,
   createToDeviceEventsObservable,
+  createNotificationsObservable,
 } from './context';
 import { createStorage } from './storage';
 import { getAuthJSONRequest } from './request';
@@ -82,6 +83,10 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
   const roomToReplacement = createRoomToReplacementObservable(state, disposer);
   const roomToLatestEvent = await createRoomToLatestEventObservable(storage, disposer);
   const userReadReceipt = await createUserReceiptObservable(session, storage, disposer);
+  const { notifications, threadNotifications } = await createNotificationsObservable(
+    storage,
+    disposer
+  );
 
   const syncTokenObservable = await createSyncTokenObservable(storage, disposer);
   const pendingMemberRooms = await createPendingMemberRoomObservable(storage, disposer);
@@ -147,6 +152,8 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
     roomToReplacement,
     roomToLatestEvent,
     userReadReceipt,
+    notifications,
+    threadNotifications,
     roomToCreators,
     roomToVersion,
     roomToTimeline,
diff --git a/src/client/syncWriter/utils.ts b/src/client/syncWriter/utils.ts
index c62840b9..3e017586 100644
--- a/src/client/syncWriter/utils.ts
+++ b/src/client/syncWriter/utils.ts
@@ -366,17 +366,22 @@ export const writeUnreadThreadNotifications = async (
   joinRooms: string[],
   join: Record<string, JoinRoom>
 ): Promise<void> => {
+  const notificationsToRemove: UnreadThreadNotificationsObject[] = [];
+
   const unreadThreadNotificationsObjects: UnreadThreadNotificationsObject[] = joinRooms.flatMap(
     (roomId) => {
       const joinRoom = join[roomId];
 
-      const unreadThreadNotifications = joinRoomUtil.roomUnreadThreadNotifications(joinRoom);
+      const unreadThreadNotifications = joinRoomUtil.roomUnreadThreadNotifications(joinRoom) ?? {};
 
-      if (!unreadThreadNotifications) {
-        return [];
-      }
+      const threadIds = Object.keys(unreadThreadNotifications);
 
-      return Object.keys(unreadThreadNotifications).map((threadId) => {
+      const toRemove = ct.threadNotifications.read.filter(
+        (n) => n.roomId === roomId && !threadIds.includes(n.threadId)
+      );
+      notificationsToRemove.push(...toRemove);
+
+      return threadIds.map((threadId) => {
         const unread = unreadThreadNotifications[threadId];
 
         const obj: UnreadThreadNotificationsObject = {
@@ -391,6 +396,10 @@ export const writeUnreadThreadNotifications = async (
     }
   );
 
+  const toRemoveKeys = notificationsToRemove.map((n) =>
+    getUnreadThreadNotificationId(n.roomId, n.threadId)
+  );
+  await ct.storage.unreadThreadNotifications.write.deleteMultiple(toRemoveKeys);
   await ct.storage.unreadThreadNotifications.write.putMultiple(unreadThreadNotificationsObjects);
 };
 

From ef83de5c238fd5c40f90cf4a51b303654d300308 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sat, 24 Oct 2026 13:26:28 +0530
Subject: [PATCH 146/158] improve timeline behaviour - WIP

---
 src/app/features/room/OutboxView.tsx          |  3 +-
 src/app/features/room/RoomTimeline.tsx        | 43 ++++++-------------
 src/app/features/room/hooks/useTimeline.ts    | 41 +++++++++++++++---
 .../room/thread-view/TimelineView.tsx         | 27 ++----------
 4 files changed, 52 insertions(+), 62 deletions(-)

diff --git a/src/app/features/room/OutboxView.tsx b/src/app/features/room/OutboxView.tsx
index 1d572af9..27f48d0a 100644
--- a/src/app/features/room/OutboxView.tsx
+++ b/src/app/features/room/OutboxView.tsx
@@ -273,8 +273,7 @@ export function OutboxView({
           !!prevMsg &&
           !dayDivider &&
           prevMsg.original.type === sender.localEvent.original.type &&
-          minuteDifference(prevMsg.ts, sender.localEvent.ts) < 2 &&
-          !replyEventId;
+          minuteDifference(prevMsg.ts, sender.localEvent.ts) < 2;
 
         prevMsg = sender.localEvent;
 
diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index a3c1dd69..ae816b26 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -30,7 +30,6 @@ import { RoomIntro } from '../../components/room-intro';
 import { usePowerLevelsContext } from '../../hooks/usePowerLevels';
 import { MessageEvent, StateEvent } from '../../../types/matrix/room';
 import { RenderMessageContent } from '../../components/RenderMessageContent';
-import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useIgnoredUsers } from '../../hooks/useIgnoredUsers';
 import { useImagePackRooms } from '../../hooks/useImagePackRooms';
 import { useIsDirectRoom, useRoom } from '../../hooks/useRoom';
@@ -52,6 +51,7 @@ import {
   useEditorResizeStickBottom,
   useEventCollapse,
   useEventDivider,
+  useMessageEditorOutOfViewFocus,
   useReplyClickHandler,
   useRestoreScrollToBottom,
   useTimelinePaginate,
@@ -139,18 +139,8 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const canPinEvent = permissions.stateEvent(StateEvent.RoomPinnedEvents, ct.session.userId);
   const [editId, setEditId] = useState<string>();
 
-  // const roomToParents = useAtomValue(roomToParentsAtom);
-  // const unread = useRoomUnread(room.roomId, roomToUnreadAtom);
-  const { navigateRoom } = useRoomNavigate();
-
   const imagePackRooms = useImagePackRooms(roomId);
 
-  // const [unreadInfo, setUnreadInfo] = useState(() => getRoomUnreadInfo(room, true));
-  const readUptoEventIdRef = useRef<string>();
-  // if (unreadInfo) {
-  //   readUptoEventIdRef.current = unreadInfo.readUptoEventId;
-  // }
-
   const scrollRef = useRef<HTMLDivElement>(null);
 
   const [focusItem, setFocusItem] = useState<
@@ -182,6 +172,8 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
 
   const getScrollElement = useCallback(() => scrollRef.current, []);
 
+  const readReceipt = useUserReadReceipt();
+
   useTimelinePrefetch(timeline, PAGINATION_LIMIT);
   const handlePaginate = useTimelinePaginate(timeline, PAGINATION_LIMIT);
   useTimelineScrollRestore(timeline, scrollRef);
@@ -204,7 +196,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     });
 
   const tryAutoMarkAsRead = useCallback(() => {
-    console.log('mark as read.');
+    console.log('%cmark as read.', 'background: blue; color: white; padding: 5px 10px;');
   }, []);
 
   const newDividerRef = useRef<HTMLDivElement>(null);
@@ -254,21 +246,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     }, 2000);
   }, [alive, focusItem, scrollToItem]);
 
-  // scroll out of view msg editor in view.
-  useEffect(() => {
-    if (editId) {
-      const editMsgElement =
-        (scrollRef.current?.querySelector(`[data-message-id="${editId}"]`) as HTMLElement) ??
-        undefined;
-      if (editMsgElement) {
-        scrollToElement(editMsgElement, {
-          align: 'center',
-          behavior: 'smooth',
-          stopInView: true,
-        });
-      }
-    }
-  }, [scrollToElement, editId]);
+  useMessageEditorOutOfViewFocus(scrollRef, scrollToElement, editId);
 
   const stickToBottom = useCallback(() => {
     if (!atBottom) return;
@@ -282,7 +260,15 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   }, [getScrollElement, atBottom]);
 
   useObservableValueListener(timeline.outbox.senders, stickToBottom);
-  useObservableValueListener(timeline.range.info, stickToBottom);
+  useObservableValueListener(
+    timeline.range.info,
+    useCallback(() => {
+      const batchInfo = timeline.batch.read;
+      if (batchInfo.change.dir === 'f' && batchInfo.next.end) {
+        stickToBottom();
+      }
+    }, [stickToBottom, timeline])
+  );
 
   const handleOpenReply = useCallback(
     (replyId: string) => {
@@ -503,7 +489,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     );
   };
 
-  const readReceipt = useUserReadReceipt();
   const { getDayDivider, getNewDivider, updateDivider, clearDayDivider, clearNewDivider } =
     useEventDivider(readReceipt?.ts);
   const { getCollapsed, updateCollapse } = useEventCollapse();
diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
index 9941bcae..38f99b76 100644
--- a/src/app/features/room/hooks/useTimeline.ts
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -35,7 +35,8 @@ import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
 import { useClient } from '../../../hooks/useClient';
 import { createMentionElement, moveCursor } from '../../../components/editor';
 import { inSameDay, minuteDifference } from '../../../utils/time';
-import { fallbackReply, getReplyId, getThreadId } from '../../../utils/room';
+import { getThreadId } from '../../../utils/room';
+import { ScrollToElement } from '../../../hooks/useVirtualPaginator';
 
 const TimelineViewContext = createContext<TimelineView | null>(null);
 export const TimelineViewProvider = TimelineViewContext.Provider;
@@ -77,6 +78,9 @@ export const useTimelinePaginate = (timeline: TimelineView, limit: number) =>
     [timeline, limit]
   );
 
+/**
+ * Restore timeline scrolling position on room open.
+ */
 export const useTimelineScrollRestore = (
   timeline: TimelineView,
   scrollRef: RefObject<HTMLDivElement>
@@ -88,7 +92,7 @@ export const useTimelineScrollRestore = (
       if (scrollTop) {
         scrollEl.scrollTo({ top: scrollTop, behavior: 'instant' });
       } else {
-        scrollToBottom(scrollEl);
+        scrollToBottom(scrollEl, 'instant');
       }
     }
     return () => {
@@ -160,7 +164,7 @@ export const useAtBottomToggle = (
   onBottom?: (bottom: boolean) => void
 ): [boolean, RefObject<HTMLElement>] => {
   const atBottomAnchorRef = useRef<HTMLElement>(null);
-  const [atBottom, setAtBottom] = useState<boolean>(true);
+  const [atBottom, setAtBottom] = useState<boolean>(atLiveEnd);
 
   const debounceSetAtBottom = useDebounce(
     useCallback(
@@ -180,7 +184,11 @@ export const useAtBottomToggle = (
         const target = atBottomAnchorRef.current;
         if (!target) return;
         const targetEntry = getIntersectionObserverEntry(target, entries);
+
+        // set to false with delay
         if (targetEntry) debounceSetAtBottom(targetEntry);
+
+        // set to true instantly
         if (targetEntry?.isIntersecting && atLiveEnd) {
           setAtBottom(true);
           onBottom?.(true);
@@ -344,8 +352,6 @@ export const useEventCollapse = (threadId?: string) => {
     newDivider: boolean,
     dayDivider: boolean
   ) => {
-    const replyEventId = fallbackReply(event.content) ? undefined : getReplyId(event.content);
-
     const collapsed =
       isPrevRendered &&
       !dayDivider &&
@@ -354,8 +360,7 @@ export const useEventCollapse = (threadId?: string) => {
       prevEvent.sender === event.sender &&
       prevEvent.type === event.type &&
       (threadId ? prevEvent.event_id !== threadId : !getThreadId(prevEvent)) &&
-      minuteDifference(prevEvent.origin_server_ts, event.origin_server_ts) < 2 &&
-      !replyEventId;
+      minuteDifference(prevEvent.origin_server_ts, event.origin_server_ts) < 2;
 
     return collapsed;
   };
@@ -367,3 +372,25 @@ export const useEventCollapse = (threadId?: string) => {
 
   return { getCollapsed, updateCollapse };
 };
+
+export const useMessageEditorOutOfViewFocus = (
+  scrollRef: RefObject<HTMLDivElement>,
+  scrollToElement: ScrollToElement,
+  editId?: string
+) => {
+  // scroll out of view msg editor in view.
+  useEffect(() => {
+    if (editId) {
+      const editMsgElement =
+        (scrollRef.current?.querySelector(`[data-message-id="${editId}"]`) as HTMLElement) ??
+        undefined;
+      if (editMsgElement) {
+        scrollToElement(editMsgElement, {
+          align: 'center',
+          behavior: 'smooth',
+          stopInView: true,
+        });
+      }
+    }
+  }, [scrollRef, scrollToElement, editId]);
+};
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index df0db9f6..f8036414 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -1,12 +1,4 @@
-import React, {
-  RefObject,
-  useCallback,
-  useEffect,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
+import React, { RefObject, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
 import { Box, Scroll, Text, config } from 'folds';
@@ -52,6 +44,7 @@ import {
   useEditorResizeStickBottom,
   useEventCollapse,
   useEventDivider,
+  useMessageEditorOutOfViewFocus,
   useReplyClickHandler,
   useRestoreScrollToBottom,
   useTimelinePaginate,
@@ -242,21 +235,7 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
     }
   }, [scrollToBottomCount]);
 
-  // scroll out of view msg editor in view.
-  useEffect(() => {
-    if (editId) {
-      const editMsgElement =
-        (scrollRef.current?.querySelector(`[data-message-id="${editId}"]`) as HTMLElement) ??
-        undefined;
-      if (editMsgElement) {
-        scrollToElement(editMsgElement, {
-          align: 'center',
-          behavior: 'smooth',
-          stopInView: true,
-        });
-      }
-    }
-  }, [scrollToElement, editId]);
+  useMessageEditorOutOfViewFocus(scrollRef, scrollToElement, editId);
 
   const handleOpenReply = useCallback((replyId: string) => {
     console.log(replyId);

From f7a610adaf4954c4606a52290ba173305ce24aae Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Sun, 25 Oct 2026 17:38:14 +0530
Subject: [PATCH 147/158] WIP - timeline jump to read/reply

---
 src/app/features/room/RoomTimeline.tsx        | 217 +++++++-----------
 src/app/features/room/hooks/useTimeline.ts    | 208 ++++++++++++++---
 .../room/thread-view/TimelineView.tsx         |  42 ++--
 src/app/hooks/useObservableValue.ts           |   8 +
 src/app/hooks/useWindowFocus.ts               |  21 ++
 src/client/room/ThreadTimeline.ts             |  44 +++-
 src/client/room/Timeline.ts                   |  62 +++--
 src/client/room/TimelineView.ts               |  10 +-
 src/client/room/messages/MessageRange.ts      |   3 +
 src/client/room/messages/Messages.ts          |   4 +
 10 files changed, 406 insertions(+), 213 deletions(-)
 create mode 100644 src/app/hooks/useWindowFocus.ts

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index ae816b26..399f0f56 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -1,10 +1,8 @@
-/* eslint-disable react/destructuring-assignment */
 import React, {
   MouseEventHandler,
   RefObject,
   useCallback,
   useEffect,
-  useLayoutEffect,
   useMemo,
   useRef,
   useState,
@@ -14,8 +12,6 @@ import { Editor } from 'slate';
 import { Box, Scroll, config, toRem } from 'folds';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { useVirtualPaginator } from '../../hooks/useVirtualPaginator';
-import { useAlive } from '../../hooks/useAlive';
-import { scrollToBottom } from '../../utils/dom';
 import {
   DefaultPlaceholder,
   CompactPlaceholder,
@@ -51,12 +47,19 @@ import {
   useEditorResizeStickBottom,
   useEventCollapse,
   useEventDivider,
+  useFocusItem,
+  useGetItemElement,
   useMessageEditorOutOfViewFocus,
+  useOnRangeChange,
   useReplyClickHandler,
   useRestoreScrollToBottom,
+  useTimelineBatch,
+  useTimelineContainerResizeStickBottom,
   useTimelinePaginate,
   useTimelinePrefetch,
+  useTimelineRelations,
   useTimelineScrollRestore,
+  useUnreadMarker,
   useUserClickHandler,
   useUsernameClickHandler,
 } from './hooks/useTimeline';
@@ -76,6 +79,7 @@ import { useMessageParserOptions } from '../../hooks/useMessageParserOptions';
 import { MessageContent } from '../../components/MessageContent';
 import { MessageEditor } from './message/MessageEditor';
 import { useSendReaction } from './hooks/useSendReaction';
+import { useWindowFocus } from '../../hooks/useWindowFocus';
 
 type RoomTimelineProps = {
   eventId?: string;
@@ -142,159 +146,114 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const imagePackRooms = useImagePackRooms(roomId);
 
   const scrollRef = useRef<HTMLDivElement>(null);
-
-  const [focusItem, setFocusItem] = useState<
-    | {
-        index: number;
-        scrollTo: boolean;
-        highlight: boolean;
-      }
-    | undefined
-  >();
-  const alive = useAlive();
+  const timelineContainerRef = useRef<HTMLDivElement>(null);
 
   const { linkifyOpts, htmlReactParserOptions, htmlReactParserInlineOptions } =
     useMessageParserOptions(roomId, getRoomName, membersAPI.getName);
 
   const activeThread = useObservableValue(timeline.activeThread);
   const threads = useObservableValue(timeline.threads);
-  const redacted = useObservableValue(timeline.relations.redacted);
-  const reactions = useObservableValue(timeline.relations.reactions.eventToRelations);
-  const edits = useObservableValue(timeline.relations.edits.eventToRelations);
+  const { redacted, reactions, edits } = useTimelineRelations(timeline);
 
-  const messageBatch = useObservableValue(timeline.batch);
   const localEventSenders = useObservableValue(timeline.outbox.senders);
-  const { events } = messageBatch.messages;
-
-  const range = useObservableValue(timeline.range.info);
-  const rangeAtStart = range.start === 0;
-  const rangeAtEnd = range.end === messageBatch.size;
+  const { messageBatch, events, range, rangeAtStart, rangeAtEnd, atLiveEnd } =
+    useTimelineBatch(timeline);
 
   const getScrollElement = useCallback(() => scrollRef.current, []);
 
   const readReceipt = useUserReadReceipt();
+  const lastReadEventInTimeline = useMemo(
+    () => !!readReceipt && !!messageBatch.messages.get(readReceipt.eventId),
+    [readReceipt, messageBatch]
+  );
 
-  useTimelinePrefetch(timeline, PAGINATION_LIMIT);
-  const handlePaginate = useTimelinePaginate(timeline, PAGINATION_LIMIT);
-  useTimelineScrollRestore(timeline, scrollRef);
-  useRestoreScrollToBottom(scrollRef, messageBatch);
+  const [eventLoading, setEventLoading] = useState(false);
+  useTimelinePrefetch(timeline, PAGINATION_LIMIT, !eventLoading);
+  const handlePaginate = useTimelinePaginate(timeline, PAGINATION_LIMIT, !eventLoading);
 
   const { getItems, scrollToItem, scrollToElement, observeBackAnchor, observeFrontAnchor } =
     useVirtualPaginator({
       count: messageBatch.size,
       limit: PAGINATION_LIMIT,
       range,
-      onRangeChange: useCallback((r) => timeline.range.setRange(r), [timeline]),
+      onRangeChange: useOnRangeChange(timeline),
       getScrollElement,
-      getItemElement: useCallback(
-        (index: number) =>
-          (scrollRef.current?.querySelector(`[data-message-item="${index}"]`) as HTMLElement) ??
-          undefined,
-        []
-      ),
+      getItemElement: useGetItemElement(scrollRef),
       onEnd: handlePaginate,
     });
 
-  const tryAutoMarkAsRead = useCallback(() => {
-    console.log('%cmark as read.', 'background: blue; color: white; padding: 5px 10px;');
-  }, []);
+  const { focusItem, setFocusItem } = useFocusItem(timeline, scrollToItem);
+  const focused = useWindowFocus();
+  useTimelineScrollRestore(timeline, scrollRef);
+  useRestoreScrollToBottom(scrollRef, messageBatch);
 
-  const newDividerRef = useRef<HTMLDivElement>(null);
-  // if new divider exist always start form here.
-  useEffect(() => {
-    const newDividerEl = newDividerRef.current;
-    if (newDividerEl) {
-      scrollToElement(newDividerEl, { align: 'center', behavior: 'instant' });
-    }
-  }, [scrollToElement]);
-
-  const [atBottom, atBottomAnchorRef] = useAtBottomToggle(
+  const { atBottomLazy, atBottomObservable, atBottomAnchorRef } = useAtBottomToggle(
     getScrollElement,
-    messageBatch.next.end ?? false,
-    useCallback(
-      (bottom: boolean) => {
-        if (bottom && document.hasFocus()) {
-          tryAutoMarkAsRead();
-        }
-      },
-      [tryAutoMarkAsRead]
-    )
+    atLiveEnd
   );
 
+  const tryAutoMarkAsRead = useCallback(() => {
+    if (!atBottomObservable.read) return;
+    console.log('%cmark as read.', 'background: blue; color: white; padding: 5px 10px;');
+  }, [atBottomObservable]);
+  useObservableValueListener(atBottomObservable, tryAutoMarkAsRead);
+
+  const { markerTs } = useUnreadMarker(atBottomLazy, focused, readReceipt?.ts);
+
+  useTimelineContainerResizeStickBottom(
+    getScrollElement,
+    useCallback(() => timelineContainerRef.current, []),
+    atBottomObservable,
+    !focusItem && atLiveEnd
+  );
   useEditorResizeStickBottom(
     getScrollElement,
     useCallback(() => roomInputRef.current, [roomInputRef]),
-    atBottom
+    atBottomObservable
   );
-
-  // scroll to focused message
-  useLayoutEffect(() => {
-    if (focusItem && focusItem.scrollTo) {
-      scrollToItem(focusItem.index, {
-        behavior: 'instant',
-        align: 'center',
-        stopInView: true,
-      });
-    }
-
-    setTimeout(() => {
-      if (!alive()) return;
-      setFocusItem((currentItem) => {
-        if (currentItem === focusItem) return undefined;
-        return currentItem;
-      });
-    }, 2000);
-  }, [alive, focusItem, scrollToItem]);
-
   useMessageEditorOutOfViewFocus(scrollRef, scrollToElement, editId);
 
-  const stickToBottom = useCallback(() => {
-    if (!atBottom) return;
-
-    setTimeout(() => {
-      const scrollEl = getScrollElement();
-      if (scrollEl) {
-        scrollToBottom(scrollEl, 'smooth');
-      }
-    }, 100);
-  }, [getScrollElement, atBottom]);
-
-  useObservableValueListener(timeline.outbox.senders, stickToBottom);
-  useObservableValueListener(
-    timeline.range.info,
-    useCallback(() => {
-      const batchInfo = timeline.batch.read;
-      if (batchInfo.change.dir === 'f' && batchInfo.next.end) {
-        stickToBottom();
-      }
-    }, [stickToBottom, timeline])
-  );
-
-  const handleOpenReply = useCallback(
-    (replyId: string) => {
-      const replyIndex = timeline.batch.read.messages.events.findIndex(
-        (e) => e.event_id === replyId
-      );
-      console.log(replyIndex);
-      if (replyIndex > -1) {
-        scrollToItem(replyIndex, {
-          behavior: 'smooth',
-          align: 'center',
-          stopInView: true,
-        });
-        setFocusItem({
-          index: replyIndex,
-          scrollTo: false,
-          highlight: true,
-        });
-
+  const handleOpenEvent = useCallback(
+    async (evtId: string) => {
+      const index = timeline.findIndex(evtId);
+      if (index === -1) {
+        setEventLoading(true);
+        await timeline.jumpToEvent(evtId);
+        setEventLoading(false);
+        setFocusItem({ eventId: evtId, highlight: true });
         return;
       }
-      timeline.jumpToEvent(replyId);
+
+      scrollToItem(index, { align: 'center', behavior: 'smooth', stopInView: true });
+      setFocusItem({ eventId: evtId, highlight: true, preventScroll: true });
     },
-    [scrollToItem, timeline]
+    [timeline, scrollToItem, setFocusItem]
   );
 
+  const handleJumpToUnread = useCallback(async () => {
+    if (!readReceipt) return;
+    const unreadEvent = timeline.findFirstUnread(ct.session.userId, readReceipt.ts);
+    if (!unreadEvent) {
+      setEventLoading(true);
+      await timeline.jumpToEvent(readReceipt.eventId);
+      setEventLoading(false);
+      const unreadEvId =
+        timeline.findFirstUnread(ct.session.userId, readReceipt.ts)?.event_id ??
+        readReceipt.eventId;
+      setFocusItem({ eventId: unreadEvId, highlight: false });
+      return;
+    }
+    const index = timeline.findIndex(unreadEvent.event_id);
+
+    scrollToItem(index, { align: 'center', behavior: 'instant', stopInView: true });
+  }, [ct, readReceipt, timeline, scrollToItem, setFocusItem]);
+
+  useEffect(() => {
+    if (eventId) {
+      handleOpenEvent(eventId);
+    }
+  }, [eventId, handleOpenEvent]);
+
   const handleUserClick = useUserClickHandler();
   const handleUsernameClick = useUsernameClickHandler(editor);
   const [replyDraft, handleReplyClick] = useReplyClickHandler(editor);
@@ -321,7 +280,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
     (evt) => {
       const targetId = evt.currentTarget.getAttribute('data-event-id');
       if (!targetId) return;
-      console.log(targetId);
 
       timeline.openThread(targetId);
     },
@@ -336,7 +294,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
 
     const editEvents = edits.get(event.event_id);
     const editedEvent = getLatestEditEvent(event, editEvents, redacted);
-    const highlighted = focusItem?.index === item && focusItem.highlight;
+    const highlighted = focusItem?.eventId === event.event_id && focusItem.highlight;
 
     const reactionJSX = (reactionSenderTarget ||
       (reactionEvents && reactionEvents?.length > 0)) && (
@@ -387,7 +345,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
         <Reply
           roomId={roomId}
           eventId={replyEventId}
-          onClick={handleOpenReply}
+          onClick={handleOpenEvent}
           onUserClick={handleUserClick}
           getMemberPowerTag={getMemberPowerTag}
           accessibleTagColors={accessiblePowerTagColors}
@@ -490,7 +448,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   };
 
   const { getDayDivider, getNewDivider, updateDivider, clearDayDivider, clearNewDivider } =
-    useEventDivider(readReceipt?.ts);
+    useEventDivider(markerTs);
   const { getCollapsed, updateCollapse } = useEventCollapse();
 
   const eventRenderer = (item: number) => {
@@ -522,7 +480,6 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
           messageSpacing={messageSpacing}
           ts={dayDivider ? event.origin_server_ts : undefined}
           unread={newDivider}
-          ref={newDivider ? newDividerRef : undefined}
         />
       ) : null;
 
@@ -539,14 +496,12 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
 
   return (
     <Box grow="Yes" style={{ position: 'relative' }}>
-      {readReceipt && (
-        <UnreadControls
-          onJumpToUnread={() => timeline.jumpToEvent(readReceipt.eventId)}
-          onMarkAsRead={() => undefined}
-        />
+      {readReceipt && !lastReadEventInTimeline && (
+        <UnreadControls onJumpToUnread={handleJumpToUnread} onMarkAsRead={() => undefined} />
       )}
       <Scroll ref={scrollRef} visibility="Hover">
         <Box
+          ref={timelineContainerRef}
           direction="Column"
           justifyContent="End"
           style={{ minHeight: '100%', padding: `${config.space.S600} 0` }}
@@ -571,7 +526,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
               }
             />
           )}
-          {getItems().map(eventRenderer)}
+          {!eventLoading && getItems().map(eventRenderer)}
           {(!messageBatch.next.end || !rangeAtEnd) && (
             <PlaceholderList
               ref={observeFrontAnchor}
@@ -606,7 +561,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
           <span ref={atBottomAnchorRef} />
         </Box>
       </Scroll>
-      {!atBottom && (
+      {!atBottomLazy && (
         <TimelineFloat position="Bottom">
           <JumpToLatestButton getScrollElement={getScrollElement} />
         </TimelineFloat>
diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
index 38f99b76..91fea84f 100644
--- a/src/app/features/room/hooks/useTimeline.ts
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -14,6 +14,7 @@ import { useAtom } from 'jotai';
 import { Editor } from 'slate';
 import { ReactEditor } from 'slate-react';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { ObservableValue } from 'neurone/lib/utils/observable';
 import { scrollToBottom } from '../../../utils/dom';
 import { MessageBatch, RangeInfo } from '../../../../client/room/messages';
 import { getResizeObserverEntry, useResizeObserver } from '../../../hooks/useResizeObserver';
@@ -36,7 +37,9 @@ import { useClient } from '../../../hooks/useClient';
 import { createMentionElement, moveCursor } from '../../../components/editor';
 import { inSameDay, minuteDifference } from '../../../utils/time';
 import { getThreadId } from '../../../utils/room';
-import { ScrollToElement } from '../../../hooks/useVirtualPaginator';
+import { ItemRange, ScrollToElement, ScrollToItem } from '../../../hooks/useVirtualPaginator';
+import { randomStr } from '../../../utils/common';
+import { useObservableValue } from '../../../hooks/useObservableValue';
 
 const TimelineViewContext = createContext<TimelineView | null>(null);
 export const TimelineViewProvider = TimelineViewContext.Provider;
@@ -50,9 +53,41 @@ export const useTimelineView = (): TimelineView => {
   return timelineView;
 };
 
-export const useTimelinePrefetch = (timeline: TimelineView, limit: number) => {
+export const useTimelineBatch = (timeline: TimelineView) => {
+  const messageBatch = useObservableValue(timeline.batch);
+  const { events } = messageBatch.messages;
+
+  const range = useObservableValue(timeline.range.info);
+  const rangeAtStart = range.start === 0;
+  const rangeAtEnd = range.end === messageBatch.size;
+  const atLiveEnd = !!messageBatch.next.end && rangeAtEnd;
+
+  return {
+    messageBatch,
+    events,
+    range,
+    rangeAtStart,
+    rangeAtEnd,
+    atLiveEnd,
+  };
+};
+
+export const useTimelineRelations = (timeline: TimelineView) => {
+  const redacted = useObservableValue(timeline.relations.redacted);
+  const reactions = useObservableValue(timeline.relations.reactions.eventToRelations);
+  const edits = useObservableValue(timeline.relations.edits.eventToRelations);
+
+  return {
+    redacted,
+    reactions,
+    edits,
+  };
+};
+
+export const useTimelinePrefetch = (timeline: TimelineView, limit: number, enable = true) => {
   useEffect(() => {
     const handleInfo = (info: RangeInfo) => {
+      if (!enable) return;
       if (info.start <= limit) {
         requestAnimationFrame(() => timeline.paginateBackward(limit));
       }
@@ -63,23 +98,38 @@ export const useTimelinePrefetch = (timeline: TimelineView, limit: number) => {
 
     handleInfo(timeline.range.info.read);
     return timeline.range.info.subscribe(handleInfo);
-  }, [timeline, limit]);
+  }, [timeline, limit, enable]);
 };
 
-export const useTimelinePaginate = (timeline: TimelineView, limit: number) =>
+export const useTimelinePaginate = (timeline: TimelineView, limit: number, enable = true) =>
   useCallback(
     (back: boolean) => {
+      if (!enable) return;
+
       if (back) {
         timeline.paginateBackward(limit);
         return;
       }
       timeline.paginateForward(limit);
     },
-    [timeline, limit]
+    [timeline, limit, enable]
+  );
+
+export const useOnRangeChange = (timeline: TimelineView) =>
+  useCallback((r: ItemRange) => timeline.range.setRange(r), [timeline]);
+
+export const useGetItemElement = (scrollRef: RefObject<HTMLDivElement>) =>
+  useCallback(
+    (index: number) =>
+      (scrollRef.current?.querySelector(`[data-message-item="${index}"]`) as HTMLElement) ??
+      undefined,
+    [scrollRef]
   );
 
 /**
  * Restore timeline scrolling position on room open.
+ * a) restore from the cache position
+ * b) scroll to bottom if live timeline
  */
 export const useTimelineScrollRestore = (
   timeline: TimelineView,
@@ -89,9 +139,10 @@ export const useTimelineScrollRestore = (
     const scrollEl = scrollRef.current;
     if (scrollEl) {
       const scrollTop = timeline.range.scrollTopCache;
+      const batch = timeline.batch.read;
       if (scrollTop) {
         scrollEl.scrollTo({ top: scrollTop, behavior: 'instant' });
-      } else {
+      } else if (batch.next.end && batch.messages.events.length > 0) {
         scrollToBottom(scrollEl, 'instant');
       }
     }
@@ -104,7 +155,7 @@ export const useTimelineScrollRestore = (
 };
 
 /**
- * When room loads and timeline does not hav any message
+ * When room loads and timeline does not have any message
  * scrolls to bottom after message appears.
  */
 export const useRestoreScrollToBottom = (
@@ -126,14 +177,12 @@ export const useRestoreScrollToBottom = (
   }, [msgBatch, scrollRef]);
 };
 
-export const useEditorResizeStickBottom = (
+export const useTimelineContainerResizeStickBottom = (
   getScrollElement: () => HTMLElement | null,
-  getEditorElement: () => HTMLElement | null,
-  atBottom: boolean
+  getContainerElement: () => HTMLElement | null,
+  atBottomObservable: ObservableValue<boolean>,
+  enable = true
 ) => {
-  const atBottomRef = useRef(atBottom);
-  atBottomRef.current = atBottom;
-
   useResizeObserver(
     useMemo(() => {
       let mounted = false;
@@ -143,58 +192,116 @@ export const useEditorResizeStickBottom = (
           mounted = true;
           return;
         }
+        const containerEl = getContainerElement();
+        if (!containerEl) return;
+        const scrollElement = getScrollElement();
+        const containerEntry = getResizeObserverEntry(containerEl, entries);
+        if (!containerEntry || !scrollElement) return;
+
+        if (atBottomObservable.read) {
+          requestAnimationFrame(() => {
+            scrollToBottom(scrollElement, 'smooth');
+          });
+        }
+      };
+    }, [getContainerElement, getScrollElement, atBottomObservable]),
+    enable ? getContainerElement : undefined
+  );
+};
+
+export const useEditorResizeStickBottom = (
+  getScrollElement: () => HTMLElement | null,
+  getEditorElement: () => HTMLElement | null,
+  atBottomObservable: ObservableValue<boolean>
+) => {
+  useResizeObserver(
+    useMemo(() => {
+      let mounted = false;
+      return (entries) => {
+        if (!mounted) {
+          // skip initial mounting call
+          mounted = true;
+          return;
+        }
+
         const editorEl = getEditorElement();
         if (!editorEl) return;
         const editorBaseEntry = getResizeObserverEntry(editorEl, entries);
         const scrollElement = getScrollElement();
         if (!editorBaseEntry || !scrollElement) return;
 
-        if (atBottomRef.current) {
+        if (atBottomObservable.read) {
           scrollToBottom(scrollElement);
         }
       };
-    }, [getScrollElement, getEditorElement, atBottomRef]),
+    }, [getScrollElement, getEditorElement, atBottomObservable]),
     getEditorElement
   );
 };
 
+export const useUnreadMarker = (
+  atBottomLazy: boolean,
+  focused: boolean,
+  readReceiptTs?: number
+) => {
+  const markerTsRef = useRef<number | undefined>(readReceiptTs);
+
+  // receive initial read receipt ts
+  if (markerTsRef.current === undefined && readReceiptTs !== undefined) {
+    markerTsRef.current = readReceiptTs;
+  }
+
+  // Attention lost: move markerTs to latest readReceiptTs
+  if (!focused) {
+    markerTsRef.current = readReceiptTs;
+  }
+
+  // Not Reading Live: move markerTs to latest readReceiptTs
+  if (!atBottomLazy) {
+    markerTsRef.current = readReceiptTs;
+  }
+
+  return { markerTs: markerTsRef.current };
+};
+
+const AT_BOTTOM_KEY = randomStr();
 export const useAtBottomToggle = (
   getScrollElement: () => HTMLElement | null,
-  atLiveEnd: boolean,
-  onBottom?: (bottom: boolean) => void
-): [boolean, RefObject<HTMLElement>] => {
+  atLiveEnd: boolean
+) => {
   const atBottomAnchorRef = useRef<HTMLElement>(null);
-  const [atBottom, setAtBottom] = useState<boolean>(atLiveEnd);
+  const [atBottomLazy, setAtBottomLazy] = useState<boolean>(atLiveEnd);
+  const [atBottomObservable] = useState(
+    () => new ObservableValue<boolean>(atLiveEnd, AT_BOTTOM_KEY)
+  );
 
-  const debounceSetAtBottom = useDebounce(
-    useCallback(
-      (entry: IntersectionObserverEntry) => {
-        if (!entry.isIntersecting) {
-          setAtBottom(false);
-          onBottom?.(false);
-        }
-      },
-      [onBottom]
-    ),
+  const debounceSetAtBottomLazy = useDebounce(
+    useCallback((entry: IntersectionObserverEntry) => {
+      if (!entry.isIntersecting) {
+        setAtBottomLazy(false);
+      }
+    }, []),
     { wait: 1000 }
   );
   useIntersectionObserver(
     useCallback(
       (entries) => {
         const target = atBottomAnchorRef.current;
-        if (!target) return;
-        const targetEntry = getIntersectionObserverEntry(target, entries);
+        const targetEntry = target && getIntersectionObserverEntry(target, entries);
+        if (!targetEntry) return;
+
+        const atBottom = targetEntry.isIntersecting && atLiveEnd;
+        atBottomObservable.publish(AT_BOTTOM_KEY, atBottom);
 
         // set to false with delay
-        if (targetEntry) debounceSetAtBottom(targetEntry);
+        if (targetEntry) debounceSetAtBottomLazy(targetEntry);
 
         // set to true instantly
-        if (targetEntry?.isIntersecting && atLiveEnd) {
-          setAtBottom(true);
-          onBottom?.(true);
+        if (targetEntry.isIntersecting && atLiveEnd) {
+          setAtBottomLazy(true);
         }
       },
-      [debounceSetAtBottom, atLiveEnd, onBottom]
+      [debounceSetAtBottomLazy, atLiveEnd, atBottomObservable]
     ),
     useCallback(
       () => ({
@@ -206,7 +313,34 @@ export const useAtBottomToggle = (
     useCallback(() => atBottomAnchorRef.current, [])
   );
 
-  return [atBottom, atBottomAnchorRef];
+  return {
+    atBottomLazy,
+    atBottomObservable,
+    atBottomAnchorRef,
+  };
+};
+
+export type FocusItem = { eventId: string; highlight: boolean; preventScroll?: boolean };
+export const useFocusItem = (timeline: TimelineView, scrollToItem: ScrollToItem) => {
+  const [focusItem, setFocusItem] = useState<FocusItem | undefined>();
+
+  useLayoutEffect(() => {
+    if (!focusItem) return undefined;
+
+    const { eventId, preventScroll } = focusItem;
+    const index = timeline.findIndex(eventId);
+    if (!preventScroll) {
+      scrollToItem(index, { align: 'center', behavior: 'instant', stopInView: true });
+    }
+
+    const t = setTimeout(() => setFocusItem(undefined), 2000);
+    return () => clearTimeout(t);
+  }, [focusItem, timeline, scrollToItem]);
+
+  return {
+    focusItem,
+    setFocusItem,
+  };
 };
 
 export const useReplyClickHandler = (
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index f8036414..5badd9b9 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -44,11 +44,15 @@ import {
   useEditorResizeStickBottom,
   useEventCollapse,
   useEventDivider,
+  useGetItemElement,
   useMessageEditorOutOfViewFocus,
+  useOnRangeChange,
   useReplyClickHandler,
   useRestoreScrollToBottom,
+  useTimelineBatch,
   useTimelinePaginate,
   useTimelinePrefetch,
+  useTimelineRelations,
   useTimelineScrollRestore,
   useUserClickHandler,
   useUsernameClickHandler,
@@ -148,17 +152,12 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
   const { linkifyOpts, htmlReactParserOptions, htmlReactParserInlineOptions } =
     useMessageParserOptions(roomId, getRoomName, membersAPI.getName);
 
-  const redacted = useObservableValue(threadTimeline.relations.redacted);
-  const reactions = useObservableValue(threadTimeline.relations.reactions.eventToRelations);
-  const edits = useObservableValue(threadTimeline.relations.edits.eventToRelations);
-  const messageBatch = useObservableValue(threadTimeline.batch);
-  const localEventSenders = useObservableValue(threadTimeline.outbox.senders);
   const threadMeta = useObservableValue(threadTimeline.meta);
-  const { events } = messageBatch.messages;
+  const { redacted, reactions, edits } = useTimelineRelations(threadTimeline);
 
-  const range = useObservableValue(threadTimeline.range.info);
-  const rangeAtStart = range.start === 0;
-  const rangeAtEnd = range.end === messageBatch.size;
+  const localEventSenders = useObservableValue(threadTimeline.outbox.senders);
+  const { messageBatch, events, range, rangeAtStart, rangeAtEnd, atLiveEnd } =
+    useTimelineBatch(threadTimeline);
 
   const getScrollElement = useCallback(() => scrollRef.current, []);
 
@@ -172,14 +171,9 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
       count: messageBatch.size,
       limit: PAGINATION_LIMIT,
       range,
-      onRangeChange: useCallback((r) => threadTimeline.range.setRange(r), [threadTimeline]),
+      onRangeChange: useOnRangeChange(threadTimeline),
       getScrollElement,
-      getItemElement: useCallback(
-        (index: number) =>
-          (scrollRef.current?.querySelector(`[data-message-item="${index}"]`) as HTMLElement) ??
-          undefined,
-        []
-      ),
+      getItemElement: useGetItemElement(scrollRef),
       onEnd: handlePaginate,
     });
 
@@ -187,23 +181,15 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
     console.log('mark thread as read.');
   }, []);
 
-  const [atBottom, atBottomAnchorRef] = useAtBottomToggle(
+  const { atBottomLazy, atBottomObservable, atBottomAnchorRef } = useAtBottomToggle(
     getScrollElement,
-    messageBatch.next.end ?? false,
-    useCallback(
-      (bottom: boolean) => {
-        if (bottom && document.hasFocus()) {
-          tryAutoMarkAsRead();
-        }
-      },
-      [tryAutoMarkAsRead]
-    )
+    messageBatch.next.end ?? false
   );
 
   useEditorResizeStickBottom(
     getScrollElement,
     useCallback(() => threadInputRef?.current ?? null, [threadInputRef]),
-    atBottom
+    atBottomObservable
   );
 
   // scroll to focused message
@@ -509,7 +495,7 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
           </Box>
         </Box>
       </Scroll>
-      {!atBottom && (
+      {!atBottomLazy && (
         <TimelineFloat position="Bottom">
           <JumpToLatestButton getScrollElement={getScrollElement} />
         </TimelineFloat>
diff --git a/src/app/hooks/useObservableValue.ts b/src/app/hooks/useObservableValue.ts
index d907b9ca..8b42d9c0 100644
--- a/src/app/hooks/useObservableValue.ts
+++ b/src/app/hooks/useObservableValue.ts
@@ -3,9 +3,17 @@ import {
   PendingObservableValue,
   PendingObservableResult,
   ComputedObservableValue,
+  Observable,
 } from 'neurone/lib/utils/observable';
 import { useMemo, useSyncExternalStore, useCallback, useEffect } from 'react';
 
+export function useObservable<T>(observable: Observable<T>, listener: (value: T) => void) {
+  useEffect(() => {
+    const unsub = observable.subscribe(listener);
+    return unsub;
+  });
+}
+
 export function useObservableValue<T>(observableValue: ObservableValue<T>): T {
   const value = useSyncExternalStore(
     useCallback((c) => observableValue.subscribe(c), [observableValue]),
diff --git a/src/app/hooks/useWindowFocus.ts b/src/app/hooks/useWindowFocus.ts
new file mode 100644
index 00000000..bdd88de5
--- /dev/null
+++ b/src/app/hooks/useWindowFocus.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+/**
+ * Tracks whether the browser window currently has focus.
+ */
+export const useWindowFocus = (): boolean => {
+  const [focused, setFocused] = useState<boolean>(() => document.hasFocus());
+
+  useEffect(() => {
+    const onFocus = () => setFocused(true);
+    const onBlur = () => setFocused(false);
+    window.addEventListener('focus', onFocus);
+    window.addEventListener('blur', onBlur);
+    return () => {
+      window.removeEventListener('focus', onFocus);
+      window.removeEventListener('blur', onBlur);
+    };
+  }, []);
+
+  return focused;
+};
diff --git a/src/client/room/ThreadTimeline.ts b/src/client/room/ThreadTimeline.ts
index 7255e84e..270c0aa0 100644
--- a/src/client/room/ThreadTimeline.ts
+++ b/src/client/room/ThreadTimeline.ts
@@ -14,7 +14,7 @@ import {
   parseMatrixResp,
   printMatrixError,
 } from 'neurone/lib/matrix-request';
-import { TimelineView } from './TimelineView';
+import { JumpTarget, TimelineView } from './TimelineView';
 import { MessageRange, MessageBatch } from './messages';
 import { TimelineBatchManager } from './TimelineBatchManager';
 import { RelationsProcessor } from './relations';
@@ -24,6 +24,7 @@ import { TimelineUtils } from './TimelineUtils';
 import { LocalEventOutbox } from './local-event/LocalEventOutbox';
 import { EventSenderIdle, LocalEvent, LocalEventSender, LocalMessage } from './local-event';
 import { randomStr } from '../../app/utils/common';
+import { getThreadId } from '../../app/utils/room';
 
 export type ThreadSyncData = {
   events: MessageEventWithoutRoomId[];
@@ -253,7 +254,7 @@ export class ThreadTimeline implements TimelineView, Disposable {
     }
   }
 
-  public async jumpToEvent(eventId: string): Promise<void> {
+  public async jumpToEvent(eventId: string): Promise<JumpTarget> {
     const resp = await this.request(
       getContext({
         pathParams: {
@@ -280,7 +281,23 @@ export class ThreadTimeline implements TimelineView, Disposable {
     const events = [event];
     const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(events);
 
+    const threadId = getThreadId(event);
+
+    // event is not a child of this thread
+    if (threadId && threadId !== this.threadId) {
+      return { type: 'thread', eventId, threadId };
+    }
+    // event is not the root of this thread
+    if (!threadId && event.event_id !== this.threadId) {
+      return { type: 'main', eventId };
+    }
+
     this.batchManager.loadEvents(messageEvents, start, end);
+    return {
+      type: 'thread',
+      eventId,
+      threadId: this.threadId,
+    };
   }
 
   public async jumpToLatest(): Promise<void> {
@@ -296,6 +313,29 @@ export class ThreadTimeline implements TimelineView, Disposable {
     return this.batch.read.messages.get(eventId);
   }
 
+  public findIndex(eventId: string): number {
+    return this.batch.read.messages.getIndex(eventId);
+  }
+
+  public findFirstUnread(
+    userId: string,
+    readEventTs: number
+  ): MessageEventWithoutRoomId | undefined {
+    let index = -1;
+    const event = this.batch.read.messages.events.find((ev, idx) => {
+      index = idx;
+      return ev.origin_server_ts > readEventTs && ev.sender !== userId;
+    });
+
+    // index = 0: first event ts > readEventTs
+    // can't say the this is the first unread event.
+    // there could be more behind
+    if (index <= 0) {
+      return undefined;
+    }
+    return event;
+  }
+
   public async sendMessage(
     originalMessage: LocalMessage,
     wireMessage: LocalMessage,
diff --git a/src/client/room/Timeline.ts b/src/client/room/Timeline.ts
index 5684a0e5..0a88c573 100644
--- a/src/client/room/Timeline.ts
+++ b/src/client/room/Timeline.ts
@@ -14,7 +14,7 @@ import {
   parseMatrixResp,
   printMatrixError,
 } from 'neurone/lib/matrix-request';
-import { TimelineView } from './TimelineView';
+import { JumpTarget, TimelineView } from './TimelineView';
 import { MessageRange, MessageBatch } from './messages';
 import { TimelineBatchManager } from './TimelineBatchManager';
 import { RelationsProcessor } from './relations';
@@ -244,7 +244,7 @@ export class Timeline implements TimelineView, Disposable {
     }
   }
 
-  public async jumpToEvent(eventId: string): Promise<void> {
+  public async jumpToEvent(eventId: string): Promise<JumpTarget> {
     const resp = await this.request(
       getContext({
         pathParams: {
@@ -273,7 +273,18 @@ export class Timeline implements TimelineView, Disposable {
     const messageEvents: MessageEventWithoutRoomId[] = this.relations.pickAndFilter(events);
 
     this.pickThreads(messageEvents);
+
     this.batchManager.loadEvents(messageEvents, start, end);
+
+    const threadId = getThreadId(event);
+    if (threadId) {
+      return { type: 'thread', threadId, eventId };
+    }
+
+    return {
+      type: 'main',
+      eventId,
+    };
   }
 
   public async jumpToLatest(): Promise<void> {
@@ -289,6 +300,29 @@ export class Timeline implements TimelineView, Disposable {
     return this.batch.read.messages.get(eventId);
   }
 
+  public findIndex(eventId: string): number {
+    return this.batch.read.messages.getIndex(eventId);
+  }
+
+  public findFirstUnread(
+    userId: string,
+    readEventTs: number
+  ): MessageEventWithoutRoomId | undefined {
+    let index = -1;
+    const event = this.batch.read.messages.events.find((ev, idx) => {
+      index = idx;
+      return ev.origin_server_ts > readEventTs && ev.sender !== userId;
+    });
+
+    // index = 0: first event ts > readEventTs
+    // can't say the this is the first unread event.
+    // there could be more behind
+    if (index <= 0) {
+      return undefined;
+    }
+    return event;
+  }
+
   private async getMessages(
     token: string | undefined,
     dir: 'b' | 'f',
@@ -325,22 +359,24 @@ export class Timeline implements TimelineView, Disposable {
     return sender;
   }
 
-  public openThread(threadId: string): void {
+  public openThread(threadId: string): TimelineView {
     const threadRoot = this.findEvent(threadId);
-    if (!this.threads.read.has(threadId) && threadRoot) {
-      this.addThread(
-        new ThreadTimeline(
-          this.roomId,
-          threadId,
-          this.publishKey,
-          this.request,
-          this.relations,
-          threadRoot
-        )
+    const threadTimeline =
+      this.threads.read.get(threadId) ??
+      new ThreadTimeline(
+        this.roomId,
+        threadId,
+        this.publishKey,
+        this.request,
+        this.relations,
+        threadRoot
       );
+    if (!this.threads.read.has(threadId)) {
+      this.addThread(threadTimeline);
     }
 
     this.activeThread.publish(this.publishKey, threadId);
+    return threadTimeline;
   }
 
   public closeThread(): void {
diff --git a/src/client/room/TimelineView.ts b/src/client/room/TimelineView.ts
index 4706ccd7..e29ecfff 100644
--- a/src/client/room/TimelineView.ts
+++ b/src/client/room/TimelineView.ts
@@ -5,6 +5,10 @@ import { RelationsProcessor } from './relations';
 import { LocalEventOutbox } from './local-event/LocalEventOutbox';
 import { LocalEventSender, LocalMessage } from './local-event';
 
+export type JumpTarget =
+  | { type: 'main'; eventId: string }
+  | { type: 'thread'; threadId: string; eventId: string };
+
 export interface TimelineView {
   readonly batch: ObservableValue<MessageBatch>;
   readonly range: MessageRange;
@@ -12,9 +16,11 @@ export interface TimelineView {
   readonly relations: RelationsProcessor;
   paginateBackward(limit: number): Promise<void>;
   paginateForward(limit: number): Promise<void>;
-  findEvent(eventId: string): MessageEventWithoutRoomId | undefined;
-  jumpToEvent(eventId: string): Promise<void>;
+  jumpToEvent(eventId: string): Promise<JumpTarget>;
   jumpToLatest(): Promise<void>;
+  findEvent(eventId: string): MessageEventWithoutRoomId | undefined;
+  findIndex(eventId: string): number;
+  findFirstUnread(userId: string, readEventTs: number): MessageEventWithoutRoomId | undefined;
   sendMessage(
     originalMessage: LocalMessage,
     wireMessage: LocalMessage,
diff --git a/src/client/room/messages/MessageRange.ts b/src/client/room/messages/MessageRange.ts
index b7808544..ef4d0859 100644
--- a/src/client/room/messages/MessageRange.ts
+++ b/src/client/room/messages/MessageRange.ts
@@ -72,6 +72,9 @@ export class MessageRange implements Disposable {
     }
 
     this.setRange(MessageRange.atLiveEnd(size));
+
+    // clear the top cache since the timeline batch has changed
+    this.scrollTopCache = undefined;
   }
 
   private adjustBackwardGrowth(lenthChange: number): RangeInfo {
diff --git a/src/client/room/messages/Messages.ts b/src/client/room/messages/Messages.ts
index ff00d865..a4206e2d 100644
--- a/src/client/room/messages/Messages.ts
+++ b/src/client/room/messages/Messages.ts
@@ -25,6 +25,10 @@ export class Messages {
     return this.events.find((event) => event.event_id === eventId);
   }
 
+  public getIndex(eventId: string): number {
+    return this.events.findIndex((event) => event.event_id === eventId);
+  }
+
   static sort(events: MessageEventWithoutRoomId[]): MessageEventWithoutRoomId[] {
     return [...events].sort((a, b) => a.origin_server_ts - b.origin_server_ts);
   }

From cfde8f20ee5a42dc31df4991dd4ab17cef5476d6 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 26 Oct 2026 17:02:10 +0530
Subject: [PATCH 148/158] prevent scroll from stopping above when decrypting
 messages change view height

---
 src/app/features/room/RoomTimeline.tsx     | 1 +
 src/app/features/room/hooks/useTimeline.ts | 9 +++++----
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index 399f0f56..b12e9f68 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -201,6 +201,7 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   const { markerTs } = useUnreadMarker(atBottomLazy, focused, readReceipt?.ts);
 
   useTimelineContainerResizeStickBottom(
+    timeline,
     getScrollElement,
     useCallback(() => timelineContainerRef.current, []),
     atBottomObservable,
diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
index 91fea84f..2c52d8e8 100644
--- a/src/app/features/room/hooks/useTimeline.ts
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -178,6 +178,7 @@ export const useRestoreScrollToBottom = (
 };
 
 export const useTimelineContainerResizeStickBottom = (
+  timeline: TimelineView,
   getScrollElement: () => HTMLElement | null,
   getContainerElement: () => HTMLElement | null,
   atBottomObservable: ObservableValue<boolean>,
@@ -199,12 +200,12 @@ export const useTimelineContainerResizeStickBottom = (
         if (!containerEntry || !scrollElement) return;
 
         if (atBottomObservable.read) {
-          requestAnimationFrame(() => {
-            scrollToBottom(scrollElement, 'smooth');
-          });
+          const batchChange = timeline.batch.read.change;
+          const messageArrived = batchChange.type === 'Grow' && batchChange.dir === 'f';
+          scrollToBottom(scrollElement, messageArrived ? 'smooth' : 'instant');
         }
       };
-    }, [getContainerElement, getScrollElement, atBottomObservable]),
+    }, [timeline, getContainerElement, getScrollElement, atBottomObservable]),
     enable ? getContainerElement : undefined
   );
 };

From d8cb89ca572517274fe7c34f9615ca1d40a0f781 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Mon, 26 Oct 2026 22:38:12 +0530
Subject: [PATCH 149/158] share main timeline logic with thread timeline

---
 src/app/features/room/RoomTimeline.tsx        |  40 +----
 src/app/features/room/hooks/useTimeline.ts    |  56 ++++++
 .../features/room/thread-view/ThreadView.tsx  |   6 +-
 .../room/thread-view/TimelineView.tsx         | 160 ++++++++----------
 src/client/room/ThreadTimeline.ts             |  22 ++-
 src/client/room/Timeline.ts                   |  11 +-
 src/client/room/TimelineView.ts               |   1 +
 src/client/room/messages/MessageBatch.ts      |  10 ++
 src/client/room/messages/MessageRange.ts      |  15 +-
 9 files changed, 190 insertions(+), 131 deletions(-)

diff --git a/src/app/features/room/RoomTimeline.tsx b/src/app/features/room/RoomTimeline.tsx
index b12e9f68..6974eeba 100644
--- a/src/app/features/room/RoomTimeline.tsx
+++ b/src/app/features/room/RoomTimeline.tsx
@@ -49,6 +49,7 @@ import {
   useEventDivider,
   useFocusItem,
   useGetItemElement,
+  useJumpHandlers,
   useMessageEditorOutOfViewFocus,
   useOnRangeChange,
   useReplyClickHandler,
@@ -214,41 +215,14 @@ export function RoomTimeline({ eventId, roomInputRef, editor, timeline }: RoomTi
   );
   useMessageEditorOutOfViewFocus(scrollRef, scrollToElement, editId);
 
-  const handleOpenEvent = useCallback(
-    async (evtId: string) => {
-      const index = timeline.findIndex(evtId);
-      if (index === -1) {
-        setEventLoading(true);
-        await timeline.jumpToEvent(evtId);
-        setEventLoading(false);
-        setFocusItem({ eventId: evtId, highlight: true });
-        return;
-      }
-
-      scrollToItem(index, { align: 'center', behavior: 'smooth', stopInView: true });
-      setFocusItem({ eventId: evtId, highlight: true, preventScroll: true });
-    },
-    [timeline, scrollToItem, setFocusItem]
+  const { handleOpenEvent, handleJumpToUnread } = useJumpHandlers(
+    timeline,
+    readReceipt,
+    scrollToItem,
+    setFocusItem,
+    setEventLoading
   );
 
-  const handleJumpToUnread = useCallback(async () => {
-    if (!readReceipt) return;
-    const unreadEvent = timeline.findFirstUnread(ct.session.userId, readReceipt.ts);
-    if (!unreadEvent) {
-      setEventLoading(true);
-      await timeline.jumpToEvent(readReceipt.eventId);
-      setEventLoading(false);
-      const unreadEvId =
-        timeline.findFirstUnread(ct.session.userId, readReceipt.ts)?.event_id ??
-        readReceipt.eventId;
-      setFocusItem({ eventId: unreadEvId, highlight: false });
-      return;
-    }
-    const index = timeline.findIndex(unreadEvent.event_id);
-
-    scrollToItem(index, { align: 'center', behavior: 'instant', stopInView: true });
-  }, [ct, readReceipt, timeline, scrollToItem, setFocusItem]);
-
   useEffect(() => {
     if (eventId) {
       handleOpenEvent(eventId);
diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
index 2c52d8e8..cd47f7f6 100644
--- a/src/app/features/room/hooks/useTimeline.ts
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -40,6 +40,8 @@ import { getThreadId } from '../../../utils/room';
 import { ItemRange, ScrollToElement, ScrollToItem } from '../../../hooks/useVirtualPaginator';
 import { randomStr } from '../../../utils/common';
 import { useObservableValue } from '../../../hooks/useObservableValue';
+import { ReadReceiptObject } from '../../../../client/storage/collections';
+import { useAlive } from '../../../hooks/useAlive';
 
 const TimelineViewContext = createContext<TimelineView | null>(null);
 export const TimelineViewProvider = TimelineViewContext.Provider;
@@ -344,6 +346,60 @@ export const useFocusItem = (timeline: TimelineView, scrollToItem: ScrollToItem)
   };
 };
 
+export const useJumpHandlers = (
+  timeline: TimelineView,
+  readReceipt: ReadReceiptObject | undefined,
+  scrollToItem: ScrollToItem,
+  setFocusItem: (focus: FocusItem) => void,
+  setEventLoading: (loading: boolean) => void,
+  threadId?: string
+) => {
+  const ct = useClient();
+  const alive = useAlive();
+
+  const handleOpenEvent = useCallback(
+    async (evtId: string) => {
+      const index = timeline.findIndex(evtId);
+      if (index !== -1) {
+        scrollToItem(index, { align: 'center', behavior: 'smooth', stopInView: true });
+        setFocusItem({ eventId: evtId, highlight: true, preventScroll: true });
+        return;
+      }
+      if (evtId !== threadId) {
+        // TODO: handle it properly
+        setEventLoading(true);
+        await timeline.jumpToEvent(evtId);
+        if (!alive()) return;
+        setEventLoading(false);
+      }
+      setFocusItem({ eventId: evtId, highlight: true });
+    },
+    [timeline, scrollToItem, setFocusItem, setEventLoading, alive, threadId]
+  );
+
+  const handleJumpToUnread = useCallback(async () => {
+    if (!readReceipt) return;
+    const unreadEvent = timeline.findFirstUnread(ct.session.userId, readReceipt.ts);
+    if (unreadEvent) {
+      const index = timeline.findIndex(unreadEvent.event_id);
+      scrollToItem(index, { align: 'center', behavior: 'instant', stopInView: true });
+      return;
+    }
+    setEventLoading(true);
+    await timeline.jumpToEvent(readReceipt.eventId);
+    if (!alive()) return;
+    setEventLoading(false);
+    const unreadEvId =
+      timeline.findFirstUnread(ct.session.userId, readReceipt.ts)?.event_id ?? readReceipt.eventId;
+    setFocusItem({ eventId: unreadEvId, highlight: false });
+  }, [ct, readReceipt, timeline, scrollToItem, setFocusItem, setEventLoading, alive]);
+
+  return {
+    handleOpenEvent,
+    handleJumpToUnread,
+  };
+};
+
 export const useReplyClickHandler = (
   editor: Editor,
   threadId?: string
diff --git a/src/app/features/room/thread-view/ThreadView.tsx b/src/app/features/room/thread-view/ThreadView.tsx
index 7921b74b..9fc30a05 100644
--- a/src/app/features/room/thread-view/ThreadView.tsx
+++ b/src/app/features/room/thread-view/ThreadView.tsx
@@ -64,11 +64,7 @@ export function ThreadView({ threadTimeline, threadFocusRef, requestClose }: Thr
         </Box>
       </PageHeader>
 
-      <TimelineView
-        threadTimeline={threadTimeline}
-        threadInputRef={threadInputRef}
-        editor={editor}
-      />
+      <TimelineView timeline={threadTimeline} threadInputRef={threadInputRef} editor={editor} />
       <Box shrink="No" direction="Column">
         <div style={{ padding: `0 ${config.space.S400}` }}>
           <RoomInput
diff --git a/src/app/features/room/thread-view/TimelineView.tsx b/src/app/features/room/thread-view/TimelineView.tsx
index 5badd9b9..bb0c4709 100644
--- a/src/app/features/room/thread-view/TimelineView.tsx
+++ b/src/app/features/room/thread-view/TimelineView.tsx
@@ -1,11 +1,9 @@
-import React, { RefObject, useCallback, useLayoutEffect, useMemo, useRef, useState } from 'react';
+import React, { RefObject, useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { ReactEditor } from 'slate-react';
 import { Editor } from 'slate';
 import { Box, Scroll, Text, config } from 'folds';
 import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
 import { useVirtualPaginator } from '../../../hooks/useVirtualPaginator';
-import { useAlive } from '../../../hooks/useAlive';
-import { scrollToBottom } from '../../../utils/dom';
 import {
   DefaultPlaceholder,
   CompactPlaceholder,
@@ -34,7 +32,7 @@ import { useTheme } from '../../../hooks/useTheme';
 import { useRoomCreatorsTag } from '../../../hooks/useRoomCreatorsTag';
 import { usePowerLevelTags, usePowerLevelTagsState } from '../../../hooks/usePowerLevelTags';
 import { ThreadTimeline } from '../../../../client/room/ThreadTimeline';
-import { useObservableValue } from '../../../hooks/useObservableValue';
+import { useObservableValue, useObservableValueListener } from '../../../hooks/useObservableValue';
 import { useClient } from '../../../hooks/useClient';
 import { useRoomMembersAPI } from '../../../hooks/useRoomMembers';
 import { useGetRoomName } from '../../../hooks/storage/useGetRoomName';
@@ -44,16 +42,20 @@ import {
   useEditorResizeStickBottom,
   useEventCollapse,
   useEventDivider,
+  useFocusItem,
   useGetItemElement,
+  useJumpHandlers,
   useMessageEditorOutOfViewFocus,
   useOnRangeChange,
   useReplyClickHandler,
   useRestoreScrollToBottom,
   useTimelineBatch,
+  useTimelineContainerResizeStickBottom,
   useTimelinePaginate,
   useTimelinePrefetch,
   useTimelineRelations,
   useTimelineScrollRestore,
+  useUnreadMarker,
   useUserClickHandler,
   useUsernameClickHandler,
 } from '../hooks/useTimeline';
@@ -71,16 +73,18 @@ import { useMessageParserOptions } from '../../../hooks/useMessageParserOptions'
 import { MessageContent } from '../../../components/MessageContent';
 import { MessageEditor } from '../message/MessageEditor';
 import { useSendReaction } from '../hooks/useSendReaction';
+import { useWindowFocus } from '../../../hooks/useWindowFocus';
 
 type TimelineViewProps = {
-  threadTimeline: ThreadTimeline;
+  timeline: ThreadTimeline;
   threadInputRef: RefObject<HTMLElement>;
   editor: Editor;
+  eventId: string;
 };
 
 const PAGINATION_LIMIT = 80;
 
-export function TimelineView({ threadTimeline, threadInputRef, editor }: TimelineViewProps) {
+export function TimelineView({ timeline, threadInputRef, editor, eventId }: TimelineViewProps) {
   const ct = useClient();
   const roomId = useRoom();
   const encryptedRooms = useObservableValue(ct.encryptedRooms);
@@ -134,102 +138,91 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
   const imagePackRooms = useImagePackRooms(roomId);
 
   const scrollRef = useRef<HTMLDivElement>(null);
-  const scrollToBottomRef = useRef({
-    count: 0,
-    smooth: true,
-  });
-
-  const [focusItem, setFocusItem] = useState<
-    | {
-        index: number;
-        scrollTo: boolean;
-        highlight: boolean;
-      }
-    | undefined
-  >();
-  const alive = useAlive();
+  const timelineContainerRef = useRef<HTMLDivElement>(null);
 
   const { linkifyOpts, htmlReactParserOptions, htmlReactParserInlineOptions } =
     useMessageParserOptions(roomId, getRoomName, membersAPI.getName);
 
-  const threadMeta = useObservableValue(threadTimeline.meta);
-  const { redacted, reactions, edits } = useTimelineRelations(threadTimeline);
+  const threadMeta = useObservableValue(timeline.meta);
+  const { redacted, reactions, edits } = useTimelineRelations(timeline);
 
-  const localEventSenders = useObservableValue(threadTimeline.outbox.senders);
+  const localEventSenders = useObservableValue(timeline.outbox.senders);
   const { messageBatch, events, range, rangeAtStart, rangeAtEnd, atLiveEnd } =
-    useTimelineBatch(threadTimeline);
+    useTimelineBatch(timeline);
 
   const getScrollElement = useCallback(() => scrollRef.current, []);
 
-  useTimelinePrefetch(threadTimeline, PAGINATION_LIMIT);
-  const handlePaginate = useTimelinePaginate(threadTimeline, PAGINATION_LIMIT);
-  useTimelineScrollRestore(threadTimeline, scrollRef);
-  useRestoreScrollToBottom(scrollRef, messageBatch);
+  const readReceipt = useUserReadReceipt(timeline.threadId);
+  const lastReadEventInTimeline = useMemo(
+    () => !!readReceipt && !!messageBatch.messages.get(readReceipt.eventId),
+    [readReceipt, messageBatch]
+  );
+
+  const [eventLoading, setEventLoading] = useState(false);
+  useTimelinePrefetch(timeline, PAGINATION_LIMIT, !eventLoading);
+  const handlePaginate = useTimelinePaginate(timeline, PAGINATION_LIMIT, !eventLoading);
 
   const { getItems, scrollToItem, scrollToElement, observeBackAnchor, observeFrontAnchor } =
     useVirtualPaginator({
       count: messageBatch.size,
       limit: PAGINATION_LIMIT,
       range,
-      onRangeChange: useOnRangeChange(threadTimeline),
+      onRangeChange: useOnRangeChange(timeline),
       getScrollElement,
       getItemElement: useGetItemElement(scrollRef),
       onEnd: handlePaginate,
     });
 
-  const tryAutoMarkAsRead = useCallback(() => {
-    console.log('mark thread as read.');
-  }, []);
+  const { focusItem, setFocusItem } = useFocusItem(timeline, scrollToItem);
+  const focused = useWindowFocus();
+  useTimelineScrollRestore(timeline, scrollRef);
+  useRestoreScrollToBottom(scrollRef, messageBatch);
 
   const { atBottomLazy, atBottomObservable, atBottomAnchorRef } = useAtBottomToggle(
     getScrollElement,
-    messageBatch.next.end ?? false
+    atLiveEnd
   );
 
+  const tryAutoMarkAsRead = useCallback(() => {
+    if (!atBottomObservable.read) return;
+    console.log('%cmark as read.', 'background: blue; color: white; padding: 5px 10px;');
+  }, [atBottomObservable]);
+  useObservableValueListener(atBottomObservable, tryAutoMarkAsRead);
+
+  const { markerTs } = useUnreadMarker(atBottomLazy, focused, readReceipt?.ts);
+
+  useTimelineContainerResizeStickBottom(
+    timeline,
+    getScrollElement,
+    useCallback(() => timelineContainerRef.current, []),
+    atBottomObservable,
+    !focusItem && atLiveEnd
+  );
   useEditorResizeStickBottom(
     getScrollElement,
-    useCallback(() => threadInputRef?.current ?? null, [threadInputRef]),
+    useCallback(() => threadInputRef.current, [threadInputRef]),
     atBottomObservable
   );
-
-  // scroll to focused message
-  useLayoutEffect(() => {
-    if (focusItem && focusItem.scrollTo) {
-      scrollToItem(focusItem.index, {
-        behavior: 'instant',
-        align: 'center',
-        stopInView: true,
-      });
-    }
-
-    setTimeout(() => {
-      if (!alive()) return;
-      setFocusItem((currentItem) => {
-        if (currentItem === focusItem) return undefined;
-        return currentItem;
-      });
-    }, 2000);
-  }, [alive, focusItem, scrollToItem]);
-
-  // scroll to bottom of timeline
-  const scrollToBottomCount = scrollToBottomRef.current.count;
-  useLayoutEffect(() => {
-    if (scrollToBottomCount > 0) {
-      const scrollEl = scrollRef.current;
-      if (scrollEl)
-        scrollToBottom(scrollEl, scrollToBottomRef.current.smooth ? 'smooth' : 'instant');
-    }
-  }, [scrollToBottomCount]);
-
   useMessageEditorOutOfViewFocus(scrollRef, scrollToElement, editId);
 
-  const handleOpenReply = useCallback((replyId: string) => {
-    console.log(replyId);
-  }, []);
+  const { handleOpenEvent, handleJumpToUnread } = useJumpHandlers(
+    timeline,
+    readReceipt,
+    scrollToItem,
+    setFocusItem,
+    setEventLoading,
+    timeline.threadId
+  );
+
+  useEffect(() => {
+    if (eventId) {
+      handleOpenEvent(eventId);
+    }
+  }, [eventId, handleOpenEvent]);
 
   const handleUserClick = useUserClickHandler();
   const handleUsernameClick = useUsernameClickHandler(editor);
-  const [replyDraft, handleReplyClick] = useReplyClickHandler(editor, threadTimeline.threadId);
+  const [replyDraft, handleReplyClick] = useReplyClickHandler(editor, timeline.threadId);
 
   const { reactionSender, handleAddReaction } = useSendReaction(reactions, redacted);
 
@@ -254,20 +247,20 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
 
     const editEvents = edits.get(event.event_id);
     const editedEvent = getLatestEditEvent(event, editEvents, redacted);
-    const highlighted = focusItem?.index === item && focusItem.highlight;
+    const highlighted = focusItem?.eventId === event.event_id && focusItem.highlight;
 
     const replyEventId = fallbackReply(event.content) ? undefined : getReplyId(event.content);
     const replyJSX = replyEventId ? (
       <Reply
         roomId={roomId}
         eventId={replyEventId}
-        onClick={handleOpenReply}
+        onClick={handleOpenEvent}
         onUserClick={handleUserClick}
         getMemberPowerTag={getMemberPowerTag}
         accessibleTagColors={accessiblePowerTagColors}
         legacyUsernameColor={legacyUsernameColor || direct}
         getMemberName={membersAPI.getName}
-        timeline={threadTimeline}
+        timeline={timeline}
         htmlReactParserOptions={htmlReactParserInlineOptions}
         linkifyOpts={linkifyOpts}
       />
@@ -360,7 +353,6 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
     );
   };
 
-  const readReceipt = useUserReadReceipt(threadTimeline.threadId);
   const {
     getDayDivider,
     getThreadRootDivider,
@@ -368,8 +360,8 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
     updateDivider,
     clearDayDivider,
     clearNewDivider,
-  } = useEventDivider(readReceipt?.ts);
-  const { getCollapsed, updateCollapse } = useEventCollapse(threadTimeline.threadId);
+  } = useEventDivider(markerTs);
+  const { getCollapsed, updateCollapse } = useEventCollapse(timeline.threadId);
   const eventRenderer = (event: MessageEventWithoutRoomId, item: number) => {
     if (event.sender && ignoredUsersSet.has(event.sender)) {
       return null;
@@ -409,11 +401,8 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
 
   return (
     <Box grow="Yes" style={{ position: 'relative' }}>
-      {readReceipt && (
-        <UnreadControls
-          onJumpToUnread={() => threadTimeline.jumpToEvent(readReceipt.eventId)}
-          onMarkAsRead={() => undefined}
-        />
+      {readReceipt && !lastReadEventInTimeline && (
+        <UnreadControls onJumpToUnread={handleJumpToUnread} onMarkAsRead={() => undefined} />
       )}
       <Scroll ref={scrollRef} size="0" visibility="Hover" hideTrack>
         <Box direction="Column" style={{ minHeight: '100%' }}>
@@ -448,7 +437,7 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
               padding: `${config.space.S600} ${config.space.S400} ${config.space.S600} 0`,
             }}
           >
-            {!messageBatch.prev.end || !rangeAtStart || !threadMeta ? (
+            {!messageBatch.prev.end || !rangeAtStart || !threadMeta || eventLoading ? (
               <PlaceholderList
                 ref={observeBackAnchor}
                 count={5}
@@ -459,11 +448,12 @@ export function TimelineView({ threadTimeline, threadInputRef, editor }: Timelin
             ) : (
               <>{eventRenderer(threadMeta.rootEvent, -1)}</>
             )}
-            {getItems().map((item) => {
-              const event = events[item];
-              if (!event) return null;
-              return eventRenderer(event, item);
-            })}
+            {!eventLoading &&
+              getItems().map((item) => {
+                const event = events[item];
+                if (!event) return null;
+                return eventRenderer(event, item);
+              })}
             {(!messageBatch.next.end || !rangeAtEnd) && (
               <PlaceholderList
                 ref={observeFrontAnchor}
diff --git a/src/client/room/ThreadTimeline.ts b/src/client/room/ThreadTimeline.ts
index 270c0aa0..01550819 100644
--- a/src/client/room/ThreadTimeline.ts
+++ b/src/client/room/ThreadTimeline.ts
@@ -255,6 +255,12 @@ export class ThreadTimeline implements TimelineView, Disposable {
   }
 
   public async jumpToEvent(eventId: string): Promise<JumpTarget> {
+    // thread root is not part of timeline.
+    // return early so we do not have to wait for response
+    if (eventId === this.threadId) {
+      return { type: 'main', eventId };
+    }
+
     const resp = await this.request(
       getContext({
         pathParams: {
@@ -287,8 +293,9 @@ export class ThreadTimeline implements TimelineView, Disposable {
     if (threadId && threadId !== this.threadId) {
       return { type: 'thread', eventId, threadId };
     }
-    // event is not the root of this thread
-    if (!threadId && event.event_id !== this.threadId) {
+    // no untheaed reply should be put in timeline
+    // not event thread root
+    if (!threadId) {
       return { type: 'main', eventId };
     }
 
@@ -300,9 +307,18 @@ export class ThreadTimeline implements TimelineView, Disposable {
     };
   }
 
+  public async jumpToOldest(): Promise<void> {
+    if (this.batch.read.prev.end) {
+      this.range.setRange(MessageRange.atBackwardEnd(this.batch.read.size));
+      return;
+    }
+
+    this.batchManager.reload(MessageBatch.emptyAtBackwardEnd());
+  }
+
   public async jumpToLatest(): Promise<void> {
     if (this.batch.read.next.end) {
-      this.range.setRange(MessageRange.atLiveEnd(this.batch.read.size));
+      this.range.setRange(MessageRange.atForwardEnd(this.batch.read.size));
       return;
     }
 
diff --git a/src/client/room/Timeline.ts b/src/client/room/Timeline.ts
index 0a88c573..16592f2b 100644
--- a/src/client/room/Timeline.ts
+++ b/src/client/room/Timeline.ts
@@ -287,9 +287,18 @@ export class Timeline implements TimelineView, Disposable {
     };
   }
 
+  public async jumpToOldest(): Promise<void> {
+    if (this.batch.read.prev.end) {
+      this.range.setRange(MessageRange.atBackwardEnd(this.batch.read.size));
+      return;
+    }
+
+    this.batchManager.reload(MessageBatch.emptyAtBackwardEnd());
+  }
+
   public async jumpToLatest(): Promise<void> {
     if (this.batch.read.next.end) {
-      this.range.setRange(MessageRange.atLiveEnd(this.batch.read.size));
+      this.range.setRange(MessageRange.atForwardEnd(this.batch.read.size));
       return;
     }
 
diff --git a/src/client/room/TimelineView.ts b/src/client/room/TimelineView.ts
index e29ecfff..774ae8fe 100644
--- a/src/client/room/TimelineView.ts
+++ b/src/client/room/TimelineView.ts
@@ -17,6 +17,7 @@ export interface TimelineView {
   paginateBackward(limit: number): Promise<void>;
   paginateForward(limit: number): Promise<void>;
   jumpToEvent(eventId: string): Promise<JumpTarget>;
+  jumpToOldest(): Promise<void>;
   jumpToLatest(): Promise<void>;
   findEvent(eventId: string): MessageEventWithoutRoomId | undefined;
   findIndex(eventId: string): number;
diff --git a/src/client/room/messages/MessageBatch.ts b/src/client/room/messages/MessageBatch.ts
index 49e71150..2a3a5680 100644
--- a/src/client/room/messages/MessageBatch.ts
+++ b/src/client/room/messages/MessageBatch.ts
@@ -14,6 +14,16 @@ export class MessageBatch {
 
   public readonly change: BatchChange;
 
+  static emptyAtBackwardEnd(): MessageBatch {
+    return new MessageBatch(
+      randomStr(),
+      new Messages([]),
+      new BatchInfo(undefined, true),
+      new BatchInfo(),
+      new BatchChange()
+    );
+  }
+
   static emptyAtForwardEnd(): MessageBatch {
     return new MessageBatch(
       randomStr(),
diff --git a/src/client/room/messages/MessageRange.ts b/src/client/room/messages/MessageRange.ts
index ef4d0859..eb849c22 100644
--- a/src/client/room/messages/MessageRange.ts
+++ b/src/client/room/messages/MessageRange.ts
@@ -24,7 +24,14 @@ export class MessageRange implements Disposable {
 
   static rangeLimit = 80;
 
-  static atLiveEnd(len: number): RangeInfo {
+  static atBackwardEnd(len: number): RangeInfo {
+    return {
+      start: 0,
+      end: Math.min(len, 0 + this.rangeLimit),
+    };
+  }
+
+  static atForwardEnd(len: number): RangeInfo {
     return {
       start: Math.max(0, len - this.rangeLimit),
       end: len,
@@ -34,7 +41,7 @@ export class MessageRange implements Disposable {
   constructor(batch: ObservableValue<MessageBatch>) {
     const len = batch.read.size;
 
-    this.info = new ObservableValue(MessageRange.atLiveEnd(len), this.publishKey);
+    this.info = new ObservableValue(MessageRange.atForwardEnd(len), this.publishKey);
     this.oldLength = len;
 
     this.disposer.collect(batch.subscribe(this.onBatchUpdate.bind(this)));
@@ -49,7 +56,7 @@ export class MessageRange implements Disposable {
       const lenAdded = size - oldLen;
       this.setRange(
         oldLen === 0 && batch.next.end
-          ? MessageRange.atLiveEnd(size)
+          ? MessageRange.atForwardEnd(size)
           : this.adjustBackwardGrowth(lenAdded)
       );
       return;
@@ -71,7 +78,7 @@ export class MessageRange implements Disposable {
       return;
     }
 
-    this.setRange(MessageRange.atLiveEnd(size));
+    this.setRange(MessageRange.atForwardEnd(size));
 
     // clear the top cache since the timeline batch has changed
     this.scrollTopCache = undefined;

From 86e6e539a629713bd53222290bd523192dd6048e Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 27 Oct 2026 21:30:19 +0530
Subject: [PATCH 150/158] hold unread status and notificatoin count until first
 sync complete

---
 src/app/state/room/roomToNotifications.ts | 15 ++++++++++++---
 src/app/state/room/roomToUnread.ts        | 19 ++++++++++++++++---
 src/client/context.ts                     |  1 +
 src/client/initialize.ts                  | 10 +++++++++-
 4 files changed, 38 insertions(+), 7 deletions(-)

diff --git a/src/app/state/room/roomToNotifications.ts b/src/app/state/room/roomToNotifications.ts
index 5d0268e9..9ef75ec2 100644
--- a/src/app/state/room/roomToNotifications.ts
+++ b/src/app/state/room/roomToNotifications.ts
@@ -3,7 +3,7 @@ import { useCallback, useEffect } from 'react';
 import { UnreadNotificationCounts } from 'neurone/lib/api/types';
 import { useRoomsNotificationPreferencesContext } from '../../hooks/useRoomsNotificationPreferences';
 import { ClientContext } from '../../../client/context';
-import { useObservableValue } from '../../hooks/useObservableValue';
+import { useObservableValue, useObservableValueListener } from '../../hooks/useObservableValue';
 
 export type Notifications = UnreadNotificationCounts & {
   threads: Map<string, UnreadNotificationCounts>;
@@ -54,6 +54,15 @@ export const useBindRoomToNotificationsAtom = (
   }, [notifications, threadNotifications, setNotificationAtom, roomsNotificationPreferences]);
 
   useEffect(() => {
-    processNotifications();
-  }, [processNotifications]);
+    if (!ct.firstSync) {
+      processNotifications();
+    }
+  }, [ct.firstSync, processNotifications]);
+
+  useObservableValueListener(
+    ct.firstSync,
+    useCallback(() => {
+      processNotifications();
+    }, [processNotifications])
+  );
 };
diff --git a/src/app/state/room/roomToUnread.ts b/src/app/state/room/roomToUnread.ts
index c8c5c155..92f2a901 100644
--- a/src/app/state/room/roomToUnread.ts
+++ b/src/app/state/room/roomToUnread.ts
@@ -1,7 +1,7 @@
 import { atom, useSetAtom } from 'jotai';
-import { useEffect } from 'react';
+import { useCallback, useEffect } from 'react';
 import { ThreadId } from '../../../types/matrix/room';
-import { useObservableValue } from '../../hooks/useObservableValue';
+import { useObservableValue, useObservableValueListener } from '../../hooks/useObservableValue';
 import { getReadReceiptId } from '../../../client/storage/collections';
 import { ClientContext } from '../../../client/context';
 
@@ -12,7 +12,7 @@ export const useBindUnreadRoomsAtom = (ct: ClientContext, unreadRooms: typeof un
   const roomToLatestEvent = useObservableValue(ct.roomToLatestEvent);
   const userReadReceipts = useObservableValue(ct.userReadReceipt);
 
-  useEffect(() => {
+  const proccessUnread = useCallback(() => {
     const unreads = new Set<string>();
 
     Array.from(roomToLatestEvent.entries()).forEach(([roomId, event]) => {
@@ -27,4 +27,17 @@ export const useBindUnreadRoomsAtom = (ct: ClientContext, unreadRooms: typeof un
 
     setUnreadRooms(unreads);
   }, [ct, setUnreadRooms, userReadReceipts, roomToLatestEvent]);
+
+  useEffect(() => {
+    if (!ct.firstSync) {
+      proccessUnread();
+    }
+  }, [ct.firstSync, proccessUnread]);
+
+  useObservableValueListener(
+    ct.firstSync,
+    useCallback(() => {
+      proccessUnread();
+    }, [proccessUnread])
+  );
 };
diff --git a/src/client/context.ts b/src/client/context.ts
index f89bfd26..f127f09b 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -137,6 +137,7 @@ export type ClientContext = {
   megolmBackup: MegolmBackup;
 
   sync: SyncContext;
+  firstSync: ObservableValue<boolean>;
   requestAuthJSON: MatrixRequest;
   getTxnId: GetTxnId;
   logout: () => Promise<void>;
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index a54f99b7..08280241 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -1,5 +1,6 @@
 import { MatrixRequest } from 'neurone/lib/matrix-request';
 import { Disposer } from 'neurone/lib/utils/disposable';
+import { ObservableValue } from 'neurone/lib/utils/observable';
 import { removeSession, Session } from './sessions';
 import {
   ClientContext,
@@ -42,6 +43,7 @@ import { initializeCrypto } from './crypto';
 import { MegolmBackup } from './MegolmBackup';
 import { clearUserLocalStorage } from './localStorage';
 import { CallSessions } from './call';
+import { randomStr } from '../app/utils/common';
 
 export type InitializeClientResult = {
   ct: ClientContext;
@@ -49,6 +51,7 @@ export type InitializeClientResult = {
 };
 export const initializeClient = async (session: Session): Promise<InitializeClientResult> => {
   const disposer = new Disposer();
+  const publisherKey = randomStr();
 
   const { storage, deleteStorage, disconnectStorage } = await createStorage(session);
 
@@ -105,6 +108,7 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
     sync,
     () => syncTokenObservable.read
   );
+  const firstSync = new ObservableValue(true, publisherKey);
 
   const decryption = new DecryptionManager(machine);
 
@@ -169,6 +173,7 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
       observable: syncObservable,
       controller: syncController,
     },
+    firstSync,
     requestAuthJSON,
     getTxnId,
     logout: () => logoutManager.logout(),
@@ -178,7 +183,10 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
   const machineManager = new MachineManager(ct);
 
   const syncResponseManager = new SyncResponseManager(ct, syncTokenObservable, {
-    onWriteComplete,
+    onWriteComplete: () => {
+      if (firstSync.read) firstSync.publish(publisherKey, false);
+      onWriteComplete();
+    },
     onSyncToken,
     onVerificationRequest,
     onToDeviceEvents,

From 4c29b6e10e4bd8acbdb01702481d3693895bde63 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 27 Oct 2026 22:01:18 +0530
Subject: [PATCH 151/158] remove unread notification when unread count does not
 appear in room sync response

---
 src/client/syncWriter/utils.ts | 56 ++++++++++++++++++++++------------
 1 file changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/client/syncWriter/utils.ts b/src/client/syncWriter/utils.ts
index 3e017586..632f4d76 100644
--- a/src/client/syncWriter/utils.ts
+++ b/src/client/syncWriter/utils.ts
@@ -336,29 +336,41 @@ export const writeUnreadNotifications = async (
 ): Promise<void> => {
   const existing = await ct.storage.unreadNotifications.read.getMultiple(joinRooms);
 
-  const unreadNotificationsObjects: UnreadNotificationsObject[] = joinRooms.flatMap(
-    (roomId, index) => {
-      const joinRoom = join[roomId];
+  const unreadNotificationsObjects: UnreadNotificationsObject[] = [];
+  const roomsToDelete: string[] = [];
 
-      const existingUnread = existing[index]?.unread;
-      const unread = joinRoomUtil.roomUnreadNotifications(joinRoom);
+  joinRooms.forEach((roomId, index) => {
+    const joinRoom = join[roomId];
+    const existingUnread = existing[index]?.unread;
+    const unread = joinRoomUtil.roomUnreadNotifications(joinRoom);
 
-      if (
-        !unread ||
-        (existingUnread?.highlight_count === unread.highlight_count &&
-          existingUnread?.notification_count === unread.notification_count)
-      ) {
-        return [];
+    if (!unread) {
+      if (existingUnread) {
+        roomsToDelete.push(roomId);
       }
-      const obj: UnreadNotificationsObject = {
-        id: roomId,
-        unread,
-      };
-      return obj;
+      return;
     }
-  );
 
-  await ct.storage.unreadNotifications.write.putMultiple(unreadNotificationsObjects);
+    if (
+      existingUnread?.highlight_count === unread.highlight_count &&
+      existingUnread?.notification_count === unread.notification_count
+    ) {
+      return;
+    }
+
+    unreadNotificationsObjects.push({
+      id: roomId,
+      unread,
+    });
+  });
+
+  if (roomsToDelete.length > 0) {
+    await ct.storage.unreadNotifications.write.deleteMultiple(roomsToDelete);
+  }
+
+  if (unreadNotificationsObjects.length > 0) {
+    await ct.storage.unreadNotifications.write.putMultiple(unreadNotificationsObjects);
+  }
 };
 
 export const writeUnreadThreadNotifications = async (
@@ -399,8 +411,12 @@ export const writeUnreadThreadNotifications = async (
   const toRemoveKeys = notificationsToRemove.map((n) =>
     getUnreadThreadNotificationId(n.roomId, n.threadId)
   );
-  await ct.storage.unreadThreadNotifications.write.deleteMultiple(toRemoveKeys);
-  await ct.storage.unreadThreadNotifications.write.putMultiple(unreadThreadNotificationsObjects);
+  if (toRemoveKeys.length > 0) {
+    await ct.storage.unreadThreadNotifications.write.deleteMultiple(toRemoveKeys);
+  }
+  if (unreadThreadNotificationsObjects.length > 0) {
+    await ct.storage.unreadThreadNotifications.write.putMultiple(unreadThreadNotificationsObjects);
+  }
 };
 
 export const writeInviteRoomState = async (

From e96de762893b4b6383bcad97f6bded5b2a8228e5 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 27 Oct 2026 22:18:27 +0530
Subject: [PATCH 152/158] exclude matrix-sdk-crypto-wasm from optimize deps in
 vite

---
 vite.config.js | 33 +--------------------------------
 1 file changed, 1 insertion(+), 32 deletions(-)

diff --git a/vite.config.js b/vite.config.js
index 2c2e59ef..03b07bae 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -7,8 +7,6 @@ import { NodeGlobalsPolyfillPlugin } from '@esbuild-plugins/node-globals-polyfil
 import inject from '@rollup/plugin-inject';
 import topLevelAwait from 'vite-plugin-top-level-await';
 import { VitePWA } from 'vite-plugin-pwa';
-import fs from 'fs';
-import path from 'path';
 import buildConfig from './build.config';
 
 const copyFiles = {
@@ -50,35 +48,6 @@ const copyFiles = {
   ],
 };
 
-function serverMatrixSdkCryptoWasm(wasmFilePath) {
-  return {
-    name: 'vite-plugin-serve-matrix-sdk-crypto-wasm',
-    configureServer(server) {
-      server.middlewares.use((req, res, next) => {
-        if (req.url === wasmFilePath) {
-          const resolvedPath = path.join(
-            path.resolve(),
-            '/node_modules/@matrix-org/matrix-sdk-crypto-wasm/pkg/matrix_sdk_crypto_wasm_bg.wasm'
-          );
-
-          if (fs.existsSync(resolvedPath)) {
-            res.setHeader('Content-Type', 'application/wasm');
-            res.setHeader('Cache-Control', 'no-cache');
-
-            const fileStream = fs.createReadStream(resolvedPath);
-            fileStream.pipe(res);
-          } else {
-            res.writeHead(404);
-            res.end('File not found');
-          }
-        } else {
-          next();
-        }
-      });
-    },
-  };
-}
-
 export default defineConfig({
   appType: 'spa',
   publicDir: false,
@@ -92,7 +61,6 @@ export default defineConfig({
     },
   },
   plugins: [
-    serverMatrixSdkCryptoWasm('/node_modules/.vite/deps/pkg/matrix_sdk_crypto_wasm_bg.wasm'),
     topLevelAwait({
       // The export name of top-level await promise for each chunk module
       promiseExportName: '__tla',
@@ -119,6 +87,7 @@ export default defineConfig({
     }),
   ],
   optimizeDeps: {
+    exclude: ['@matrix-org/matrix-sdk-crypto-wasm'],
     esbuildOptions: {
       define: {
         global: 'globalThis',

From ea609d8ea9c105692d4b6695e8c1f778b443d97c Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Tue, 27 Oct 2026 22:25:19 +0530
Subject: [PATCH 153/158] fix cached scroll top position ignored when value is
 0 (on top)

---
 src/app/features/room/hooks/useTimeline.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/features/room/hooks/useTimeline.ts b/src/app/features/room/hooks/useTimeline.ts
index cd47f7f6..f078ef8b 100644
--- a/src/app/features/room/hooks/useTimeline.ts
+++ b/src/app/features/room/hooks/useTimeline.ts
@@ -142,7 +142,7 @@ export const useTimelineScrollRestore = (
     if (scrollEl) {
       const scrollTop = timeline.range.scrollTopCache;
       const batch = timeline.batch.read;
-      if (scrollTop) {
+      if (typeof scrollTop === 'number') {
         scrollEl.scrollTo({ top: scrollTop, behavior: 'instant' });
       } else if (batch.next.end && batch.messages.events.length > 0) {
         scrollToBottom(scrollEl, 'instant');

From 7374e9693ca749d96d5b9841d1338515a0155193 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 28 Oct 2026 18:26:10 +0530
Subject: [PATCH 154/158] show read receipt timestamp in seen by dialog

---
 .../components/event-readers/EventReaders.tsx | 101 +++++++++---------
 1 file changed, 53 insertions(+), 48 deletions(-)

diff --git a/src/app/components/event-readers/EventReaders.tsx b/src/app/components/event-readers/EventReaders.tsx
index e4291e02..546f952d 100644
--- a/src/app/components/event-readers/EventReaders.tsx
+++ b/src/app/components/event-readers/EventReaders.tsx
@@ -24,6 +24,8 @@ import { useObservableValuePromise } from '../../hooks/useObservableValue';
 import { useRoomMembersAPI } from '../../hooks/useRoomMembers';
 import { mxcToHttp } from '../../../client/mxcToHttp';
 import { useRoom } from '../../hooks/useRoom';
+import { Time } from '../message';
+import { useSettings } from '../../state/hooks/settings';
 
 export type EventReadersProps = {
   eventId: string;
@@ -34,6 +36,7 @@ export const EventReaders = as<'div', EventReadersProps>(
     const ct = useClient();
     const roomId = useRoom();
     const membersAPI = useRoomMembersAPI();
+    const { hour24Clock, dateFormatString } = useSettings();
 
     const eventReceipt = useObservableValuePromise(
       useMemo(
@@ -42,14 +45,6 @@ export const EventReaders = as<'div', EventReadersProps>(
       )
     );
 
-    const users: string[] = useMemo(() => {
-      const u = new Set<string>();
-      eventReceipt.value?.forEach((r) => {
-        u.add(r.userId);
-      });
-      return Array.from(u);
-    }, [eventReceipt]);
-
     const useAuthentication = useMediaAuthentication();
     const openProfile = useOpenUserRoomProfile();
     const spaceId = useSpaceOptionally();
@@ -72,48 +67,58 @@ export const EventReaders = as<'div', EventReadersProps>(
         <Box grow="Yes">
           <Scroll visibility="Hover" hideTrack size="300">
             <Box className={css.Content} direction="Column">
-              {users.map((readerId) => {
-                const name = membersAPI.getName(readerId);
-                const avatarMxcUrl = membersAPI.getAvatar(readerId);
-                const avatarUrl = avatarMxcUrl
-                  ? mxcToHttp(ct.session.baseUrl, avatarMxcUrl, useAuthentication).thumbnail({
-                      width: 96,
-                      height: 96,
-                      method: 'crop',
-                    })
-                  : undefined;
+              {Array.from(eventReceipt.value ?? [])
+                .sort((a, b) => b.ts - a.ts)
+                ?.map((receipt) => {
+                  const { userId, ts } = receipt;
+                  const name = membersAPI.getName(userId);
+                  const avatarMxcUrl = membersAPI.getAvatar(userId);
+                  const avatarUrl = avatarMxcUrl
+                    ? mxcToHttp(ct.session.baseUrl, avatarMxcUrl, useAuthentication).thumbnail({
+                        width: 96,
+                        height: 96,
+                        method: 'crop',
+                      })
+                    : undefined;
 
-                return (
-                  <MenuItem
-                    key={readerId}
-                    style={{ padding: `0 ${config.space.S200}` }}
-                    radii="400"
-                    onClick={(event) => {
-                      openProfile(
-                        roomId,
-                        spaceId,
-                        readerId,
-                        getMouseEventCords(event.nativeEvent),
-                        'Bottom'
-                      );
-                    }}
-                    before={
-                      <Avatar size="200">
-                        <UserAvatar
-                          userId={readerId}
-                          src={avatarUrl ?? undefined}
-                          alt={name}
-                          renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                  return (
+                    <MenuItem
+                      key={`${userId}${ts}`}
+                      style={{ padding: `0 ${config.space.S200}` }}
+                      radii="400"
+                      onClick={(event) => {
+                        openProfile(
+                          roomId,
+                          spaceId,
+                          userId,
+                          getMouseEventCords(event.nativeEvent),
+                          'Bottom'
+                        );
+                      }}
+                      before={
+                        <Avatar size="200">
+                          <UserAvatar
+                            userId={userId}
+                            src={avatarUrl ?? undefined}
+                            alt={name}
+                            renderFallback={() => <Icon size="50" src={Icons.User} filled />}
+                          />
+                        </Avatar>
+                      }
+                      after={
+                        <Time
+                          hour24Clock={hour24Clock}
+                          dateFormatString={dateFormatString}
+                          ts={ts}
                         />
-                      </Avatar>
-                    }
-                  >
-                    <Text size="T400" truncate>
-                      {name}
-                    </Text>
-                  </MenuItem>
-                );
-              })}
+                      }
+                    >
+                      <Text style={{ flexGrow: 1 }} size="T400" truncate>
+                        {name}
+                      </Text>
+                    </MenuItem>
+                  );
+                })}
             </Box>
           </Scroll>
         </Box>

From 6f4f9c74b4abbdc8a9bca1ce98129763df0fdc03 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 28 Oct 2026 18:27:08 +0530
Subject: [PATCH 155/158] add read marker class

---
 src/client/ReadMarker.ts | 69 ++++++++++++++++++++++++++++++++++++++++
 src/client/context.ts    |  2 ++
 src/client/initialize.ts |  3 ++
 3 files changed, 74 insertions(+)
 create mode 100644 src/client/ReadMarker.ts

diff --git a/src/client/ReadMarker.ts b/src/client/ReadMarker.ts
new file mode 100644
index 00000000..f8af6019
--- /dev/null
+++ b/src/client/ReadMarker.ts
@@ -0,0 +1,69 @@
+import { MatrixRequest, parseMatrixResp } from 'neurone/lib/matrix-request';
+import { ReceiptType } from 'neurone/lib/api/types';
+import { postReceiptEventId, PostReceiptEventIdOK } from 'neurone/lib/api/matrix/client/v3/rooms';
+import { AsyncTaskQueue, MatrixRequestRetrier, sleep } from 'neurone/lib/utils';
+import { Storage } from './storage';
+import { getReadReceiptId, ReadReceiptObject } from './storage/collections';
+import { ThreadId } from '../types/matrix/room';
+
+export class ReadMarker {
+  private readonly queue = new AsyncTaskQueue();
+
+  constructor(
+    private readonly storage: Storage,
+    private readonly request: MatrixRequest,
+    private readonly userId: string
+  ) {}
+
+  public async markAsRead(
+    roomId: string,
+    receiptType: ReceiptType,
+    eventId: string,
+    threadId?: string
+  ): Promise<void> {
+    await this.queue.enqueue(() => this.read(roomId, receiptType, eventId, threadId));
+  }
+
+  private async read(
+    roomId: string,
+    receiptType: ReceiptType,
+    eventId: string,
+    threadId?: string
+  ): Promise<void> {
+    const retrier = new MatrixRequestRetrier(sleep);
+
+    const endpoint = postReceiptEventId({
+      pathParams: { roomId, receiptType, eventId },
+      body: {
+        thread_id: threadId,
+      },
+    });
+
+    const response = await retrier.execute(() => this.request(endpoint));
+    const [err] = await parseMatrixResp<PostReceiptEventIdOK>(response);
+    if (err) {
+      throw err.data.error ?? err.data.errcode ?? 'Unknown Error';
+    }
+    await this.updateStore(roomId, receiptType, eventId, threadId);
+  }
+
+  private async updateStore(
+    roomId: string,
+    receiptType: ReceiptType,
+    eventId: string,
+    threadId?: string
+  ) {
+    const id = getReadReceiptId(roomId, this.userId, threadId ?? ThreadId.Main);
+    const receipt: ReadReceiptObject = {
+      id,
+      roomId,
+      userId: this.userId,
+      type: receiptType,
+      eventId,
+      ts: Date.now(),
+      threadId: threadId ?? ThreadId.Main,
+    };
+
+    await this.storage.readReceipt.write.put(receipt);
+  }
+}
diff --git a/src/client/context.ts b/src/client/context.ts
index f127f09b..14c63543 100644
--- a/src/client/context.ts
+++ b/src/client/context.ts
@@ -35,6 +35,7 @@ import { DecryptionManager } from './decryption';
 import { MegolmBackup } from './MegolmBackup';
 import { CallSessions } from './call';
 import { randomStr } from '../app/utils/common';
+import { ReadMarker } from './ReadMarker';
 
 export type StateContext = {
   join: {
@@ -127,6 +128,7 @@ export type ClientContext = {
   notifications: ObservableValue<UnreadNotificationsObject[]>;
   threadNotifications: ObservableValue<UnreadThreadNotificationsObject[]>;
   roomToTimeline: ObservableValue<Map<string, Timeline>>;
+  readMarker: ReadMarker;
 
   pendingMemberRooms: ObservableValue<string[]>;
   verificationRequest: Observable<InboundVerification | OutboundVerification>;
diff --git a/src/client/initialize.ts b/src/client/initialize.ts
index 08280241..34852ef4 100644
--- a/src/client/initialize.ts
+++ b/src/client/initialize.ts
@@ -44,6 +44,7 @@ import { MegolmBackup } from './MegolmBackup';
 import { clearUserLocalStorage } from './localStorage';
 import { CallSessions } from './call';
 import { randomStr } from '../app/utils/common';
+import { ReadMarker } from './ReadMarker';
 
 export type InitializeClientResult = {
   ct: ClientContext;
@@ -114,6 +115,7 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
 
   const callSessions = new CallSessions(storage, syncObservable);
   const roomToTimeline = createTimelines(rooms.join, syncObservable, requestAuthJSON, disposer);
+  const readMarker = new ReadMarker(storage, requestAuthJSON, session.userId);
 
   const logoutObservable = createLogoutObservable(syncObservable, disposer);
   const logoutManager = new LogoutManager(logoutObservable, requestAuthJSON, async () => {
@@ -161,6 +163,7 @@ export const initializeClient = async (session: Session): Promise<InitializeClie
     roomToCreators,
     roomToVersion,
     roomToTimeline,
+    readMarker,
 
     pendingMemberRooms,
     verificationRequest,

From 72371de4cbda541e5cd91b070c888b46b29bb86f Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 28 Oct 2026 20:21:27 +0530
Subject: [PATCH 156/158] fix unread and notification not updating in UI

---
 src/app/state/room/roomToNotifications.ts | 2 +-
 src/app/state/room/roomToUnread.ts        | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/state/room/roomToNotifications.ts b/src/app/state/room/roomToNotifications.ts
index 9ef75ec2..4c05eaed 100644
--- a/src/app/state/room/roomToNotifications.ts
+++ b/src/app/state/room/roomToNotifications.ts
@@ -54,7 +54,7 @@ export const useBindRoomToNotificationsAtom = (
   }, [notifications, threadNotifications, setNotificationAtom, roomsNotificationPreferences]);
 
   useEffect(() => {
-    if (!ct.firstSync) {
+    if (!ct.firstSync.read) {
       processNotifications();
     }
   }, [ct.firstSync, processNotifications]);
diff --git a/src/app/state/room/roomToUnread.ts b/src/app/state/room/roomToUnread.ts
index 92f2a901..e957bcea 100644
--- a/src/app/state/room/roomToUnread.ts
+++ b/src/app/state/room/roomToUnread.ts
@@ -29,7 +29,7 @@ export const useBindUnreadRoomsAtom = (ct: ClientContext, unreadRooms: typeof un
   }, [ct, setUnreadRooms, userReadReceipts, roomToLatestEvent]);
 
   useEffect(() => {
-    if (!ct.firstSync) {
+    if (!ct.firstSync.read) {
       proccessUnread();
     }
   }, [ct.firstSync, proccessUnread]);

From 24f5f7d679fb2d92b798a2628c8a971812547164 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 28 Oct 2026 21:24:47 +0530
Subject: [PATCH 157/158] add mark as read hook

---
 src/app/hooks/useMarkAsRead.ts     | 50 ++++++++++++++++++++++++++++++
 src/app/state/room/roomToUnread.ts |  3 +-
 src/client/ReadMarker.ts           |  8 ++++-
 src/client/syncWriter/utils.ts     |  2 +-
 4 files changed, 60 insertions(+), 3 deletions(-)
 create mode 100644 src/app/hooks/useMarkAsRead.ts

diff --git a/src/app/hooks/useMarkAsRead.ts b/src/app/hooks/useMarkAsRead.ts
new file mode 100644
index 00000000..2e2ebb83
--- /dev/null
+++ b/src/app/hooks/useMarkAsRead.ts
@@ -0,0 +1,50 @@
+import { useCallback } from 'react';
+import { useClient } from './useClient';
+import { getReadReceiptId, getUnreadThreadNotificationId } from '../../client/storage/collections';
+import { ThreadId } from '../../types/matrix/room';
+import { ReadMarker } from '../../client/ReadMarker';
+
+export const useMarkAsRead = (roomId: string, threadId?: string) => {
+  const ct = useClient();
+
+  const clearNotificationCount = useCallback(async () => {
+    if (threadId) {
+      await ct.storage.unreadThreadNotifications.write.delete(
+        getUnreadThreadNotificationId(roomId, threadId)
+      );
+    } else {
+      await ct.storage.unreadNotifications.write.delete(roomId);
+    }
+  }, [ct, roomId, threadId]);
+
+  const markAsRead = useCallback(async () => {
+    const latestEvent = ct.roomToLatestEvent.read.get(roomId);
+    const notification = threadId
+      ? ct.threadNotifications.read.find(
+          (n) => n.id === getUnreadThreadNotificationId(roomId, threadId)
+        )
+      : ct.notifications.read.find((n) => n.id === roomId);
+
+    const count = notification?.unread.notification_count ?? 0;
+
+    if (!latestEvent) {
+      if (count > 0) await clearNotificationCount();
+      return;
+    }
+    if (count > 0) {
+      await ct.readMarker.markAsRead(roomId, 'm.read', latestEvent.event_id);
+      await clearNotificationCount();
+    }
+
+    const receiptId = getReadReceiptId(roomId, ct.session.userId, threadId ?? ThreadId.Main);
+    const receipt = ct.userReadReceipt.read.find((r) => r.id === receiptId);
+
+    if (!receipt || !ReadMarker.hasUnread(receipt, latestEvent, ct.session.userId)) {
+      return;
+    }
+
+    await ct.readMarker.markAsRead(roomId, 'm.read', latestEvent.event_id);
+  }, [ct, roomId, threadId, clearNotificationCount]);
+
+  return markAsRead;
+};
diff --git a/src/app/state/room/roomToUnread.ts b/src/app/state/room/roomToUnread.ts
index e957bcea..096462bd 100644
--- a/src/app/state/room/roomToUnread.ts
+++ b/src/app/state/room/roomToUnread.ts
@@ -4,6 +4,7 @@ import { ThreadId } from '../../../types/matrix/room';
 import { useObservableValue, useObservableValueListener } from '../../hooks/useObservableValue';
 import { getReadReceiptId } from '../../../client/storage/collections';
 import { ClientContext } from '../../../client/context';
+import { ReadMarker } from '../../../client/ReadMarker';
 
 export const unreadRoomsAtom = atom<Set<string>>(new Set<string>());
 
@@ -19,7 +20,7 @@ export const useBindUnreadRoomsAtom = (ct: ClientContext, unreadRooms: typeof un
       const receipt = userReadReceipts.find(
         (r) => getReadReceiptId(roomId, ct.session.userId, ThreadId.Main) === r.id
       );
-      if (!receipt || receipt.ts > event.origin_server_ts || event.sender === ct.session.userId) {
+      if (!receipt || !ReadMarker.hasUnread(receipt, event, ct.session.userId)) {
         return;
       }
       unreads.add(roomId);
diff --git a/src/client/ReadMarker.ts b/src/client/ReadMarker.ts
index f8af6019..94650fa5 100644
--- a/src/client/ReadMarker.ts
+++ b/src/client/ReadMarker.ts
@@ -1,5 +1,5 @@
 import { MatrixRequest, parseMatrixResp } from 'neurone/lib/matrix-request';
-import { ReceiptType } from 'neurone/lib/api/types';
+import { MessageEventWithoutRoomId, ReceiptType } from 'neurone/lib/api/types';
 import { postReceiptEventId, PostReceiptEventIdOK } from 'neurone/lib/api/matrix/client/v3/rooms';
 import { AsyncTaskQueue, MatrixRequestRetrier, sleep } from 'neurone/lib/utils';
 import { Storage } from './storage';
@@ -9,6 +9,12 @@ import { ThreadId } from '../types/matrix/room';
 export class ReadMarker {
   private readonly queue = new AsyncTaskQueue();
 
+  static hasUnread = (
+    receipt: ReadReceiptObject,
+    event: MessageEventWithoutRoomId,
+    userId: string
+  ) => receipt && receipt.ts < event.origin_server_ts && event.sender !== userId;
+
   constructor(
     private readonly storage: Storage,
     private readonly request: MatrixRequest,
diff --git a/src/client/syncWriter/utils.ts b/src/client/syncWriter/utils.ts
index 632f4d76..ba011f3b 100644
--- a/src/client/syncWriter/utils.ts
+++ b/src/client/syncWriter/utils.ts
@@ -233,7 +233,7 @@ export const writeJoinRoomLatestEvent = async (
 
     for (let i = events.length - 1; i >= 0; i -= 1) {
       const event = events[i];
-      if (!('state_key' in event) && supportedTypes.includes(event.type)) {
+      if (supportedTypes.includes(event.type)) {
         roomLatestEventObjects.push({
           id: roomId,
           event,

From a2c8b0175fce849b73c2f16a7f197344fefa48e6 Mon Sep 17 00:00:00 2001
From: Ajay Bura <32841439+ajbura@users.noreply.github.com>
Date: Wed, 28 Oct 2026 22:07:50 +0530
Subject: [PATCH 158/158] use room creation event for activity sorting if
 latest event not found

---
 src/app/features/search/Search.tsx     | 18 +++++++++++-------
 src/app/hooks/useSpaceHierarchy.ts     | 20 +++++++++++---------
 src/app/pages/client/direct/Direct.tsx |  8 +++++---
 src/app/pages/client/home/Home.tsx     |  8 +++++---
 src/app/utils/sort.ts                  | 14 ++++++++++++++
 5 files changed, 46 insertions(+), 22 deletions(-)

diff --git a/src/app/features/search/Search.tsx b/src/app/features/search/Search.tsx
index f151c114..696ba062 100644
--- a/src/app/features/search/Search.tsx
+++ b/src/app/features/search/Search.tsx
@@ -38,7 +38,7 @@ import {
 import { RoomAvatar, RoomIcon } from '../../components/room-avatar';
 import { getAllParents, guessPerfectParent } from '../../utils/room';
 import { highlightText, makeHighlightRegex } from '../../plugins/react-custom-html-parser';
-import { factoryRoomIdByActivity } from '../../utils/sort';
+import { activityTsScope, factoryRoomIdByActivity } from '../../utils/sort';
 import { nameInitials } from '../../utils/common';
 import { useRoomNavigate } from '../../hooks/useRoomNavigate';
 import { useListFocusIndex } from '../../hooks/useListFocusIndex';
@@ -85,19 +85,23 @@ const useTopActiveRooms = (
   const roomToLatestEvent = useObservableValue(ct.roomToLatestEvent);
 
   return useMemo(() => {
-    const getTimestamp = (rId: string) => roomToLatestEvent.get(rId)?.origin_server_ts;
-
     if (searchRoomType === SearchRoomType.Spaces) {
       return spaces;
     }
     if (searchRoomType === SearchRoomType.Directs) {
-      return [...directs].sort(factoryRoomIdByActivity(getTimestamp)).slice(0, 20);
+      return [...directs]
+        .sort(factoryRoomIdByActivity(activityTsScope(ct, roomToLatestEvent)))
+        .slice(0, 20);
     }
     if (searchRoomType === SearchRoomType.Rooms) {
-      return [...rooms].sort(factoryRoomIdByActivity(getTimestamp)).slice(0, 20);
+      return [...rooms]
+        .sort(factoryRoomIdByActivity(activityTsScope(ct, roomToLatestEvent)))
+        .slice(0, 20);
     }
-    return [...rooms, ...directs].sort(factoryRoomIdByActivity(getTimestamp)).slice(0, 20);
-  }, [roomToLatestEvent, rooms, directs, spaces, searchRoomType]);
+    return [...rooms, ...directs]
+      .sort(factoryRoomIdByActivity(activityTsScope(ct, roomToLatestEvent)))
+      .slice(0, 20);
+  }, [ct, roomToLatestEvent, rooms, directs, spaces, searchRoomType]);
 };
 
 const useSearchTargetRooms = (
diff --git a/src/app/hooks/useSpaceHierarchy.ts b/src/app/hooks/useSpaceHierarchy.ts
index c4e3866b..557dc42a 100644
--- a/src/app/hooks/useSpaceHierarchy.ts
+++ b/src/app/hooks/useSpaceHierarchy.ts
@@ -6,7 +6,13 @@ import { getHierarchy, GetHierarchyOK } from 'neurone/lib/api/matrix/client/v1/r
 import { parseMatrixResp } from 'neurone/lib/matrix-request';
 import { SpaceChildContent } from '../../types/matrix/room';
 import { isRoomId } from '../utils/matrix';
-import { SortFunc, byOrderKey, byTsOldToNew, factoryRoomIdByActivity } from '../utils/sort';
+import {
+  SortFunc,
+  activityTsScope,
+  byOrderKey,
+  byTsOldToNew,
+  factoryRoomIdByActivity,
+} from '../utils/sort';
 import { ErrorCode } from '../cs-errorcode';
 import { useObservableValue } from './useObservableValue';
 import { useClient } from './useClient';
@@ -223,6 +229,7 @@ export const useJoinedHierarchyItems = (
   closedCategories: Set<string>,
   selectedRoomId: string | undefined
 ) => {
+  const ct = useClient();
   const roomToLatestEvent = useRoomsLatestEvent(rooms);
   const [sortByActivity] = useSetting('roomListByActivity');
 
@@ -238,19 +245,13 @@ export const useJoinedHierarchyItems = (
             return total.count > 0 || unreadRooms.has(item.roomId);
           })
           .sort((h1, h2) =>
-            factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts)(
-              h1.roomId,
-              h2.roomId
-            )
+            factoryRoomIdByActivity(activityTsScope(ct, roomToLatestEvent))(h1.roomId, h2.roomId)
           );
       }
 
       if (sortByActivity) {
         items.sort((h1, h2) =>
-          factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts)(
-            h1.roomId,
-            h2.roomId
-          )
+          factoryRoomIdByActivity(activityTsScope(ct, roomToLatestEvent))(h1.roomId, h2.roomId)
         );
         return items;
       }
@@ -260,6 +261,7 @@ export const useJoinedHierarchyItems = (
       return items;
     },
     [
+      ct,
       roomToLatestEvent,
       closedCategories,
       spaceId,
diff --git a/src/app/pages/client/direct/Direct.tsx b/src/app/pages/client/direct/Direct.tsx
index bd9f2df3..06381aa1 100644
--- a/src/app/pages/client/direct/Direct.tsx
+++ b/src/app/pages/client/direct/Direct.tsx
@@ -18,7 +18,7 @@ import {
 import { useVirtualizer } from '@tanstack/react-virtual';
 import FocusTrap from 'focus-trap-react';
 import { useNavigate } from 'react-router-dom';
-import { factoryRoomIdByActivity } from '../../../utils/sort';
+import { activityTsScope, factoryRoomIdByActivity } from '../../../utils/sort';
 import {
   NavButton,
   NavCategory,
@@ -210,12 +210,13 @@ export function Direct() {
           const total = getRoomTotalNotifications(notification);
           return total.count > 0 || unreadRooms.has(roomId);
         })
-        .sort(factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts));
+        .sort(factoryRoomIdByActivity(activityTsScope(ct, roomToLatestEvent)));
     }
     return Array.from(directs).sort(
-      factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts)
+      factoryRoomIdByActivity(activityTsScope(ct, roomToLatestEvent))
     );
   }, [
+    ct,
     directs,
     closedCategories,
     roomToNotifications,
@@ -290,6 +291,7 @@ export function Direct() {
                       ref={virtualizer.measureElement}
                     >
                       <RoomNavItem
+                        key={roomId}
                         roomId={roomId}
                         roomName={getRoomName(roomId) ?? 'Unknown'}
                         avatarUrl={getRoomAvatar(roomId)}
diff --git a/src/app/pages/client/home/Home.tsx b/src/app/pages/client/home/Home.tsx
index 0f2e3288..a4477c97 100644
--- a/src/app/pages/client/home/Home.tsx
+++ b/src/app/pages/client/home/Home.tsx
@@ -18,7 +18,7 @@ import {
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { useAtom } from 'jotai';
 import FocusTrap from 'focus-trap-react';
-import { factoryRoomIdByActivity, factoryRoomIdByAtoZ } from '../../../utils/sort';
+import { activityTsScope, factoryRoomIdByActivity, factoryRoomIdByAtoZ } from '../../../utils/sort';
 import {
   NavButton,
   NavCategory,
@@ -237,15 +237,16 @@ export function Home() {
           const total = getRoomTotalNotifications(notification);
           return total.count > 0 || unreadRooms.has(roomId);
         })
-        .sort(factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts));
+        .sort(factoryRoomIdByActivity(activityTsScope(ct, roomToLatestEvent)));
     }
     if (sortByActivity) {
       return Array.from(rooms).sort(
-        factoryRoomIdByActivity((rId) => roomToLatestEvent.get(rId)?.origin_server_ts)
+        factoryRoomIdByActivity(activityTsScope(ct, roomToLatestEvent))
       );
     }
     return Array.from(rooms).sort(factoryRoomIdByAtoZ(getRoomName));
   }, [
+    ct,
     getRoomName,
     rooms,
     closedCategories,
@@ -376,6 +377,7 @@ export function Home() {
                       ref={virtualizer.measureElement}
                     >
                       <RoomNavItem
+                        key={roomId}
                         roomId={roomId}
                         roomName={getRoomName(roomId) ?? 'Unknown'}
                         avatarUrl={getRoomAvatar(roomId)}
diff --git a/src/app/utils/sort.ts b/src/app/utils/sort.ts
index b44f24c3..3c6bf00b 100644
--- a/src/app/utils/sort.ts
+++ b/src/app/utils/sort.ts
@@ -1,5 +1,19 @@
+import { MessageEventWithoutRoomId } from 'neurone/lib/api/types';
+import { ClientContext } from '../../client/context';
+
 export type SortFunc<T> = (a: T, b: T) => number;
 
+export const activityTsScope = (
+  ct: ClientContext,
+  roomToLatestEvent: Map<string, MessageEventWithoutRoomId>
+) => {
+  const getTs = (rId: string) =>
+    roomToLatestEvent.get(rId)?.origin_server_ts ??
+    ct.state.join.create.read.find((ev) => ev.roomId === rId)?.event.origin_server_ts;
+
+  return getTs;
+};
+
 export const factoryRoomIdByActivity =
   (getLatestEventTs: (roomId: string) => number | undefined): SortFunc<string> =>
   (a, b) =>