diff --git a/CHANGELOG.md b/CHANGELOG.md index 42e186220f..3fcf11e37e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,10 @@ +Changes in [3.29.1](https://github.com/matrix-org/matrix-react-sdk/releases/tag/v3.29.1) (2021-09-13) +=================================================================================================== + +## 🔒 SECURITY FIXES + * Fix a security issue with message key sharing. See https://matrix.org/blog/2021/09/13/vulnerability-disclosure-key-sharing + for details. + Changes in [3.29.0](https://github.com/vector-im/element-desktop/releases/tag/v3.29.0) (2021-08-31) =================================================================================================== diff --git a/package.json b/package.json index 9798503e9e..9be65598e4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "matrix-react-sdk", - "version": "3.29.0", + "version": "3.29.1", "description": "SDK for matrix.org using React", "author": "matrix.org", "repository": { diff --git a/res/css/structures/_SpacePanel.scss b/res/css/structures/_SpacePanel.scss index bbb1867f16..29c8c0c36d 100644 --- a/res/css/structures/_SpacePanel.scss +++ b/res/css/structures/_SpacePanel.scss @@ -139,7 +139,6 @@ $activeBorderColor: $secondary-content; &:not(.mx_SpaceButton_narrow) { .mx_SpaceButton_selectionWrapper { width: 100%; - padding-right: 16px; overflow: hidden; } } @@ -151,7 +150,6 @@ $activeBorderColor: $secondary-content; display: block; text-overflow: ellipsis; overflow: hidden; - padding-right: 8px; font-size: $font-14px; line-height: $font-18px; } @@ -225,8 +223,7 @@ $activeBorderColor: $secondary-content; margin-top: auto; margin-bottom: auto; display: none; - position: absolute; - right: 4px; + position: relative; &::before { top: 2px; @@ -245,8 +242,6 @@ $activeBorderColor: $secondary-content; } .mx_SpacePanel_badgeContainer { - position: absolute; - // Create a flexbox to make aligning dot badges easier display: flex; align-items: center; @@ -264,6 +259,7 @@ $activeBorderColor: $secondary-content; &.collapsed { .mx_SpaceButton { .mx_SpacePanel_badgeContainer { + position: absolute; right: 0; top: 0; @@ -293,19 +289,12 @@ $activeBorderColor: $secondary-content; } &:not(.collapsed) { - .mx_SpacePanel_badgeContainer { - position: absolute; - right: 4px; - } - .mx_SpaceButton:hover, .mx_SpaceButton:focus-within, .mx_SpaceButton_hasMenuOpen { &:not(.mx_SpaceButton_invite) { // Hide the badge container on hover because it'll be a menu button .mx_SpacePanel_badgeContainer { - width: 0; - height: 0; display: none; } diff --git a/res/css/views/elements/_Field.scss b/res/css/views/elements/_Field.scss index d74c985d4c..71d37a015d 100644 --- a/res/css/views/elements/_Field.scss +++ b/res/css/views/elements/_Field.scss @@ -98,14 +98,14 @@ limitations under the License. transition: font-size 0.25s ease-out 0.1s, color 0.25s ease-out 0.1s, - top 0.25s ease-out 0.1s, + transform 0.25s ease-out 0.1s, background-color 0.25s ease-out 0.1s; color: $primary-content; background-color: transparent; font-size: $font-14px; + transform: translateY(0); position: absolute; left: 0px; - top: 0px; margin: 7px 8px; padding: 2px; pointer-events: none; // Allow clicks to fall through to the input @@ -124,10 +124,10 @@ limitations under the License. transition: font-size 0.25s ease-out 0s, color 0.25s ease-out 0s, - top 0.25s ease-out 0s, + transform 0.25s ease-out 0s, background-color 0.25s ease-out 0s; font-size: $font-10px; - top: -13px; + transform: translateY(-13px); padding: 0 2px; background-color: $field-focused-label-bg-color; pointer-events: initial; diff --git a/res/css/views/rooms/_Autocomplete.scss b/res/css/views/rooms/_Autocomplete.scss index 8d2b338d9d..fcdab37f5a 100644 --- a/res/css/views/rooms/_Autocomplete.scss +++ b/res/css/views/rooms/_Autocomplete.scss @@ -7,7 +7,6 @@ background: $background; border-bottom: none; border-radius: 8px 8px 0 0; - max-height: 35vh; overflow: clip; display: flex; flex-direction: column; @@ -64,6 +63,7 @@ margin: 12px; height: 100%; overflow-y: scroll; + max-height: 35vh; } .mx_Autocomplete_Completion_container_truncate { diff --git a/res/themes/dark/css/_dark.scss b/res/themes/dark/css/_dark.scss index 4a6db5dd55..0bc61d438d 100644 --- a/res/themes/dark/css/_dark.scss +++ b/res/themes/dark/css/_dark.scss @@ -184,6 +184,9 @@ $visual-bell-bg-color: #800; $room-warning-bg-color: $header-panel-bg-color; +$authpage-body-bg-color: $background; +$authpage-primary-color: $primary-content; + $dark-panel-bg-color: $header-panel-bg-color; $panel-gradient: rgba(34, 38, 46, 0), rgba(34, 38, 46, 1); diff --git a/res/themes/light-custom/css/_custom.scss b/res/themes/light-custom/css/_custom.scss index f4685fe8fa..455798a556 100644 --- a/res/themes/light-custom/css/_custom.scss +++ b/res/themes/light-custom/css/_custom.scss @@ -82,6 +82,8 @@ $tab-label-fg-color: var(--timeline-text-color); // was #4e5054 $authpage-lang-color: var(--timeline-text-color); $roomheader-color: var(--timeline-text-color); +// was #232f32 +$authpage-primary-color: var(--timeline-text-color); // --roomlist-text-secondary-color $roomtile-preview-color: var(--roomlist-text-secondary-color); $roomlist-header-color: var(--roomlist-text-secondary-color); diff --git a/src/components/structures/ContextMenu.tsx b/src/components/structures/ContextMenu.tsx index 332b6cd318..d65f8e3a10 100644 --- a/src/components/structures/ContextMenu.tsx +++ b/src/components/structures/ContextMenu.tsx @@ -322,10 +322,16 @@ export class ContextMenu extends React.PureComponent { const menuClasses = classNames({ 'mx_ContextualMenu': true, - 'mx_ContextualMenu_left': !hasChevron && position.left, - 'mx_ContextualMenu_right': !hasChevron && position.right, - 'mx_ContextualMenu_top': !hasChevron && position.top, - 'mx_ContextualMenu_bottom': !hasChevron && position.bottom, + /** + * In some cases we may get the number of 0, which still means that we're supposed to properly + * add the specific position class, but as it was falsy things didn't work as intended. + * In addition, defensively check for counter cases where we may get more than one value, + * even if we shouldn't. + */ + 'mx_ContextualMenu_left': !hasChevron && position.left !== undefined && !position.right, + 'mx_ContextualMenu_right': !hasChevron && position.right !== undefined && !position.left, + 'mx_ContextualMenu_top': !hasChevron && position.top !== undefined && !position.bottom, + 'mx_ContextualMenu_bottom': !hasChevron && position.bottom !== undefined && !position.top, 'mx_ContextualMenu_withChevron_left': chevronFace === ChevronFace.Left, 'mx_ContextualMenu_withChevron_right': chevronFace === ChevronFace.Right, 'mx_ContextualMenu_withChevron_top': chevronFace === ChevronFace.Top, @@ -404,17 +410,27 @@ export class ContextMenu extends React.PureComponent { } } +export type ToRightOf = { + left: number; + top: number; + chevronOffset: number; +}; + // Placement method for to position context menu to right of elementRect with chevronOffset -export const toRightOf = (elementRect: Pick, chevronOffset = 12) => { +export const toRightOf = (elementRect: Pick, chevronOffset = 12): ToRightOf => { const left = elementRect.right + window.pageXOffset + 3; let top = elementRect.top + (elementRect.height / 2) + window.pageYOffset; top -= chevronOffset + 8; // where 8 is half the height of the chevron return { left, top, chevronOffset }; }; +export type AboveLeftOf = IPosition & { + chevronFace: ChevronFace; +}; + // Placement method for to position context menu right-aligned and flowing to the left of elementRect, // and either above or below: wherever there is more space (maybe this should be aboveOrBelowLeftOf?) -export const aboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFace.None, vPadding = 0) => { +export const aboveLeftOf = (elementRect: DOMRect, chevronFace = ChevronFace.None, vPadding = 0): AboveLeftOf => { const menuOptions: IPosition & { chevronFace: ChevronFace } = { chevronFace }; const buttonRight = elementRect.right + window.pageXOffset; diff --git a/src/components/structures/MatrixChat.tsx b/src/components/structures/MatrixChat.tsx index 531dc9fbe9..14a9e54259 100644 --- a/src/components/structures/MatrixChat.tsx +++ b/src/components/structures/MatrixChat.tsx @@ -143,7 +143,7 @@ export enum Views { SOFT_LOGOUT, } -const AUTH_SCREENS = ["register", "login", "forgot_password", "start_sso", "start_cas"]; +const AUTH_SCREENS = ["register", "login", "forgot_password", "start_sso", "start_cas", "welcome"]; // Actions that are redirected through the onboarding process prior to being // re-dispatched. NOTE: some actions are non-trivial and would require diff --git a/src/components/structures/SpaceHierarchy.tsx b/src/components/structures/SpaceHierarchy.tsx index a0d4d9c42a..09099032dc 100644 --- a/src/components/structures/SpaceHierarchy.tsx +++ b/src/components/structures/SpaceHierarchy.tsx @@ -57,6 +57,7 @@ import { Key } from "../../Keyboard"; import { IState, RovingTabIndexProvider, useRovingTabIndex } from "../../accessibility/RovingTabIndex"; import { getDisplayAliasForRoom } from "./RoomDirectory"; import MatrixClientContext from "../../contexts/MatrixClientContext"; +import { useEventEmitterState } from "../../hooks/useEventEmitter"; interface IProps { space: Room; @@ -87,7 +88,8 @@ const Tile: React.FC = ({ }) => { const cli = useContext(MatrixClientContext); const joinedRoom = cli.getRoom(room.room_id)?.getMyMembership() === "join" ? cli.getRoom(room.room_id) : null; - const name = joinedRoom?.name || room.name || room.canonical_alias || room.aliases?.[0] + const joinedRoomName = useEventEmitterState(joinedRoom, "Room.name", room => room?.name); + const name = joinedRoomName || room.name || room.canonical_alias || room.aliases?.[0] || (room.room_type === RoomType.Space ? _t("Unnamed Space") : _t("Unnamed Room")); const [showChildren, toggleShowChildren] = useStateToggle(true); diff --git a/src/components/structures/SpaceRoomView.tsx b/src/components/structures/SpaceRoomView.tsx index 6bb0433448..3837d26564 100644 --- a/src/components/structures/SpaceRoomView.tsx +++ b/src/components/structures/SpaceRoomView.tsx @@ -78,6 +78,7 @@ import { CreateEventField, IGroupSummary } from "../views/dialogs/CreateSpaceFro import { useAsyncMemo } from "../../hooks/useAsyncMemo"; import Spinner from "../views/elements/Spinner"; import GroupAvatar from "../views/avatars/GroupAvatar"; +import { useDispatcher } from "../../hooks/useDispatcher"; interface IProps { space: Room; @@ -191,6 +192,11 @@ interface ISpacePreviewProps { const SpacePreview = ({ space, onJoinButtonClicked, onRejectButtonClicked }: ISpacePreviewProps) => { const cli = useContext(MatrixClientContext); const myMembership = useMyRoomMembership(space); + useDispatcher(defaultDispatcher, payload => { + if (payload.action === Action.JoinRoomError && payload.roomId === space.roomId) { + setBusy(false); // stop the spinner, join failed + } + }); const [busy, setBusy] = useState(false); diff --git a/src/components/views/right_panel/UserInfo.tsx b/src/components/views/right_panel/UserInfo.tsx index f90643f1df..4446ee1415 100644 --- a/src/components/views/right_panel/UserInfo.tsx +++ b/src/components/views/right_panel/UserInfo.tsx @@ -826,7 +826,7 @@ const RoomAdminToolsContainer: React.FC = ({ if (canAffectUser && me.powerLevel >= banPowerLevel) { banButton = ; } - if (canAffectUser && me.powerLevel >= editPowerLevel) { + if (canAffectUser && me.powerLevel >= editPowerLevel && !room.isSpaceRoom()) { muteButton = ( { null, ]; - let menuPosition; + let menuPosition: AboveLeftOf | undefined; if (this.ref.current) { const contentRect = this.ref.current.getBoundingClientRect(); menuPosition = aboveLeftOf(contentRect); diff --git a/src/components/views/rooms/NotificationBadge.tsx b/src/components/views/rooms/NotificationBadge.tsx index 8329de7391..a97d51fc90 100644 --- a/src/components/views/rooms/NotificationBadge.tsx +++ b/src/components/views/rooms/NotificationBadge.tsx @@ -14,7 +14,7 @@ See the License for the specific language governing permissions and limitations under the License. */ -import React from "react"; +import React, { MouseEvent } from "react"; import classNames from "classnames"; import { formatCount } from "../../../utils/FormattingUtils"; import SettingsStore from "../../../settings/SettingsStore"; @@ -22,6 +22,9 @@ import AccessibleButton from "../elements/AccessibleButton"; import { XOR } from "../../../@types/common"; import { NOTIFICATION_STATE_UPDATE, NotificationState } from "../../../stores/notifications/NotificationState"; import { replaceableComponent } from "../../../utils/replaceableComponent"; +import Tooltip from "../elements/Tooltip"; +import { _t } from "../../../languageHandler"; +import { NotificationColor } from "../../../stores/notifications/NotificationColor"; interface IProps { notification: NotificationState; @@ -39,6 +42,7 @@ interface IProps { } interface IClickableProps extends IProps, React.InputHTMLAttributes { + showUnsentTooltip?: boolean; /** * If specified will return an AccessibleButton instead of a div. */ @@ -47,6 +51,7 @@ interface IClickableProps extends IProps, React.InputHTMLAttributes { interface IState { showCounts: boolean; // whether or not to show counts. Independent of props.forceCount + showTooltip: boolean; } @replaceableComponent("views.rooms.NotificationBadge") @@ -59,6 +64,7 @@ export default class NotificationBadge extends React.PureComponent { + e.stopPropagation(); + this.setState({ + showTooltip: true, + }); + }; + + private onMouseLeave = () => { + this.setState({ + showTooltip: false, + }); + }; + public render(): React.ReactElement { /* eslint @typescript-eslint/no-unused-vars: ["error", { "ignoreRestSiblings": true }] */ - const { notification, forceCount, roomId, onClick, ...props } = this.props; + const { notification, showUnsentTooltip, forceCount, roomId, onClick, ...props } = this.props; // Don't show a badge if we don't need to if (notification.isIdle) return null; @@ -124,9 +143,24 @@ export default class NotificationBadge extends React.PureComponent; + } + return ( - + { symbol } + { tooltip } ); } diff --git a/src/components/views/rooms/RoomSublist.tsx b/src/components/views/rooms/RoomSublist.tsx index cf82040793..3c9f0ea65e 100644 --- a/src/components/views/rooms/RoomSublist.tsx +++ b/src/components/views/rooms/RoomSublist.tsx @@ -670,6 +670,7 @@ export default class RoomSublist extends React.Component { onClick={this.onBadgeClick} tabIndex={tabIndex} aria-label={ariaLabel} + showUnsentTooltip={true} /> ); diff --git a/src/components/views/rooms/RoomTile.tsx b/src/components/views/rooms/RoomTile.tsx index 4d6de10e1f..970915d653 100644 --- a/src/components/views/rooms/RoomTile.tsx +++ b/src/components/views/rooms/RoomTile.tsx @@ -17,7 +17,6 @@ limitations under the License. import React, { createRef } from "react"; import { Room } from "matrix-js-sdk/src/models/room"; -import { MatrixEvent } from "matrix-js-sdk/src/models/event"; import classNames from "classnames"; import { RovingTabIndexWrapper } from "../../../accessibility/RovingTabIndex"; import AccessibleButton, { ButtonEvent } from "../../views/elements/AccessibleButton"; @@ -51,8 +50,6 @@ import IconizedContextMenu, { } from "../context_menus/IconizedContextMenu"; import { CommunityPrototypeStore, IRoomProfile } from "../../../stores/CommunityPrototypeStore"; import { replaceableComponent } from "../../../utils/replaceableComponent"; -import { getUnsentMessages } from "../../structures/RoomStatusBar"; -import { StaticNotificationState } from "../../../stores/notifications/StaticNotificationState"; interface IProps { room: Room; @@ -68,7 +65,6 @@ interface IState { notificationsMenuPosition: PartialDOMRect; generalMenuPosition: PartialDOMRect; messagePreview?: string; - hasUnsentEvents: boolean; } const messagePreviewId = (roomId: string) => `mx_RoomTile_messagePreview_${roomId}`; @@ -95,7 +91,6 @@ export default class RoomTile extends React.PureComponent { selected: ActiveRoomObserver.activeRoomId === this.props.room.roomId, notificationsMenuPosition: null, generalMenuPosition: null, - hasUnsentEvents: this.countUnsentEvents() > 0, // generatePreview() will return nothing if the user has previews disabled messagePreview: "", @@ -106,11 +101,7 @@ export default class RoomTile extends React.PureComponent { this.roomProps = EchoChamber.forRoom(this.props.room); } - private countUnsentEvents(): number { - return getUnsentMessages(this.props.room).length; - } - - private onRoomNameUpdate = (room) => { + private onRoomNameUpdate = (room: Room) => { this.forceUpdate(); }; @@ -118,11 +109,6 @@ export default class RoomTile extends React.PureComponent { this.forceUpdate(); // notification state changed - update }; - private onLocalEchoUpdated = (ev: MatrixEvent, room: Room) => { - if (room?.roomId !== this.props.room.roomId) return; - this.setState({ hasUnsentEvents: this.countUnsentEvents() > 0 }); - }; - private onRoomPropertyUpdate = (property: CachedRoomKey) => { if (property === CachedRoomKey.NotificationVolume) this.onNotificationUpdate(); // else ignore - not important for this tile @@ -178,12 +164,11 @@ export default class RoomTile extends React.PureComponent { ); this.notificationState.on(NOTIFICATION_STATE_UPDATE, this.onNotificationUpdate); this.roomProps.on(PROPERTY_UPDATED, this.onRoomPropertyUpdate); - this.roomProps.on("Room.name", this.onRoomNameUpdate); + this.props.room?.on("Room.name", this.onRoomNameUpdate); CommunityPrototypeStore.instance.on( CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId), this.onCommunityUpdate, ); - MatrixClientPeg.get().on("Room.localEchoUpdated", this.onLocalEchoUpdated); } public componentWillUnmount() { @@ -208,7 +193,6 @@ export default class RoomTile extends React.PureComponent { CommunityPrototypeStore.getUpdateEventName(this.props.room.roomId), this.onCommunityUpdate, ); - MatrixClientPeg.get()?.removeListener("Room.localEchoUpdated", this.onLocalEchoUpdated); } private onAction = (payload: ActionPayload) => { @@ -587,30 +571,17 @@ export default class RoomTile extends React.PureComponent { />; let badge: React.ReactNode; - if (!this.props.isMinimized) { + if (!this.props.isMinimized && this.notificationState) { // aria-hidden because we summarise the unread count/highlight status in a manual aria-label below - if (this.state.hasUnsentEvents) { - // hardcode the badge to a danger state when there's unsent messages - badge = ( - - ); - } else if (this.notificationState) { - badge = ( - - ); - } + badge = ( + + ); } let messagePreview = null; diff --git a/src/components/views/spaces/SpaceCreateMenu.tsx b/src/components/views/spaces/SpaceCreateMenu.tsx index 59c970c7d0..c09b26e45f 100644 --- a/src/components/views/spaces/SpaceCreateMenu.tsx +++ b/src/components/views/spaces/SpaceCreateMenu.tsx @@ -97,9 +97,8 @@ const spaceNameValidator = withValidation({ ], }); -const nameToAlias = (name: string, domain: string): string => { - const localpart = name.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9_-]+/gi, ""); - return `#${localpart}:${domain}`; +const nameToLocalpart = (name: string): string => { + return name.trim().toLowerCase().replace(/\s+/g, "-").replace(/[^a-z0-9_-]+/gi, ""); }; // XXX: Temporary for the Spaces release only @@ -176,8 +175,9 @@ export const SpaceCreateForm: React.FC = ({ value={name} onChange={ev => { const newName = ev.target.value; - if (!alias || alias === nameToAlias(name, domain)) { - setAlias(nameToAlias(newName, domain)); + if (!alias || alias === `#${nameToLocalpart(name)}:${domain}`) { + setAlias(`#${nameToLocalpart(newName)}:${domain}`); + aliasFieldRef.current?.validate({ allowEmpty: true }); } setName(newName); }} @@ -194,7 +194,7 @@ export const SpaceCreateForm: React.FC = ({ onChange={setAlias} domain={domain} value={alias} - placeholder={name ? nameToAlias(name, domain) : _t("e.g. my-space")} + placeholder={name ? nameToLocalpart(name) : _t("e.g. my-space")} label={_t("Address")} disabled={busy} onKeyDown={onKeyDown} @@ -217,6 +217,7 @@ export const SpaceCreateForm: React.FC = ({ }; const SpaceCreateMenu = ({ onFinished }) => { + const cli = useContext(MatrixClientContext); const [visibility, setVisibility] = useState(null); const [busy, setBusy] = useState(false); @@ -233,14 +234,18 @@ const SpaceCreateMenu = ({ onFinished }) => { setBusy(true); // require & validate the space name field - if (!await spaceNameField.current.validate({ allowEmpty: false })) { + if (!(await spaceNameField.current.validate({ allowEmpty: false }))) { spaceNameField.current.focus(); spaceNameField.current.validate({ allowEmpty: false, focused: true }); setBusy(false); return; } - // validate the space name alias field but do not require it - if (visibility === Visibility.Public && !await spaceAliasField.current.validate({ allowEmpty: true })) { + + // validate the space alias field but do not require it + const aliasLocalpart = alias.substring(1, alias.length - cli.getDomain().length - 1); + if (visibility === Visibility.Public && aliasLocalpart && + (await spaceAliasField.current.validate({ allowEmpty: true })) === false + ) { spaceAliasField.current.focus(); spaceAliasField.current.validate({ allowEmpty: true, focused: true }); setBusy(false); @@ -248,7 +253,13 @@ const SpaceCreateMenu = ({ onFinished }) => { } try { - await createSpace(name, visibility === Visibility.Public, alias, topic, avatar); + await createSpace( + name, + visibility === Visibility.Public, + aliasLocalpart ? alias : undefined, + topic, + avatar, + ); onFinished(); } catch (e) { diff --git a/src/components/views/spaces/SpaceTreeLevel.tsx b/src/components/views/spaces/SpaceTreeLevel.tsx index 35c0275240..df6c4c8149 100644 --- a/src/components/views/spaces/SpaceTreeLevel.tsx +++ b/src/components/views/spaces/SpaceTreeLevel.tsx @@ -93,6 +93,7 @@ export const SpaceButton: React.FC = ({ notification={notificationState} aria-label={ariaLabel} tabIndex={tabIndex} + showUnsentTooltip={true} /> ; } diff --git a/src/hooks/useEventEmitter.ts b/src/hooks/useEventEmitter.ts index 74b23f0198..693eebc0e3 100644 --- a/src/hooks/useEventEmitter.ts +++ b/src/hooks/useEventEmitter.ts @@ -20,7 +20,11 @@ import type { EventEmitter } from "events"; type Handler = (...args: any[]) => void; // Hook to wrap event emitter on and removeListener in hook lifecycle -export const useEventEmitter = (emitter: EventEmitter, eventName: string | symbol, handler: Handler) => { +export const useEventEmitter = ( + emitter: EventEmitter | undefined, + eventName: string | symbol, + handler: Handler, +) => { // Create a ref that stores handler const savedHandler = useRef(handler); @@ -51,7 +55,11 @@ export const useEventEmitter = (emitter: EventEmitter, eventName: string | symbo type Mapper = (...args: any[]) => T; -export const useEventEmitterState = (emitter: EventEmitter, eventName: string | symbol, fn: Mapper): T => { +export const useEventEmitterState = ( + emitter: EventEmitter | undefined, + eventName: string | symbol, + fn: Mapper, +): T => { const [value, setValue] = useState(fn()); const handler = useCallback((...args: any[]) => { setValue(fn(...args)); diff --git a/src/hooks/useRoomState.ts b/src/hooks/useRoomState.ts index e778acf8a9..89c94df10b 100644 --- a/src/hooks/useRoomState.ts +++ b/src/hooks/useRoomState.ts @@ -25,7 +25,7 @@ const defaultMapper: Mapper = (roomState: RoomState) => roomState; // Hook to simplify watching Matrix Room state export const useRoomState = ( - room: Room, + room?: Room, mapper: Mapper = defaultMapper as Mapper, ): T => { const [value, setValue] = useState(room ? mapper(room.currentState) : undefined); diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index b9923f4bc1..90c02aa1b3 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -1598,6 +1598,7 @@ "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.": "Your private messages are normally encrypted, but this room isn't. Usually this is due to an unsupported device or method being used, like email invites.", "Enable encryption in settings.": "Enable encryption in settings.", "End-to-end encryption isn't enabled": "End-to-end encryption isn't enabled", + "Message didn't send. Click for info.": "Message didn't send. Click for info.", "Unpin": "Unpin", "View message": "View message", "%(duration)ss": "%(duration)ss", diff --git a/src/stores/SpaceStore.tsx b/src/stores/SpaceStore.tsx index f49d51454b..cd0acc9d88 100644 --- a/src/stores/SpaceStore.tsx +++ b/src/stores/SpaceStore.tsx @@ -629,11 +629,18 @@ export class SpaceStoreClass extends AsyncStoreWithClient { }; private onRoom = (room: Room, newMembership?: string, oldMembership?: string) => { - const membership = newMembership || room.getMyMembership(); + const roomMembership = room.getMyMembership(); + if (!roomMembership) { + // room is still being baked in the js-sdk, we'll process it at Room.myMembership instead + return; + } + const membership = newMembership || roomMembership; if (!room.isSpaceRoom()) { // this.onRoomUpdate(room); - this.onRoomsUpdate(); + // this.onRoomsUpdate(); + // ideally we only need onRoomsUpdate here but it doesn't rebuild parentMap so always adds new rooms to Home + this.rebuild(); if (membership === "join") { // the user just joined a room, remove it from the suggested list if it was there diff --git a/src/stores/notifications/ListNotificationState.ts b/src/stores/notifications/ListNotificationState.ts index 6c67dbdd08..97ba2bd80b 100644 --- a/src/stores/notifications/ListNotificationState.ts +++ b/src/stores/notifications/ListNotificationState.ts @@ -32,7 +32,7 @@ export class ListNotificationState extends NotificationState { } public get symbol(): string { - return null; // This notification state doesn't support symbols + return this._color === NotificationColor.Unsent ? "!" : null; } public setRooms(rooms: Room[]) { diff --git a/src/stores/notifications/NotificationColor.ts b/src/stores/notifications/NotificationColor.ts index b12f2b7c00..fadd5ac67e 100644 --- a/src/stores/notifications/NotificationColor.ts +++ b/src/stores/notifications/NotificationColor.ts @@ -21,4 +21,5 @@ export enum NotificationColor { Bold, // no badge, show as unread Grey, // unread notified messages Red, // unread pings + Unsent, // some messages failed to send } diff --git a/src/stores/notifications/RoomNotificationState.ts b/src/stores/notifications/RoomNotificationState.ts index 3fadbe7d7a..d0479200bd 100644 --- a/src/stores/notifications/RoomNotificationState.ts +++ b/src/stores/notifications/RoomNotificationState.ts @@ -24,6 +24,7 @@ import { Room } from "matrix-js-sdk/src/models/room"; import * as RoomNotifs from '../../RoomNotifs'; import * as Unread from '../../Unread'; import { NotificationState } from "./NotificationState"; +import { getUnsentMessages } from "../../components/structures/RoomStatusBar"; export class RoomNotificationState extends NotificationState implements IDestroyable { constructor(public readonly room: Room) { @@ -32,6 +33,7 @@ export class RoomNotificationState extends NotificationState implements IDestroy this.room.on("Room.timeline", this.handleRoomEventUpdate); this.room.on("Room.redaction", this.handleRoomEventUpdate); this.room.on("Room.myMembership", this.handleMembershipUpdate); + this.room.on("Room.localEchoUpdated", this.handleLocalEchoUpdated); MatrixClientPeg.get().on("Event.decrypted", this.handleRoomEventUpdate); MatrixClientPeg.get().on("accountData", this.handleAccountDataUpdate); this.updateNotificationState(); @@ -47,12 +49,17 @@ export class RoomNotificationState extends NotificationState implements IDestroy this.room.removeListener("Room.timeline", this.handleRoomEventUpdate); this.room.removeListener("Room.redaction", this.handleRoomEventUpdate); this.room.removeListener("Room.myMembership", this.handleMembershipUpdate); + this.room.removeListener("Room.localEchoUpdated", this.handleLocalEchoUpdated); if (MatrixClientPeg.get()) { MatrixClientPeg.get().removeListener("Event.decrypted", this.handleRoomEventUpdate); MatrixClientPeg.get().removeListener("accountData", this.handleAccountDataUpdate); } } + private handleLocalEchoUpdated = () => { + this.updateNotificationState(); + }; + private handleReadReceipt = (event: MatrixEvent, room: Room) => { if (!readReceiptChangeIsFor(event, MatrixClientPeg.get())) return; // not our own - ignore if (room.roomId !== this.room.roomId) return; // not for us - ignore @@ -79,7 +86,12 @@ export class RoomNotificationState extends NotificationState implements IDestroy private updateNotificationState() { const snapshot = this.snapshot(); - if (RoomNotifs.getRoomNotifsState(this.room.roomId) === RoomNotifs.MUTE) { + if (getUnsentMessages(this.room).length > 0) { + // When there are unsent messages we show a red `!` + this._color = NotificationColor.Unsent; + this._symbol = "!"; + this._count = 1; // not used, technically + } else if (RoomNotifs.getRoomNotifsState(this.room.roomId) === RoomNotifs.MUTE) { // When muted we suppress all notification states, even if we have context on them. this._color = NotificationColor.None; this._symbol = null; diff --git a/src/stores/notifications/SpaceNotificationState.ts b/src/stores/notifications/SpaceNotificationState.ts index f8eb07251b..137b2ca0f2 100644 --- a/src/stores/notifications/SpaceNotificationState.ts +++ b/src/stores/notifications/SpaceNotificationState.ts @@ -31,7 +31,7 @@ export class SpaceNotificationState extends NotificationState { } public get symbol(): string { - return null; // This notification state doesn't support symbols + return this._color === NotificationColor.Unsent ? "!" : null; } public setRooms(rooms: Room[]) { @@ -54,7 +54,7 @@ export class SpaceNotificationState extends NotificationState { } public getFirstRoomWithNotifications() { - return this.rooms.find((room) => room.getUnreadNotificationCount() > 0).roomId; + return Object.values(this.states).find(state => state.color >= this.color)?.room.roomId; } public destroy() { @@ -83,4 +83,3 @@ export class SpaceNotificationState extends NotificationState { this.emitIfUpdated(snapshot); } } -