Merge branch 'develop' into AccessibleButton

res/css/components/views/beacon/_LeftPanelLiveShareWarning.scss

@@ -15,6 +15,7 @@ limitations under the License.
 */
 
 .mx_LeftPanelLiveShareWarning {
+    @mixin ButtonResetDefault;
     width: 100%;
     box-sizing: border-box;
 
@@ -29,3 +30,7 @@ limitations under the License.
     // go above to get hover for title
     z-index: 1;
 }
+
+.mx_LeftPanelLiveShareWarning__error {
+    background-color: $alert;
+}

res/css/components/views/beacon/_RoomLiveShareWarning.scss

@@ -48,3 +48,13 @@ limitations under the License.
 .mx_RoomLiveShareWarning_spinner {
     margin-right: $spacing-16;
 }
+
+.mx_RoomLiveShareWarning_closeButton {
+    @mixin ButtonResetDefault;
+    margin-left: $spacing-16;
+}
+
+.mx_RoomLiveShareWarning_closeButtonIcon {
+    height: $font-18px;
+    padding: $spacing-4;
+}

res/css/views/rooms/_EventTile.scss

@@ -970,6 +970,7 @@ $threadInfoLineHeight: calc(2 * $font-12px);
         .mx_EventTile_content,
         .mx_HiddenBody,
         .mx_RedactedBody,
+        .mx_UnknownBody,
         .mx_MPollBody,
         .mx_ReplyChain_wrapper {
             margin-left: 36px;

src/ContentMessages.ts

@@ -47,6 +47,7 @@ import { decorateStartSendingTime, sendRoundTripMetric } from "./sendTimePerform
 import { TimelineRenderingType } from "./contexts/RoomContext";
 import RoomViewStore from "./stores/RoomViewStore";
 import { addReplyToMessageContent } from "./utils/Reply";
+import { attachRelation } from "./components/views/rooms/SendMessageComposer";
 
 const MAX_WIDTH = 800;
 const MAX_HEIGHT = 600;
@@ -585,10 +586,7 @@ export default class ContentMessages {
             msgtype: "", // set later
         };
 
-        if (relation) {
-            content["m.relates_to"] = relation;
-        }
-
+        attachRelation(content, relation);
         if (replyToEvent) {
             addReplyToMessageContent(content, replyToEvent, {
                 includeLegacyFallback: false,

src/Unread.ts

@@ -21,6 +21,8 @@ import { EventType } from "matrix-js-sdk/src/@types/event";
 import { MatrixClientPeg } from "./MatrixClientPeg";
 import shouldHideEvent from './shouldHideEvent';
 import { haveTileForEvent } from "./components/views/rooms/EventTile";
+import SettingsStore from "./settings/SettingsStore";
+import { RoomNotificationStateStore } from "./stores/notifications/RoomNotificationStateStore";
 
 /**
  * Returns true if this event arriving in a room should affect the room's
@@ -57,14 +59,21 @@ export function doesRoomHaveUnreadMessages(room: Room): boolean {
     // despite the name of the method :((
     const readUpToId = room.getEventReadUpTo(myUserId);
 
-    // as we don't send RRs for our own messages, make sure we special case that
-    // if *we* sent the last message into the room, we consider it not unread!
-    // Should fix: https://github.com/vector-im/element-web/issues/3263
-    //             https://github.com/vector-im/element-web/issues/2427
-    // ...and possibly some of the others at
-    //             https://github.com/vector-im/element-web/issues/3363
-    if (room.timeline.length && room.timeline[room.timeline.length - 1].getSender() === myUserId) {
-        return false;
+    if (!SettingsStore.getValue("feature_thread")) {
+        // as we don't send RRs for our own messages, make sure we special case that
+        // if *we* sent the last message into the room, we consider it not unread!
+        // Should fix: https://github.com/vector-im/element-web/issues/3263
+        //             https://github.com/vector-im/element-web/issues/2427
+        // ...and possibly some of the others at
+        //             https://github.com/vector-im/element-web/issues/3363
+        if (room.timeline.length && room.timeline[room.timeline.length - 1].getSender() === myUserId) {
+            return false;
+        }
+    } else {
+        const threadState = RoomNotificationStateStore.instance.getThreadsRoomState(room);
+        if (threadState.color > 0) {
+            return true;
+        }
     }
 
     // if the read receipt relates to an event is that part of a thread

src/components/structures/ThreadView.tsx

@@ -51,6 +51,7 @@ import { KeyBindingAction } from "../../accessibility/KeyboardShortcuts";
 import Measured from '../views/elements/Measured';
 import PosthogTrackers from "../../PosthogTrackers";
 import { ButtonEvent } from "../views/elements/AccessibleButton";
+import RoomViewStore from '../../stores/RoomViewStore';
 
 interface IProps {
     room: Room;
@@ -106,9 +107,19 @@ export default class ThreadView extends React.Component<IProps, IState> {
     public componentWillUnmount(): void {
         this.teardownThread();
         if (this.dispatcherRef) dis.unregister(this.dispatcherRef);
-        const room = MatrixClientPeg.get().getRoom(this.props.mxEvent.getRoomId());
+        const roomId = this.props.mxEvent.getRoomId();
+        const room = MatrixClientPeg.get().getRoom(roomId);
         room.removeListener(ThreadEvent.New, this.onNewThread);
         SettingsStore.unwatchSetting(this.layoutWatcherRef);
+
+        const hasRoomChanged = RoomViewStore.getRoomId() !== roomId;
+        if (this.props.isInitialEventHighlighted && !hasRoomChanged) {
+            dis.dispatch<ViewRoomPayload>({
+                action: Action.ViewRoom,
+                room_id: this.props.room.roomId,
+                metricsTrigger: undefined, // room doesn't change
+            });
+        }
     }
 
     public componentDidUpdate(prevProps) {
@@ -206,7 +217,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
         }
     };
 
-    private onScroll = (): void => {
+    private resetHighlightedEvent = (): void => {
         if (this.props.initialEvent && this.props.isInitialEventHighlighted) {
             dis.dispatch<ViewRoomPayload>({
                 action: Action.ViewRoom,
@@ -363,7 +374,7 @@ export default class ThreadView extends React.Component<IProps, IState> {
                             editState={this.state.editState}
                             eventId={this.props.initialEvent?.getId()}
                             highlightedEventId={highlightedEventId}
-                            onUserScroll={this.onScroll}
+                            onUserScroll={this.resetHighlightedEvent}
                             onPaginationRequest={this.onPaginationRequest}
                         />
                     </div> }

src/components/views/beacon/LeftPanelLiveShareWarning.tsx

@@ -21,30 +21,80 @@ import { useEventEmitterState } from '../../../hooks/useEventEmitter';
 import { _t } from '../../../languageHandler';
 import { OwnBeaconStore, OwnBeaconStoreEvent } from '../../../stores/OwnBeaconStore';
 import { Icon as LiveLocationIcon } from '../../../../res/img/location/live-location.svg';
+import { ViewRoomPayload } from '../../../dispatcher/payloads/ViewRoomPayload';
+import { Action } from '../../../dispatcher/actions';
+import dispatcher from '../../../dispatcher/dispatcher';
+import AccessibleButton from '../elements/AccessibleButton';
 
 interface Props {
     isMinimized?: boolean;
 }
 
+/**
+ * Choose the most relevant beacon
+ * and get its roomId
+ */
+const chooseBestBeaconRoomId = (liveBeaconIds, errorBeaconIds): string | undefined => {
+    // both lists are ordered by creation timestamp in store
+    // so select latest beacon
+    const beaconId = errorBeaconIds?.[0] ?? liveBeaconIds?.[0];
+    if (!beaconId) {
+        return undefined;
+    }
+    const beacon = OwnBeaconStore.instance.getBeaconById(beaconId);
+
+    return beacon?.roomId;
+};
+
 const LeftPanelLiveShareWarning: React.FC<Props> = ({ isMinimized }) => {
     const isMonitoringLiveLocation = useEventEmitterState(
         OwnBeaconStore.instance,
         OwnBeaconStoreEvent.MonitoringLivePosition,
         () => OwnBeaconStore.instance.isMonitoringLiveLocation,
     );
 
+    const beaconIdsWithWireError = useEventEmitterState(
+        OwnBeaconStore.instance,
+        OwnBeaconStoreEvent.WireError,
+        () => OwnBeaconStore.instance.getLiveBeaconIdsWithWireError(),
+    );
+
+    const liveBeaconIds = useEventEmitterState(
+        OwnBeaconStore.instance,
+        OwnBeaconStoreEvent.LivenessChange,
+        () => OwnBeaconStore.instance.getLiveBeaconIds(),
+    );
+
+    const hasWireErrors = !!beaconIdsWithWireError.length;
+
     if (!isMonitoringLiveLocation) {
         return null;
     }
 
-    return <div
+    const relevantBeaconRoomId = chooseBestBeaconRoomId(liveBeaconIds, beaconIdsWithWireError);
+
+    const onWarningClick = relevantBeaconRoomId ? () => {
+        dispatcher.dispatch<ViewRoomPayload>({
+            action: Action.ViewRoom,
+            room_id: relevantBeaconRoomId,
+            metricsTrigger: undefined,
+        });
+    } : undefined;
+
+    const label = hasWireErrors ?
+        _t('An error occured whilst sharing your live location') :
+        _t('You are sharing your live location');
+
+    return <AccessibleButton
         className={classNames('mx_LeftPanelLiveShareWarning', {
             'mx_LeftPanelLiveShareWarning__minimized': isMinimized,
+            'mx_LeftPanelLiveShareWarning__error': hasWireErrors,
         })}
-        title={isMinimized ? _t('You are sharing your live location') : undefined}
+        title={isMinimized ? label : undefined}
+        onClick={onWarningClick}
     >
-        { isMinimized ? <LiveLocationIcon height={10} /> : _t('You are sharing your live location') }
-    </div>;
+        { isMinimized ? <LiveLocationIcon height={10} /> : label }
+    </AccessibleButton>;
 };
 
 export default LeftPanelLiveShareWarning;